<template>
	<view class="cu-bar-box">
		<view class="cu-bar tabbar bg-black text-gray">
			<view @click="handler(index)" v-for="(item, index) in value" :key="index" class="action" :class="{ 'text-orange': active == index }">
				<view v-if="item.image" class="cuIcon-cu-image"><image :src="item.image"></image></view>
				<view v-else :class="[item.icon]"></view>
				<view>{{ item.label }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request/index.js';
import { barList } from '../config.js';
import { mapState } from 'vuex';
export default {
	props: {
		active: { type: String / Number, default: 0 }
	},
	computed: {
		...mapState(['bind'])
	},
	data() {
		return {
			value: barList,
			sale: false
		};
	},
	async onPageShow() {
		let result = await request({ url: `/customer/distributor/type/`, method: 'get' });
		if (result.code !== 0) return false;
		this.sale = result.data;
	},
	methods: {
		handler(index) {
			if (index == this.active) return false;
			if (this.value[index].type && this.value[index].type == 'navigateTo') {
				if (!this.sale) return false;
				uni.navigateTo({
					url: '/' + (this.sale == 'yes' ? this.value[index]['page'] : this.value[index]['cloned'])
				});
			}
			uni.switchTab({
				url: '/' + this.value[index]['page']
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-bar-box {
	min-height: 100upx;
	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	.cu-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		z-index: 99999;
	}
}
</style>
