<template>
  <div>
    <div class="backHome" v-show="!showAll" @click="goBack" v-lz-click="'27'"><img
      src="//img10.360buyimg.com/imgzone/jfs/t1/192345/7/563/3086/608b72b0E44fe03ec/1b301ce054b52dc6.png"/></div>
    <!-- 首页 -->
    <div class="fissionDraw" v-show="showAll">
      <div class="drawChance">
        <b>当前待使用的抽奖机会：{{ canDrawTimes }}次</b>
      </div>
      <!-- 进度条 -->
      <div class="jindu">
        <b>差{{ poorScore }}{{ scoreName }}获得一次抽奖机会</b>
        <van-progress
          class="van-progress"
          :percentage="diff"
          :stroke-width="8"
          track-color="#a00226"
          :pivot-text="String(score)"
          pivot-color="#fdc05f"
          color="#fdd57b"
          text-color="#e43140"
        />
        <span class="chushi">0</span>
        <span class="zuizhong">{{ totalScore }}</span>
      </div>

      <!-- 抽奖按钮 -->
      <div class="drawButton" @click="clickDraw"></div>
      <component
        ref="dataRef"
        v-for="(value, key, index) in componentsData"
        :key="index"
        :is="key"
        :templateData="templateData"
        :isTemplate="isTemplate"
        :styleData="value.styleData"
        :datas="value.datas"
        :keyData="value.keyData"
      ></component>
    </div>
    <!-- 抽奖页面 -->
    <div class="drawPage" v-if="!showAll">
      <component
        ref="dataRef"
        v-for="(value, key, index) in componentsData1"
        :key="index"
        :is="key"
        :templateData="templateData"
        :isTemplate="isTemplate"
        :styleData="value.styleData"
        :datas="value.datas"
        :keyData="value.keyData"
      ></component>
    </div>

    <!-- 底部按钮 -->
    <div class="backTop">
      <div class="goTop" @click="backTop" v-lz-click="'26'"></div>
      <div class="goShop" @click="goToShop(shopId)" v-lz-click="'4'"></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Progress} from 'vant';
import {goToShopPage} from '../../../util/tools';
import dailyTeam from '../../basisComponent/dailyTeam/dailyTeam.vue';
import fissionTask from '../../basisComponent/fissionTask/fissionTask.vue';

import fissionPrizeList from '../../basisComponent/prizeShow/fissionPrizeList.vue';
import rotalTable from '../../logicalComponent/luckyDraw/rotaryTable3.vue';
import winnersRecord from '../../logicalComponent/winnersRecord/winnersRecordOld.vue';

Vue.use(Progress);

import apis1 from '../../../util/apis1.js';

let {getGroupDraw} = apis1;
import {toastPopComService} from '../../../util/comCreate.js';

