<template>
	<view class="foot-fixed">
		<view v-for="(item, index) in navList" :key='index'>
			<view id="navIndex" :style="{width:foot_width}" @click="jump" :data-idx="index" :data-url="item.url"
				class="foot-item">

				<view class="foot-icon-box">
					<image class="foot-icon" :src="item.photo" mode="widthFix" v-if="current != index"></image>
					<image class="foot-icon2" :src="item.photoAc" mode="widthFix" v-if="current == index"></image>
				</view>

			
				<text class="foot-label" id="navIndexLabel">{{item.nav_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "nav",
		props:{
			current:{
				type:Number,
				default: 0,
			}
		},
		data() {
			return {
				navList: [
					{
						photo:"http://192.168.0.172:5500/footer_home.png",
						photoAc:"http://192.168.0.172:5500/footer_homeAc.png",
						nav_name:"首页",
						url:"/pages/index/index"
					},
					{
						photo:"http://192.168.0.172:5500/footer_community.png",
						photoAc:"http://192.168.0.172:5500/footer_communityAc.png",
						nav_name:"我的小区",
						url:"/packages/community/index/index"
					},
					{
						photo:"http://192.168.0.172:5500/footer_shop.png",
						photoAc:"http://192.168.0.172:5500/footer_shopAc.png",
						nav_name:"优选商城",
						url:""
					},
					{
						photo:"http://192.168.0.172:5500/footer_door.png",
						photoAc:"http://192.168.0.172:5500/footer_doorAc.png",
						nav_name:"上门服务",
						url:""
					},
					{
						photo:"http://192.168.0.172:5500/footer_mine.png",
						photoAc:"http://192.168.0.172:5500/footer_mineAc.png",
						nav_name:"我的",
						url:"/pages/user/index"
					},
				],
				foot_width: '20%',
			};
		},
		methods: {
			getFootnav() {
				let _that = this;
				uni.request({
					url: 'https://zhsq.hshuishang.com/Miniapi/Index/footer_nav_list',
					method: 'post',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {},
					dataType: 'json',
					success: (result) => {
						result.data[0].url = "/pages/index/index"
						result.data[1].url = "/pages/device/device"
						result.data[2].nav_name = "手机通行"
						result.data[2].url = "/pages/phoneGo/phoneGo"

						result.data[3].url = `/packages/community/index/index`
						result.data[4].url = "/pages/user/index"

						result.data.splice(1, 2);
						let footWidth = (100 / result.data.length).toFixed(2) + '%';
						this.navList = result.data;
						this.foot_width = footWidth;
					},
				});
			},
			
			
			//暂未开通
			NotOpen() {
				uni.showModal({
					title: '提示',
					content: '此功能暂未开通！',
					showCancel: false,
					complete: (res) => {
						if (res.cancel) {

						}
					}
				})
			},


			jump(e) {
				const ctoken = uni.getStorageSync('ctoken');
				const authen = ['/pages/index/index', '/pages/user/index','/pages/user/index'];
				// 除首页及个人中心页不需要鉴定ctoken， 其他tab页均需存在登录态才可访问
				if (authen.includes(e.currentTarget.dataset.url)) {
					uni.redirectTo({
						url: e.currentTarget.dataset.url,
					})
					return
				}
				if (!ctoken) {
					uni.redirectTo({
						url: '/pages/login/login',
					})
					return;
				}

				uni.redirectTo({
					url: e.currentTarget.dataset.url,
				})
			},


		},
		mounted() {
			// this.getFootnav();
		}
	}
</script>

<style>
	@import url("./nav.css");
</style>