<template>
  <div>
    <!--    时间-->
    <div class="time-range" v-if="status==='initial' || status==='none'">
      <div v-if="activity">活动时间：{{ activity.startTime |dateTime }} 至 {{ activity.endTime|dateTime }}</div>
    </div>
    <div class="gate-block" v-if="status==='initial'">
      <!--答题活动已开始且满足条件-->
      <Button class="start-button" v-if="showStart" @click="onBeginAnswer" :disabled="!canStart">
        {{ datas.startText || '开始' }}
      </Button>
      <p class="tip" v-if="tip">{{ tip }}~</p>
    </div>
    <!--    答题页面-->
    <div class="block paper-block" v-if="status==='inAnswer'">
      <paper :type="type" :items="qaQuestionList" @onFinished="onQaFinished"/>
    </div>
    <!--    收集信息页面-->
    <div class="block collect-block" v-if="status==='collect'">
      <collect :items="taskQainfoQuestionList" @onFinished="onCollectFinished"></collect>
    </div>
    <!--    大圆盘抽奖页面-->
    <div class="block draw-block" v-if="status==='draw'"></div>
  </div>
</template>
<script>
import {Button} from "vant";
import collect from "./components/collect";
import paper from "./components/paper";
import apis1 from '../../../util/apis1.js';
import dateUtil from '../../../util/dateUtil.js';

