<template>
	<view class="">
		<view class="bottab">
			<view
				@click="selectTab(0)"
				class="tab-item">
				<image :src="currentIndex == 0 ? tab0.iconActive : tab0.icon" class="tab-icon"/>
				<text>{{ tab0.name }}</text>
			</view>
			<view
				@click="selectTab(1)"
				class="tab-item">
				<image :src="currentIndex == 1 ? tab1.iconActive : tab1.icon" class="tab-icon"/>
				<text>{{ tab1.name }}</text>
			</view>
			<view
				@click="selectTab(2)"
				class="tab-item">
				<image :src="currentIndex == 2 ? tab2.iconActive : tab2.icon" class="tab-icon"/>
				<text>{{ tab2.name }}</text>
			</view>
			<view
				@click="selectTab(3)"
				class="tab-item">
				<image :src="currentIndex == 3 ? tab3.iconActive : tab3.icon" class="tab-icon"/>
				<text>{{ tab3.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BottomTab',
		// 高亮以父级为准（代码里 handleTabChange、弹窗进通知等），不能只用本组件 data
		props: {
			currentIndex: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				tab0: {
					name: this.$i18n.t('device'),
					icon: 'https://api.ccttiot.com/smartmeter/img/static/ujoLaGPGo31xZ8d9WTgp',
					iconActive: 'https://api.ccttiot.com/smartmeter/img/static/uxFjJZXPEL2EDWGObImv'
				},
				tab1: {
					name: this.$i18n.t('room'),
					icon: 'https://api.ccttiot.com/smartmeter/img/static/uYaQcfSiyw3pZ43PI3ak',
					iconActive: 'https://api.ccttiot.com/smartmeter/img/static/uieivZ9H1t0GLwd9zojL'
				},
				tab2: {
					name: this.$i18n.t('notification'),
					icon: 'https://api.ccttiot.com/smartmeter/img/static/uxTX9qz1LfqS4A4gI9qY',
					iconActive: 'https://api.ccttiot.com/smartmeter/img/static/uTKa1oUyvKZs4MMzDYle'
				},
				tab3: {
					name: this.$i18n.t('control'),
					icon: 'https://api.ccttiot.com/smartmeter/img/static/uiVqWrW6dJCzn6tWMtTn',
					iconActive: 'https://api.ccttiot.com/smartmeter/img/static/u9tPDLHBpA7r9m72PrR2'
				}
			}
		},
		methods: {
			selectTab(index) {
				this.$emit('tab-change', index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabactive {
		color: #000 !important;
	}
	.bottab {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		width: 750rpx;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		background: #fff;
		z-index: 999;
		pointer-events: auto;
		view {
			text-align: center;
			width: 60rpx;
			color: #ccc;
			font-size: 26rpx;
			cursor: pointer;
			pointer-events: auto;
			width: 100%;
			image {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: auto;
			}
		}
	}
</style> 