<template>
	<cover-view class="tabbarbox">
		<cover-view class="tablist" v-for="(el,ind) in list" @click="getpath(el.pagePath)" :key="ind">
			<cover-image class="tbimg" :src="info.ind==el.index?el.selectedIconPath:el.iconPath" mode="aspectFill"
				lazy-load="true"></cover-image>
			<cover-view :class="['tbtext',info.ind==el.index?'act':'']">{{el.text}}</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				list: [{
					"pagePath": "/pages/index",
					"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-sy0.png",
					"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-sy1.png",
					"text": "首页",
					"index": 0
				}, {
					"pagePath": "/pages/dydl",
					"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-dt0.png",
					"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-dt1.png",
					"text": "文体旅地图",
					"index": 1
				}, 
				// {
				// 	"pagePath": "/pages/tab/index/index",
				// 	"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/icon-cgyy0.png",
				// 	"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/icon-cgyy1.png",
				// 	"text": "预约",
				// 	"index": 2
				// }, 
				{
					"pagePath": "/pages/tab/my/index",
					"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-wd0.png",
					"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-wd1.png",
					"text": "我的",
					"index": 2
				}]
			}
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			getpath(url) {
				console.log(url)
				uni.reLaunch({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbarbox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		background-color: #FFFFFF;
		display: flex;
		z-index: 999999;
		justify-content: space-evenly;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
		align-items: center;

		.tablist {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;

			.tbimg {
				width: 62upx;
				height: 62upx;
				margin: 5upx auto;
			}

			.tbtext {
				font-size: 26upx;
				color: #666666;
			}

			.act {
				color: #999999;
			}
		}
	}
</style>
