<template>
	<view>
		<view class="tab-bar">
			<view class="item"  :style="[active == 2?{color: '#a07c5a'}:'']" 
			:class="active == 2?'active':''" 
			@click="navTo(2,'/pages/theater/index/index')">
				<image src="/static/images/huodong.png" class="menu-icon"/>
				<text class="title"  :style="[active == 2?{color: '#a07c5a'}:'']">活 动</text>
			</view>
			<view class="item"  :style="[active == 1?{color: '#a07c5a'}:'']" 
				:class="active == 1?'active':''" 
			      @click="navTo(1,'/pages/home/home')">
				  <image src="/static/images/changdi.png" class="menu-icon"/> 
				<text class="title" :style="[active == 1?{color: '#a07c5a'}:'']">场 地</text>
			</view>
			
			<view class="item"  :style="[active == 3?{color: '#a07c5a'}:'']" 
			:class="active == 3?'active':''"
			 @click="onOpenHw">
				<image src="/static/images/2ndhome.png" class="menu-icon" style="width: 67px;height: 67px">
				
			</view>
			
			<view class="item" :style="[active == 4?{color: '#a07c5a'}:'']" 
			:class="active == 4?'active':''"
			 @click="navTo(4,'/pages/index/index?store_id=3')">
				<image src="/static/images/gongyi.png" class="menu-icon"/>
				<text class="title" :style="[active ==4?{color: '#a07c5a'}:'']">商 城</text>
			</view>
			<view class="item" :style="[active == 5?{color: '#a07c5a'}:'']"
			:class="active == 5?'active':''"
			 @click="navTo(5,'/pages/home/myhome')">
				<image src="/static/images/wode.png" class="menu-icon" />
				<text class="title" :style="[active ==5?{color: '#a07c5a'}:'']">我 的</text>
			</view>
		</view>
		<!-- 号外号外 -->
		<uni-popup ref="hwPopForm" type="center" style="z-index: 60;">
			 <SoundForm :dataList="movieList"></SoundForm>
		</uni-popup>
	</view>

</template>
<script>
		import SoundForm from '@/components/SoundForm/SoundForm.vue'
	export default {
		props: {
			active: {
				type: Number,
				default: 1
			}
		},
		components: {
			
			
			SoundForm
		},
		
		data() {
			return {
				// diy:2
				// active:1
			};
		},
		
		computed: {
			
			diy() {
				
				return this.$store.state.systemInfo.is_vip;
			},
			
			setColor() {
		
				return this.$store.state.setColor;
			}
			
		},
		watch:{
			active(val){
				console.log(val);
				this.active=val
			}
		},
		
		methods: {

			navTo(index, url) {	
				console.log(index);
				if (index != this.active) {
					uni.switchTab({
						url: url
					})
					
				}
				
			},
			//打开收音机
			onOpenHw(e){ 
				this.$refs.hwPopForm.open('center');
			},
			
		}
	}
</script>

<style scoped>
	.tab-bar {
		background-color: #fff;
		width: 100vw;
		
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		
		display: flex;
		flex-flow: row nowrap;
		justify-tab-bar: space-around;
		align-items: center;
		border-top: 1px solid #f0f0f0;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 900;

	}

	.tab-bar .item {
		flex: auto;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		color: #8a8a8a;
		height: 120rpx;
	}
	
	.menu-icon{
		width:24px;
		height:24px;
	}

	.tab-bar .iconfont {
		display: block;
		font-size: 48rpx;
		/* color: #8a8a8a; */
	}

	.tab-bar .active .iconfont {
		/* color: #3387FF; */
	}

	.tab-bar .title {
		font-size: 28rpx;
		height: 36rpx;
		line-height: 48rpx;
		text-align: center;
		/* color: #8a8a8a; */
	}

	.tab-bar .active .title {
		/* color: #3387FF; */
		color: #8a8a8a;
		font-weight: bold;
	}
</style>
