<template>
	<view class="foot-nav row">
		<view class="foot-nav-background-group">
			<view class="foot-nav-background">
				<view class="foot-nav-background-small"></view>
			</view>
		</view>
		<view class="foot-nav-button-group row">
			<view class="col-3 foot-nav-button" v-for="(item,index) in buttonGroup"
				:class="{active:(item.name == footCheck)}" :style="{
					backgroundImage:'url('+item.image+ ((item.name == footCheck)?'-active':'')+'.png)',
					backgroundSize:'auto '+((item.name == footCheck)?'81':'54')+'rpx'
				}" @click="commitFootCheck(item)">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	export default {
		props: {

		},
		data() {
			return {
				footCheck: 'home',
				title: 'Hello',
				loading: true,
				buttonGroup: [{
						image: imghost + "/static/image/foot-nav-button-one",
						url: '/pages/index/index',
						name: 'home',
						title:'汪汪行天下',
					},
					{
						image: imghost + "/static/image/foot-nav-button-two",
						url: '/pages/order/index',
						name: 'order',
						title:'订单',
					},
					{
						image: imghost + "/static/image/foot-nav-button-three",
						url: '/pages/chatList/index',
						name: 'chat',
						title:'在线沟通',
					},
					{
						image: imghost + "/static/image/foot-nav-button-four",
						url: '/pages/user/index',
						name: 'user',
						title:'',
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			commitFootCheck(item) {
				this.$store.commit('footCheck',item.name);
				this.$store.commit('title',item.title);
				console.log('commit');
			},
			isFootCheck() {
				// return this.;
			}
		},
		watch: {
			"$store.state.footCheck": {
				handler(newVal, oldVal) {
					this.footCheck = newVal;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/components/FooterNav/components/index.scss';
</style>