<template>
	<view class="u-page">
		<view class="u-page__item">
			<u-tabbar :zIndex="99999" :value="thisChecked" @change="changeTargets" :fixed="true" :placeholder="true"
				:safeAreaInsetBottom="true" activeColor="#FF4D03">
				<u-tabbar-item text="首页" icon="https://img.agrimedia.cn/chwl/v2/sy.png">
				</u-tabbar-item>
				<u-tabbar-item text="分类" icon="https://img.agrimedia.cn/chwl/v2/fl.png"></u-tabbar-item>
				<u-tabbar-item text="购物车" icon="https://img.agrimedia.cn/chwl/v2/gwc.png"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="https://img.agrimedia.cn/chwl/v2/wd-active.png"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: "tabbars",
		data() {
			return {
				link: [
					'/pages/index/index',
					'/pages/sort/sort',
					'/pages/myCart/myCart',
					'/pages/uCenter/uCenter',
				],
			};
		},
		computed: {
			...mapGetters({
				thisChecked: 'tabbar/thisChecked',
			}),
		},
		created() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			if(curRoute == 'pages/index/index'){
				this.setCurrent(0)
			}
			if(curRoute == 'pages/sort/sort'){
				this.setCurrent(1)
			}
			if(curRoute == 'pages/myCart/myCart'){
				this.setCurrent(2)
			}
			if(curRoute == 'pages/uCenter/uCenter'){
				this.setCurrent(3)
			}
			console.log(curRoute,'tabbar')
		},
		
		methods: {
			...mapMutations({
				setCurrent: 'tabbar/setCurrent'
			}),
			changeTargets(e) {
				
				console.log(e, 'changeTargets')
				this.setCurrent(e)
				uni.reLaunch({
					url: this.link[e],
					complete(res) {
						console.log(res)
					}
				})
				// name => value6 = name
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-primary;
				background-color: $u-primary;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}

			&__slot-icon {
				width: 17px;
				height: 17px;
			}
		}
	}
</style>
