<template>
	<transition name="router-fade">
		<div class="loading-box middle_before textC" :class="isLoading?'active':''" v-show="isLoading">
			<img style="width:90px" class="middle" :src="loadingImg[loadingImgIndex]" />
		</div>
	</transition>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"ZghRouterLoading",
		model:{
			prop:'show',
			event:'change'
		},
		props:{
			show:Boolean
		},
		data() {
			return {

				loadingImg: [
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_1.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_2.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_3.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_4.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_5.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_6.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_7.png',
					'http://theme.cdn.betophall.com/web/version2/images/loading/loading_8.png',
				],
				loadingImgIndex: 0,
				timer: null,
			}
		},
		computed: {
		    ...mapState(['isLoading'])
		},
		mounted() {

		},
		watch:{
			isLoading(val){
				clearInterval(this.timer)
				val ? this.loading() : clearInterval(this.timer)
			}
		},
		methods: {
			loading() {
				let vm = this
				this.timer = setInterval(function() {
					vm.loadingImgIndex++
						if(vm.loadingImgIndex > 7) {
							vm.loadingImgIndex = 1
						}
				}, 70)
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	@import url("../../assets/config");
	.loading-box {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 40%;
		height: 170px;
		margin: -90px 0 0 -20%;
		background: #fff;
		border-radius: 20px;
		z-index: -1;
		opacity:0;
		&.active{
			opacity: 1;
			z-index: 99999;

		}
		&:after {
			/*display: block;*/
			/*position: fixed;*/
			/*z-index: 000;*/
			/*content: '';*/
			/*top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			opacity: .2;
			z-index: -1;*/
		}
		img {
			position: relative;
		}
	}
</style>
