<template>
	<view class="box position-bottom">
		<view :class="['cu-bar','tabbar','bg-' + config.bgColor]">
			<view 
			v-for="item in leftNav"
			:key="item.id"
			:class="['action',{'text-green':cur_type === item.type}]" 
			@click="handelTap"  
			:data-cur="item.type">
				<view :class="item.icon">
					<view 
					v-if="item.tag >= 0"
					class="cu-tag badge"
					>{{item.tag}}</view>
				</view>
				{{item.text}}
			</view>
			<view 
			v-if="config.hasMid"
			:class="['action',midSetting.textClass,'add-action']">
				<button 
				:class="['cu-btn',midSetting.icon,midSetting.bgClass,{'shadow':midSetting.shadow}]"
				@click="takeFuc"
				></button>
				{{midSetting.text}}
			</view>
			<view
			v-for="item in rightNav"
			:key="item.id"
			:class="['action',{'text-green':cur_type === item.type}]" 
			@click="handelTap"  
			:data-cur="item.type">
				<view :class="item.icon">
					<view 
					v-if="item.tag >= 0"
					class="cu-tag badge"
					>{{item.tag == 0 ? '' : item.tag }}</view>
				</view>
				{{item.text}}
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			config:{
				type:Object,
				default:()=>( {
					id: -1,
					name: 'pageBarName',
					bgColor:'white',
					hasMid:true,
					midSetting: {
						icon: 'cuIcon-add',
						bgClass: 'bg-green',
						shadow: true,
						text: '新增',
						textClass:'text-gray',
						shadow:true
					},
					navBar: [
					{
						id:0,
						icon: 'cuIcon-home',
						text: '首页',
						type:'home',
						tag:-1
					},
					{
						id:1,
						icon: 'cuIcon-similar',
						text: '分类',
						type:'type',
						tag:-1
					},
					{
						id:2,
						icon: 'cuIcon-cart',
						text: '购物车',
						type:'shopping',
						tag:99
					},
					{
						id:3,
						icon: 'cuIcon-my',
						text: '我的',
						type:'mine',
						tag:0
					},
					]
				})
			},
			takeFuc:{
				type:Function,
				default:(type)=>{console.log('change:' + type)}
			}
		},
		data() {
			return {
				cur_type:'home',
				leftNav:[],
				rightNav:[]
			};
		},
		computed:{
			midSetting(){
				return this.config.midSetting
			},
		},
		created(){
			const navBar = this.config.navBar;
			if(Object.prototype.toString.call(navBar) !== "[object Array]" ) {
				throw new Error('typeError: config.navBar must be Array')
			}
			if(navBar.length > 6) {
				throw new Error('lengthError: navBar max length 6')
			}
			const temp = Math.floor( navBar.length / 2 );
			this.leftNav = navBar.slice(0,temp);
			if(this.config.hasMid){
				this.rightNav = navBar.slice(temp,2 * temp);
			}else{
				this.rightNav = navBar.slice(temp);
			}
			// 默认选中第一个
			this.cur_type = this.config.navBar[0].type;
		},
		methods:{
			handelTap(e){
				console.log(e.currentTarget.dataset.cur);
				this.cur_type = e.currentTarget.dataset.cur;
				this.$emit('onChange',e.currentTarget.dataset.cur);
				// this.onChange(e.currentTarget.dataset.cur);
			}
		}
	}
</script>

<style lang="scss">
	.position-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>