let {taskQaActivity, taskQaSubmit} = apis1;

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData'],
  components: {
    Button,
    paper,
    collect
  },
  data() {
    return {
      /**
       * 活动状态
       * 0：默认状态,没有含义
       * 1:活动尚未开始
       * 2:活动已结束
       * 3:活动正常进行
       */
      actStatus: '0',
      /**
       * 分块状态控制
       * none: 初始化状态，显示开始答题按钮
       * initial: 初始化状态，显示开始答题按钮
       * inAnswer: 答题中
       * collect: 收集信息中
       * draw: 抽奖中
       */
      status: 'none',
      // 活动信息
      activity: null,
      // 提示信息
      tip: null,
      // 活动期内剩余答题次数
      restTotalTimes: -1,
      // 每日剩余答题次数
      restDayTimes: -1,
      // 类型：1答题 2问卷(无正确答案)
      type: 0,
      // 是否收集信息：0不搜集 1收集
      collectInfoFlag: 0,
      // 用户是否已经收集完信息 true 是 ， false 否
      collectInfoFinishFlag: false,
      // 题
      qaQuestionList: [],
      // 采集信息内容（collectInfoFlag为1且用户未收集过信息时，展示并收集）
      taskQainfoQuestionList: [],
      //用户答题选项
      taskQaChoice: [],
      // 采集信息（活动设置采集信息且用户之前未采集时必传）
      taskQaCollectInfo: [],
      // 活动加载ok
      showStart: false
    };
  },
  computed: {
    // 是否可以开始
    canStart() {
      return !(this.restTotalTimes === 0 || this.restDayTimes === 0);
    },
    activityType() {
      return sessionStorage.getItem("activityType");
    }
  },
  created() {
    if (this.isTemplate) {
      this.status = 'initial';
      this.showStart = true;
      this.setPreviewData();
    } else {
      this.publicData.$on('activityLoaded', this.activityLoaded);
    }
  },
  methods: {
    // 活动加载完成
    activityLoaded(data) {
      this.activity = data;
      this.setGate();
    },
    // 设置入口
    setGate() {
      this.actStatus = sessionStorage.getItem("actStatus");
      if (this.actStatus === '3') {
        this.status = 'initial';
        this.loadData();
      }
    },
    // 获取活动专项数据
    loadData() {
      taskQaActivity()
        .then(res => {
          this.showStart = true;
          const data = res.data;
          this.setPaper(data);
          this.setTip();
        })
        .catch(msg => {
          this.showStart = false;
          this.tip = msg;
        });
    },
    // 设置预览数据
    setPreviewData() {
      // 活动期内剩余答题次数
      this.setPaper(this.datas.previewData)
    },
    // 设置活动专项数据
    setPaper(data) {
      // 活动期内剩余答题次数
      this.restTotalTimes = data.restTotalTimes;
      // 每日剩余答题次数
      this.restDayTimes = data.restDayTimes;
      // 类型：1答题 2问卷(无正确答案)
      this.type = data.type;
      // 是否收集信息：0不搜集 1收集
      this.collectInfoFlag = data.collectInfoFlag;
      // 用户是否已经收集完信息 true 是 ， false 否
      this.collectInfoFinishFlag = data.collectInfoFinishFlag;
      // 题
      this.qaQuestionList = data.qaQuestionList;
      // 采集信息内容（collectInfoFlag为1且用户未收集过信息时，展示并收集）
      this.taskQainfoQuestionList = data.taskQainfoQuestionList;
    },
    // 设置提示信息
    setTip() {
      if (this.restTotalTimes === 0) {
        this.tip = this.activityType === '10011' ? '答题次数已用完~' : '您已经填写过此问卷了~';
        return false;
      }
      // 如果今天没有机会了，
      if (this.restDayTimes <= 0) {
        this.tip = this.activityType === '10011' ? '今日答题次数已用完，请明天再来~' : '您已经填写过此问卷了~';
        return false;
      }
    },
    // 开始答题按钮点击事件
    onBeginAnswer() {
      if (this.qaQuestionList.length > 0) {
        this.status = 'inAnswer';
      } else {
        this.toCollect();
      }
    },
    // 当回答完成后
    onQaFinished(data) {
      this.taskQaChoice = data;
      this.toCollect();
    },
    // 当收集信息完成后
    onCollectFinished(data) {
      this.taskQaCollectInfo = data;
      this.submitQaAndCollect();
    },
    // 去收集信息
    toCollect() {
      // 是否收集信息：0不搜集 1收集
      if (this.collectInfoFlag) {
        //直接进入到抽奖页面
        if (this.taskQainfoQuestionList.length > 0) {
          this.status = 'collect';
        } else {
          this.submitQaAndCollect();
        }
      } else {
        this.submitQaAndCollect();
      }
    },
    // 提交qa回答和收集信息回答
    submitQaAndCollect() {
      if (this.isTemplate) {
        this.status = 'draw';
        // 需要重新请求接口
        this.publicData.$emit('qaDrawShow', {result: this.datas.previewData.result});
      } else {
        taskQaSubmit({
          //用户答题选项
          taskQaChoice: this.taskQaChoice,
          // 采集信息（活动设置采集信息且用户之前未采集时必传）
          taskQaCollectInfo: this.taskQaCollectInfo,
        }).then(res => {
          this.status = 'draw';
          this.result = res.data;
          // 需要重新请求接口
          this.publicData.$emit('qaDrawShow', this.result);
        });
      }
    }
  },
  filters: {
    dateTime(val) {
      if (val) {
        return dateUtil.formatTime(val, 'yyyy-MM-dd hh:mm');
      }
      return val;
    }
  }
};
</script>
<style lang="scss" scoped>
.time-range {
  font-size: 0.22rem;
  color: #d8e4ff;
  text-align: center;
  position: absolute;
  top: 2.38rem;
  left: 0;
  width: 100%;
}

.block {
  height: 100vh;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #092643;

  &.paper-block {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.gate-block {
  position: absolute;
  z-index: 10;
  top: 9.92rem;
  left: 50%;
  transform: translateX(-50%);

  .start-button {
    width: 6.26rem;
    height: 0.94rem;
    background-image: linear-gradient(0deg, #fde79e 1%, #f9d489 50%, #f4c174 100%), linear-gradient(#dcaf57, #dcaf57);
    background-blend-mode: normal, normal;
    border-radius: 0.1rem;
    font-size: 0.46rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    letter-spacing: 0;
    color: #070a1e;
    border: none;

    &:disabled {
      background-image: linear-gradient(0deg, #b7b7b7 1%, #c4c4c4 50%, #d3d3d3 100%), linear-gradient(#b7b7b7, #d3d3d3);
      color: #070a1e;
      opacity: 1;
    }
  }

  .tip {
    font-size: 0.26rem;
    color: #ffffff;
    margin: 0.5rem 0.2rem;
    line-height: 1;
  }
}

</style>