export default {
  components: {
    dailyTeam,
    fissionTask,
    fissionPrizeList,
    rotalTable,
    winnersRecord
  },
  props: ['styleData', 'datas', 'keyData', 'isTemplate', 'templateData'],
  data() {
    return {
      componentsData: {},
      componentsData1: {},
      canDrawTimes: 0,
      poorScore: '0',
      scoreName: '',
      score: '0',
      totalScore: '0',
      shopId: 0,
      diff: 0,

      //任务 关注店铺
      followStauts: false,
      followTaskId: 0,
      showAll: true //显示所有组件
    };
  },
  created() {
    //重新请求主接口
    this.publicData.$on('follow', res => {
      if (res) {
        console.log("wwwww")
        this.initData(0);
      }
    });

    this.initData(1);
    this.componentsData = {
      fissionTask: {
        styleData: {},
        datas: {},
        keyData: {}
      },
      dailyTeam: {
        styleData: {},
        datas: {},
        keyData: {}
      }
    };
    this.componentsData1 = {
      fissionPrizeList: {
        styleData: {},
        datas: {},
        keyData: {}
      },
      rotalTable: {
        isShow: true,
        styleData: {
          "dataStyleAll": {
            "restDrawCountStyle": {
              "color": "#fff",
              "font-size": "0.22rem",
              "margin-top": "1rem",
              "restDrawCountSpanStyle": {
                "font-size": "0.30rem",
              }
            },
            "signButtonStyle": {},
            "originButton": {
              "width": "3.72rem",
              "background": "linear-gradient(to bottom,#ff9e31,#fc3037)",
              "border": "none",
              "color": "#fff",
              "border-radius": "25px",
              "padding": "0.12rem 0.24rem",
              "border": "2px solid #fff",
              "text-align": "center",
              "font-size": "0.28rem",
              "margin": "auto"
            },
            "goneIndexButtonSign": {
              "width": "3.72rem",
              "background": "#878787",
              "border": "none",
              "color": "#fff",
              "border-radius": "25px",
              "padding": "0.12rem 0.24rem",
              "border": "2px solid #fff",
              "text-align": "center",
              "font-size": "0.28rem",
              "margin": "auto"
            }
          },

          turnMaskBox: {
            position: 'relative',
            width: '100%',
            height: '100%',
            top: '15px',
            zIndex: '1',
            background: '#e22f3f'
          },
          turnBox: {
            marginTop: '5px'
          },
          restDrawCountStyle: {
            color: '#fff',
            'font-size': '0.22rem',
            "margin-top": "1rem !important",
            marginBottom: '.5rem'
          }
        },
        datas: {
          "isShowRotary": true,
          "isShowButton": false,
          "bottomDrawTimes": true,
          "isShowDrawCount": false,
          mainBg: '//img10.360buyimg.com/imgzone/jfs/t1/129824/2/19769/31221/5fd73662Eb1472006/c0d787842445f48c.png',
          mainBg1: '//img10.360buyimg.com/imgzone/jfs/t1/135505/16/19918/81040/5fd736e1E3196e132/01394fb4be5409a9.png',
          pointerImg: '//img10.360buyimg.com/imgzone/jfs/t1/149414/11/18314/24204/5fd72ef8Ebf2fffcd/13048a21b7322147.png'
        },
        keyData: {
          mainBg: 'mainBg',
          mainBg1: 'mainBg1',
          pointerImg: 'pointerImg',
          restDrawCount: 'restDrawCount',
          prizeName: 'prizeName',
          showImg: 'showImg',
          position: 'position',
          turnMaskBox: 'turnMaskBox,',
          turnBox: 'turnBox',
          restDrawCountStyle: 'restDrawCountStyle'
        }
      },
      winnersRecord: {
        styleData: {
          winRecordStyle: {
            mainStyleDiv: {
              background: 'url(//img10.360buyimg.com/imgzone/jfs/t1/152692/27/9777/6491/5fd5ce59E5056d0c0/39708827a71a8ba0.png) no-repeat',
              'background-size': '100% 100%',
              width: '100%',
              height: '6.28rem',
              'text-align': 'center',
              'margin-top': '1.1rem'
            },
            winRecordImg: {
              width: '4.42rem',
              height: '1.26rem',
              'margin-top': '-0.74rem'
            },
            recordListDiv: {
              'margin-top': '0.2rem',
              height: '4.68rem',
              'overflow-y': 'scroll'
            },
            recordItemDiv: {
              margin: '0 0.42rem 0.10rem 0.42rem',
              'border-radius': '0.16rem',
              padding: '0.10rem 0.16rem',
              background: '#fd1f25',
              display: 'flex',
              'justify-content': 'space-between'
            },
            recordItemLeft: {
              display: 'flex',
              'align-items': 'center',
              color: '#fff',
              'font-size': '0.22rem'
            },
            avatarImg: {
              width: '0.72rem',
              height: '0.72rem',
              'border-radius': '50%',
              background: '#2C3E50',
              'margin-right': '0.10rem'
            },
            recordItemRight: {
              color: '#fff',
              display: 'flex',
              'font-size': '0.24rem',
              'align-items': 'center'
            }
          }
        },
        datas: {
          isShowRecord: true,
          titleImage: '//img10.360buyimg.com/imgzone/jfs/t1/130131/8/19972/15487/5fd5ce53Ec3a33253/a55942a3e63818c0.png'
        },
        keyData: {
          userImg: 'userImg',
          nickName: 'nickName',
          prizeName: 'prizeName'
        }
      }
    };
  },
  methods: {
    async initData(type) {
      this.publicData.$off('dailyTeam');
      // this.publicData.$off('taskDataAll');
      this.publicData.$off('shopId');

      if (this.isTemplate == true) {
        var dataAll = this.templateData;
        if (dataAll) {
          console.log(dataAll)
          this.canDrawTimes = 0;
          this.poorScore = dataAll.group.score.scoreDraw;
          this.totalScore = dataAll.group.score.scoreDraw;
          this.scoreName = dataAll.group.score.scoreName;
        } else {
          this.canDrawTimes = 0;
          this.poorScore = 100;
          this.totalScore = 100;
          this.scoreName = "进度";
        }
      } else {
        getGroupDraw(type, dataAll => {
          if (dataAll.data.status != 0) {
            if (dataAll.data.status == 1) {
              // var message = '助力成功'
              //  this.$toast('助力成功');
              toastPopComService.create('助力成功', submit => {
                toastPopComService.close();
              });
            } else if (dataAll.data.status == 2) {
              // var message = '已助力'
              // this.$toast('已助力');
              toastPopComService.create('已助力', submit => {
                toastPopComService.close();
              });
            } else if (dataAll.data.status == 3) {
              // var message = '队伍已满'
              // this.$toast('队伍已满');
              toastPopComService.create('队伍已满', submit => {
                toastPopComService.close();
              });
            }
            // toastPopComService.create(message,submit => {
            //   console.log(submit)
            //   toastPopComService.close();
            // });
          }


          var data = {...dataAll.data}

          this.canDrawTimes = data.canDrawTimes;
          this.poorScore = data.poorScore;
          this.scoreName = data.scoreName;
          this.score = String(data.score);
          this.totalScore = String(data.totalScore);
          this.shopId = data.shopId;
          this.diff = (this.score / this.totalScore) * 100;

          this.followStauts = data.follow.status;
          var addGoodStatus = data.addWares.status;
          var browsStatus = data.browe.status;

          this.followTaskId = data.follow.taskId;

          this.publicData.$emit('taskDataAll', this.followStauts, addGoodStatus, browsStatus, this.followTaskId, dataAll);
          this.publicData.$emit('dailyTeam', data);
          this.publicData.$emit('shopId', this.shopId);

        });
      }
    },
    backTop() {
      console.log('2132123')
      document.documentElement.scrollTop = 0;//ios
      document.body.scrollTop = 0//android
    },
    goToShop(shopid) {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      goToShopPage(shopid);
    },
    clickDraw() {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      this.showAll = false;
    },
    goBack() {

      this.showAll = true;
      this.initData(0)
    }
  }
};
</script>
<style lang="scss" scoped>
.backHome {
  height: 0.4rem;
  width: 1.1rem;
  position: absolute;
  top: 1.5rem;
  right: 0px;
}

