<template>
  <div class="grid">
    <div class="grid-item" v-for="(item, index) in items" :key="index" :class="{ 'selected': selected == index && selected!=4}">
      {
   { item }}
    </div>
	<button @click="lottery">开始抽奖</button>
  </div>
</template>

<script>
	let wait = 60;
	let cycle = 20;
	let step = 0;
	let speedDown = false;
	let timer = null;
export default {
  data() {
    return {
      // 九宫格中的奖品
      items: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6', '奖品7', '奖品8', '奖品9'],
      // 中奖位置
      selected:0,
	  win:9
    };
  },
  computed: {
  	target() {
  		let target = this.win - 1;
  		target = target < 0 ? 0 : (target > 8? 8 : target);
  		return target;
  	}
  },


  methods: {
  	lottery() {
  		if (this.isRuning) return;
  		if (this.async) {
  			this.$emit('start', {
  				run: () => {
  					this.run();
  				}
  			});
  		} else {
  			this.$emit('start');
  			this.run();
  		}
  	},
  	run() {
  		if (this.isRuning) return;
  		this.inited = true;
  		this.isRuning = true;
  		this.roll();
  	},
  	roll() {
  		timer = setTimeout(() => {
  			clearTimeout(timer);
  			if (step > cycle) {
  				if (speedDown) {
  					wait += 50;
  					if (this.selected === this.target) {
  						this.end();
  						return false;
  					}
  				}
  				if (this.selected === this.target) {
  					speedDown = true;
  				}
  			};
  			this.next();
  			const time = new Date().getTime();
  			this.time = time
  			this.roll()
  		}, wait);
  	},
  	next() {
  		let selected = this.selected;
  		selected++
  		step++
  		if (selected > 8) {
  			selected = 0;
  		}
  		this.selected = selected;
  	},
  	end() {
  		step = 0;
  		wait = 50;
  		speedDown = false;
  		this.$emit('end');
  		this.isRuning = false;
  	}
  }
};
</script>

<style>
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 240px;
  margin: 0 auto;
}
.grid-item {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 18px;
}
.selected {
  background-color: #ff0;
}
button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 10px;
  border: none;
  background-color: #4caf50;
  color: #fff;
  cursor: pointer;
}
</style>