<template>
	<view class="maxtabbox">
		<view v-for="(item,index) in tabberlist" @click="gopath(item.router)" :key='index'>
			<image :src="state==item.phname?item.checkicon:item.icon"></image>
			<view :class="state==item.phname?'xz':''">{{item.name}}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { tabberT } from '@/interfaces/compoment/Tabber'
	import { reactive, defineProps, toRefs,watchEffect } from "vue"
	let details = reactive<tabberT>({
		tabberlist: [
			{ phname:'home',icon: '/static/TabberIcon/icon1.png', checkicon: '/static/TabberIcon/icon1check.png', name: '工作台',router:'/pages/index/index' },
			{ phname:'task',icon: '/static/TabberIcon/icon2.png', checkicon: '/static/TabberIcon/icon2check.png', name: '任务',router:'/pages/taskList/taskList' },
			{ phname:'report',icon: '/static/TabberIcon/icon3.png', checkicon: '/static/TabberIcon/icon3check.png', name: '报表',router:'/pages/reportForms/reportForms' },
			{ phname:'news',icon: '/static/TabberIcon/icon4.png', checkicon: '/static/TabberIcon/icon4check.png', name: '信息',router:'/pages/news/news' },
			{ phname:'user',icon: '/static/TabberIcon/icon5.png', checkicon: '/static/TabberIcon/icon5check.png', name: '我的',router:'/pages/user/user' },
		],
		state: 'home'
	})
	let props=defineProps<{checkstate?:string}>()
	// console.log(props.checkstate);
	watchEffect(()=>{
		details.state=props.checkstate
	})
	function gopath(path:string){
		uni.switchTab({
			url:path
		})
		// // #ifdef MP-WEIXIN
		// uni.switchTab({
		// 	url:path
		// })
		// // #endif
		// // #ifndef MP-WEIXIN
		// uni.reLaunch({
		// 	url:path
		// })
		// // #endif
	}
	const {tabberlist,state} =toRefs(details)
</script>

<style lang="scss">
	.maxtabbox{
		display: grid;
		grid-template-columns: 20% 20% 20% 20% 20%;
		position: fixed;
		left: 0;
		bottom: -50upx;
		z-index: 9999999999;
		background-color: #fff;
		width: 100vw;
		padding: 10upx 0;
		box-sizing: border-box;
		// border-top: 1upx solid #dddddd;
		padding-top: 15upx;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 10upx;
			>image{
				width: 45upx;
				height: 45upx;
				margin-bottom: 5upx;
			}
			>view{
				font-size: 24upx;
				color: #AFB4BA;
			}
			.xz{
				color: #092C4D !important;
			}
		}
	}
</style>