.fissionDraw {
  width: 100%;
  // height:10rem;
  background: #cd193d;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.drawChance {
  width: 6.87rem;
  height: 0.99rem;
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/167111/17/20842/9203/60868cd9Eb49e3e6b/e216dd59c5f8bead.png');
  background-size: 100%;
  display: flex;
  // align-items: center;
  justify-content: center;
  color: #feba61;

  b {
    margin-top: 0.2rem;
  }
}

.jindu {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;

  b {
    font-size: 0.24rem;
    color: #feba61;
    margin-bottom: 0.2rem;
  }

  .chushi {
    font-size: 0.24rem;
    color: #feba61;
    position: absolute;
    left: 0.8rem;
    top: 0.8rem;
  }

  .zuizhong {
    font-size: 0.24rem;
    color: #feba61;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
  }

  .van-progress {
    width: 80%;
  }
}

.drawButton {
  width: 3.49rem;
  height: 1.05rem;
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/169150/2/20928/23706/60868e0aEd32ef777/82206a377dec2d65.png');
  background-size: 100%;
  margin-top: 0.5rem;
}

.backTop {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  // position: absolute;
  // bottom: 0rem;

  .goTop {
    width: 3.14rem;
    height: 0.89rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/173224/14/6768/5739/60876cd5E9064c93d/5f2b7055be061e1a.png');
    background-size: 100%;
  }

  .goShop {
    width: 3.14rem;
    height: 0.89rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/169695/23/20979/5761/60876cd5E9ef08955/f8b59147f7acd300.png');
    background-size: 100%;
  }
}
</style>
