<template>
  <div class="xd-lottery"
       :style="{
       width: container[0] * container[2] + 'px',
       height: container[0] * container[2] + 'px'
      }"
  >
    <div
      class="xd-lottery__container"
      v-if="list.length > 0"
      :style="{
       width: containerWidth + 'px',
       height: containerHeight + 'px'
      }"
    >
      <div
        class="xd-lottery__container-item"
        v-for="item in list"
        :key="item.index"
        :style="{
          width: item.width+ 'px',
          height: item.height + 'px',
          top: item.top + 'px',
          left: item.left + 'px',
          background: 'url(' + (index === item.index ? itemBgHover: itemBg) + ') center center no-repeat'
        }"
      >
        <div :style="{width:item.name &&0? '60px': '90px' }"><img :src="item.image" :alt="item.name"></div>
        <div v-if="item.name && 0">{{item.name}}</div>
      </div>
    </div>
    <div
      class="xd-lottery__btn"
      :style="{
         width: btnWidth + 'px',
         height: btnWidth + 'px',
         top: container[0] + 'px',
         left: container[0] + 'px'
      }"
    >
      <slot>
        <div
          @click="goLottery"
          :style="{
             background: 'url(' + btnBg + ') center center no-repeat',
             backgroundSize: '105% 105%',
             width: container[0] + 'px',
             height: container[0] + 'px',
          }"
        ></div>
      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "XdRunHorseLamp",
    props:{
      itemBg: {
        type: String,
        default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkFEODFDNkY5N0RCMTFFQzk5QjE5RkQ1MEZFNkYzOTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkFEODFDNzA5N0RCMTFFQzk5QjE5RkQ1MEZFNkYzOTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQUQ4MUM2RDk3REIxMUVDOTlCMTlGRDUwRkU2RjM5MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQUQ4MUM2RTk3REIxMUVDOTlCMTlGRDUwRkU2RjM5MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp5TqdEAAARjSURBVHja7NxNb1R1FMDh/wxFtClaF8awUEmMJgaIcWUI7EQXfgDjC+6IX0JFG+K3cMmL4SuIOwgxhKgBNrgRjCEIpdiORYQWz7F36hQ67cztZVHneZIDoW1acuaXe2fu3LS1OD1TapqI2R2zP2ZvzOsxz8U8XdiMZmNuxPwUczbmdMzFmE6db9YaMqwtMQdipmLe9FiMhO9jvog5FbPQdFitmPdivq6OVIyePHIdijkZ86CJsF6oan3VbgmXY96OubrWF7XX+SYfVN9AVHRlC1eqNmqFdTjmuD3Sx/GqkaHC+rR6gg5rmapaGeg51kcxR+2MIRyMObZWWC9W508Y1s7edtoPXVL41n6o6bvennrDet+rPzbg5d5Xit1T4VjMHzHj9sMGzMc8E3O/e8R6S1Q0YLxqaflUeMROaMiR7qkw3/ubsw8atD2PWHvsgYbtzrD22QMN2y8sHod9GdYue6BhuzKsHfZAw3ZkWO4IpWkTbTvgcRAWwkJYCAuEhbAQFggLYSEsEBbCQlggLISFsEBYCAthgbAQFsICYSEshAXCQlgIC4SFsBAWCAthISwQFsJCWCAshIWwQFgIC2GBsBAWwgJhISyEBcJCWAgLhIWwEBYIC2EhLBAWwkJYICyEhbBAWAgLYYGwEBbCAmEhLIQFwkJYCAuEhbAQFggLYSEsEBbCQlggLISFsBAWCAthISwQFpskrAcPbIFmRVPtsigsGraYYS0sWATNiqba5d49i6BZ0VS73P3bImhWNNUud/6yCJoVTcUR624p9z3PoiHZUjS1dB2r07EQmlG1tBTW7FxxPYsNy4aypeWw8vA156jFBmVD1dOq/97SmbldysKi5VBPtpMNVdorPjF9y4KoJ9vpOTCtfBO68+fyORIGNttZaqfHo3c3TM+UMn/HshhMtrLKma696jP76zfExWBRZSurXFHIsDp943JapO/pb65vVNlUhnWt7zWJm3GI+/2mV4usfPWXTWQb/a99XhuLPy7FvNL3G+WTsjtxyHt2spTtE6W0WpY7ijKivE412GWpS3nEOjNQpVnor7+VcnvWe4ujJB/rfMzzsb95a9Cz15mxgcLq/SG3ZpZm27ZSnnoy/n6ilK1bSxnbsnQ0c0TbvEeknHyM8x69vJ0q73zJmxSGdzrDulDrP5I/sN4P5f/vYvdV4Tm7oCHnuq8K0+f2QUP+bakb1qmy2vUsGE6namk5rHyZd8he2KBPqpZWvKVzMuZnu6GmbOeb7j96w8rLqAfsh5reqRp6JKx0NeagHTGkj2N+6f3Aar8U5FjMZ3bFgLKVow9/sN9vm/kq5oidsY4vq1bKoGGlw06LrCHbmOr3yfV+P1aeFl+KuWyPVLKFnVUbpW5Y3Sf0r8V8WFxEHWWdqoFs4cp6Xzzob/TLeyVOxEzGvBtz3p5HxvnqMZ+sGhjovpnW4rkf6/7AiZg9Mfti9sa8EfN8zLjHYlOaj7ke80PM2bJ0O9WFumepfwQYADD7JwYy16UcAAAAAElFTkSuQmCC'
      },

      itemBgHover: {
        type: String,
        default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzNDMjcyNTM5N0UzMTFFQzk5QjE5RkQ1MEZFNkYzOTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzNDMjcyNTQ5N0UzMTFFQzk5QjE5RkQ1MEZFNkYzOTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MTkyQTQ4RTk3RTExMUVDOTlCMTlGRDUwRkU2RjM5MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3M0MyNzI1Mjk3RTMxMUVDOTlCMTlGRDUwRkU2RjM5MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvOqkxYAAAR6SURBVHja7NxLb1RlGMDxt2PRWCdyiTcWIonRxAAxLgwhZSdx4cqd953xS6hoA34TReIX0ETcQYghaEwhMbqQ1kopIm1hrKn04vN2ztTpZdq5HBbN/H7JA+HWkmf+OWfOmckMLP8wmrpUjTkcczzmWMyLMY/HPJrYie7E/BnzU8zFmPMxV2Jq3XyxgQ7DeiDmRMxIzFGPRV/4PuaTmHMxi+3+o0q7Aca8ETMT842o+srR4jGfKRoYKCusp2N+jjlbnP7oT9WigdzCgV7DeitmPOZ5e6WQWxgr2ugqrJMxZ+yRFs4UjXQU1ofFE3TYykjRSlthvRNz2s5o0+mimS1vNxwozp/QqYPN7VTW3VL41n7o0nfNPTWH9aarP3rwbPOVYuNUOBgzGzNkP/RgLmZ3zELjiPWKqCjBUNHS6qnwlJ1QklONsPKt+pftg5Lklqo5rCN2QckO57CG7YGSHRcW98NwDuuQPVCyQzms/fZAyfY3rgqhTNWKHXA/CAthISyEBcJCWAgLhIWwEBYIC2EhLBAWwkJYICyEhbBAWAgLYYGwEBbCAmEhLIQFwkJYCAuEhbAQFggLYSEsEBbCQlggLISFsEBYCAthgbAQFsICYSEshAXCQlgIC4SFsBAWCAthISwQFsJCWCAshIWwQFgIC2GBsBAWwgJhISyEBcJCWAgLhIWwEBYIC2EhLBAWwkJYCAuEhbAQFgiLHRLW8rItUK5oqpIWlyyCckVTlbSwYBGUK5qqpPl5i6Bc0VQlzf1jEZQrmqqk2t8WQbmiqfoR6949y6AcuaWVI1Y2PWshlKNoqR7WrdvJ/Sx6lhvKLa2GlQ9ff01bDL25Pb36tOr/l3Smbqa0sGg5dCe3c+Pm6i8ra/7gj0kLojvXJ9ccmNa+CD0z65RI53Iz6y4AN767IR+17ty1LNqTW9nkTFfZ9Jn92ERKd2uWxvZR5VY2uaOQw9pY0NJSSr+NOy2y9env2u/1Vjaq5bAmW96TmLheL9LVIs0XebmJ3Ebre5+Tg/HD1ZjnWn6h/IS+Fge1p55Iad/elAYGLLcf5Yjyfaobbd2WuprDuhDz+raVTsSBbepWSo/tS2nv7pR27bLsfpBveOYrvnxHvf3XlC80wmr/m0xO1Wfo4ZSqj9R/fujBemiViiPaTj4i5edL+TGe/3flheSVd75097aq8zms0a7+I/kbei8Xm7vSuCq8ZBeU5FLjqjD72D4oyUpLjbDOpc3uZ0FnakVLq2Hl68f37YUefVC0tOYlna9ifrUbupTbOdv4RXNY+TbqCfuhS68WDW0IKxuPedeO6NB7Mdeaf2OzDwX5IuYju6JNuZXP1/9mq0+b+SzmlJ2xjU+LVlK7YWUnnRbZQm5jpNUfbvf5WPm0+EzML/ZIIbdwsGgjdRtW4wn9CzFvJzdR+1mtaCC3MLbdX273E/3y2wS/jNkT81rMZXvuG5eLx3xP0UBbH6g22OE3yXdVvy6mGnMkZjjmWMxLMU/GDHksdqS5mKmYH2MupvrbqUa7PUv9J8AAGjgTiCaxyCgAAAAASUVORK5CYII='
      },

      btnBg: {
        type: String,
        default: 'data:image/png;base64,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'
      },

      // 奖品位置
      prize: {
        type: Array,
        default(){
          //return [0, 1, 2, 3, 4, 5, 6, 7,8,9,10,11];
          return [
            {image: 'http://static.e56buy.com/Xd8ntpjLR6wKdPv3vYKZZYUknPfDb3Rr', name: '一等奖'},
            {image: 'http://static.e56buy.com/Xdp4xrpurDVIVaF9vqZGiUzFL2bj2s3M', name: '谢谢参与'},
            {image: 'http://static.e56buy.com/XdDqObtIxe2PqD2nfVzI6sdj7NCPHiwe', name: '二等奖'},
            {image: 'http://static.e56buy.com/XdOQmiX1heSvGRAVFHnI16ANJjlpS8wS', name: '三等奖'},
            {image: 'http://static.e56buy.com/Xd8ntpjLR6wKdPv3vYKZZYUknPfDb3Rr', name: '一等奖'},
            {image: 'http://static.e56buy.com/XdDqObtIxe2PqD2nfVzI6sdj7NCPHiwe', name: '二等奖'},
            {image: 'http://static.e56buy.com/Xdp4xrpurDVIVaF9vqZGiUzFL2bj2s3M', name: '谢谢参与'},
            {image: 'http://static.e56buy.com/XdOQmiX1heSvGRAVFHnI16ANJjlpS8wS', name: '三等奖'},
            {image: 'http://static.e56buy.com/Xd8ntpjLR6wKdPv3vYKZZYUknPfDb3Rr', name: '一等奖'},
            {image: 'http://static.e56buy.com/Xdp4xrpurDVIVaF9vqZGiUzFL2bj2s3M', name: '谢谢参与'},
            {image: 'http://static.e56buy.com/XdDqObtIxe2PqD2nfVzI6sdj7NCPHiwe', name: '二等奖'},
            {image: 'http://static.e56buy.com/XdOQmiX1heSvGRAVFHnI16ANJjlpS8wS', name: '三等奖'},
            {image: 'http://static.e56buy.com/Xd8ntpjLR6wKdPv3vYKZZYUknPfDb3Rr', name: '一等奖'},
          ];
        }
      },

      //生成九宫格参数
      container: {
        type: Array,
        default() {
          return [158, 158, 3, 3];
        }
      },

      //初始转动速度
      speed: {
        type: Number,
        default: 50,
      },

      //转动基本次数
      cycle: {
        type: Number,
        default: 20,
      }

    },
    data(){
      return {
        //生成九宫格相关参数
        list: [],
        containerWidth: 0,
        containerHeight: 0,
        sideIndex: 0, //四个边
        index: 0,    // 当前转动到哪个位置，起点位置

        //转盘相关配置
        ulCycle: 33,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        uiSpeed: 50,   // 初始转动速度
        uiPrize: [], // 奖品位置
        timer: 0,    // 每次转动定时器
        times: 0,    // 转动次数
        prizes: 3,   // 中奖位置
        slowFlag: 0, //减速种子，转动基本次数-转动次数 < 减速种子次数 开始减速
        slowCount: 0, //统计减速次数
        emptyRunMaxTime: 2000, //至少要空转最小毫秒数
        count: null,
        run: false, //动画中
        btnWidth: null,

        outSideParams:{},//外部参数
      }
    },

    created(){
      this.ulCycle = this.cycle;
      this.uiSpeed = this.speed;
      this.count = this.prize.length;
      this.init(...this.container);

      //支持外部组件启动抽奖逻辑
      XdBus.addEvent('lottery', (data) => {
        this.emptyRunMaxTime = data;
        this.goLottery()
      })
    },

    methods: {
      init(w, h, r, c){
        let empty = Math.pow(r - 2, 2);
        this.btnWidth = (r - 2) * w;
        this.containerWidth = r * w;
        this.containerHeight = c * w;
        this.list = new Array(r * c - empty).fill([]).map((_e, i) => this.getMatrixX(w, h, r, c, i));
      },

      getMatrixX(w, h, r, c, index){
        let top = 0;
        let left = 0;

        //计算当前所以所在边
        if (index < r) {
          this.sideIndex = 0;
        } else if (index >= r && index < r + (r - 1)) {
          this.sideIndex = 1;
        } else if (index >= r + (r - 1) && index < r + 2 * (r - 1)) {
          this.sideIndex = 2;
        } else if (index >= r + 2 * (r - 1)) {
          this.sideIndex = 3;
        }

        //第一个边
        if (this.sideIndex === 0) {
          top = 0;
          left = index * w;
        }
        //第二个边
        if (this.sideIndex === 1) {
          top = (index % r + 1) * h;
          left = (r - 1) * w
        }

        //第三个边
        if (this.sideIndex === 2) {
          let num = (r + (r - 1)) - index;
          let maxLeft = (r - 2) * w;
          top = (r - 1) * h;
          left = maxLeft + num * w;
        }

        //第四个边
        if (this.sideIndex === 3) {
          let num = (r + 2 * (r - 1)) - index;
          let maxTop = (r - 2) * h;
          top = maxTop + num * h;
          left = 0;
        }
        return {
          top,
          left,
          sideIndex: this.sideIndex,
          index,
          width: w,
          height: h,
          ...this.prize[index]
        }
      },

      /**转动动画*************************/
      getRandom() {
        return this.$xdHelper.random(0, this.prize.length-1);
      },

      goLottery() {
        //判断如果抽奖停止后才可以再次点击
        if (this.uiSpeed === this.speed && !this.run) {
          this.loadingStartRoll();
          this.slowFlag = this.$xdHelper.random(Math.floor(this.count / 2), Math.floor(this.count));
          this.slowCount = 0;
          this.run = true;
        }
      },

      //没有获取到中奖次数 使用空转
      loadingStartRoll() {
        let date = this.$xdHelper.random(1, 5) * 300;

        //空转
        let time = setInterval(() => {
          this.oneRoll();
        }, this.uiSpeed);

        //模拟获取到数据
        setTimeout(() => {
          this.prizes = this.getRandom();
          setTimeout(() => {
            this.startRoll();
            clearInterval(time);
          }, (this.emptyRunMaxTime - date) > 0 ? 10 : this.emptyRunMaxTime - date)
        }, date)

      },

      // 开始转动
      startRoll() {
        this.times += 1; // 转动次数
        this.oneRoll();  // 转动过程调用的每一次转动方法，这里是第一次调用初始化
        this.usePrize()
      },

      // 每一次转动
      oneRoll() {
        let index = this.index; // 当前转动到哪个位置
        const count = this.count;  // 总共有多少个位置
        index += 1;
        if (index > count - 1) {
          index = 0
        }
        this.index = index
      },

      usePrize() {
        // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
        console.log(this.times, this.ulCycle + (this.count - this.slowFlag), this.prizes, this.index);
        if (this.times > this.ulCycle + (this.count - this.slowFlag) && this.prizes === this.index) {
          clearTimeout(this.timer);   // 清除转动定时器，停止转动
          this.times = 0;
          this.uiSpeed = this.speed;    //速度初始化
          this.run = false;
          XdBus.send('result', this.list[this.prizes])
        }

        //转动动画运行
        else {
          //转动基本次数-转动次数 >= 减速种子次数 速度不变
          if ((this.ulCycle - this.times) >= this.slowFlag) {
            this.uiSpeed = this.speed;
            console.log('速度不变');
          }
          //转动基本次数-转动次数 < 减速种子次数 开始减速
          else {
            //console.log('减速', this.slowCount++, this.times);
            this.uiSpeed += 50   // 降低转动速度
          }
          this.timer = setTimeout(this.startRoll, this.uiSpeed)
        }
      }
      /**转动动画*************************/
    }
  }
</script>

<style scoped lang="scss">
  .xd-lottery {
    position: relative;
    background: #ff8400;
    margin: 30px;

    &__container {
      &-item {
        position: absolute;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        & > div:last-child {
          padding-top: 10px;
        }

        & > div:first-child {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: -15px;

          & > img {
            max-width: 100%;
          }
        }
      }
    }

    &__btn {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }

</style>
