<template>
  <div>
    <ToolCard class="main_content">
      <Step :activeStep="activeStep" class="pt50-pl60" />
      <div>
        <ChatStepOne
          v-if="activeStep === 0"
          class="pt-50"
          :activeStep="activeStep"
          :stepOneList="stepOneList"
          ref="mailStepOne"
        />
        <ChatStepTwo v-if="activeStep === 1" class="pt-50" />
        <div class="main_content_btn">
          <div class="step_prev step_btn" @click="handlePrev" v-if="activeStep > 0">上一步</div>
          <div class="step_next step_btn" @click="handleNext" v-if="activeStep >= 0 && activeStep < 2">下一步</div>
          <div class="step_finished step_btn" @click="handlePreview" v-if="activeStep === 2">点击生成预览</div>
          <div class="step_finished step_btn" @click="handlePlan" v-if="activeStep === 3">执行营销计划</div>
        </div>
      </div>
    </ToolCard>
  </div>
</template>

<script>
import stepOne from '@/utils/stepOne'
import { cacheReport, getReportDetail, checkRecord } from '../api'
import ToolCard from '@/components/base/ToolCard.vue'
import ChatStepOne from '../components/weChat/ChatStepOne.vue'
import Step from '@/components/base/Step.vue'
import ChatStepTwo from '../components/weChat/ChatStepTwo.vue'
export default {
  components: {
    ToolCard,
    ChatStepOne,
    Step,
    ChatStepTwo
  },
  data() {
    return {
      activeStep: 0,
      stepOneList: [],
      caseId: ''
    }
  },

  methods: {
    // 上一步
    handlePrev() {
      const reports = {
        activeStep: this.activeStep,
        type: 5,
        commit_report: [{ stepOneList: this.stepOneList }, { form: this.stepTwoList }]
      }
      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
        this.caseId = res.data.id
        this.activeStep--
      })
    },
    // 下一步
    handleNext() {
      if (this.activeStep === 0) {
        if (this.$refs.mailStepOne.handleStepOne()) {
          // 保存步骤信息
          this.handleStep(0)
        }
      } else if (this.activeStep === 1) {
        this.handleStep(1)
      }
    },
    handleStep(val) {
      const reports = {
        activeStep: parseInt(val),
        type: 5,
        commit_report: [{ stepOneList: this.stepOneList }]
      }
      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
        this.caseId = res.data.id
        this.activeStep++
      })
    },
    // 预览
    handlePreview() {
      this.activeStep++
    },
    handlePlan() {},
    // 获取步骤信息回显
    getReportDetail(id) {
      getReportDetail(id).then(res => {
        if (res.data.detail.answer.type === 5) {
          this.activeStep = res.data.detail.answer.activeStep
          this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
        }
      })
    },
    // 验证是否有未完成的答题记录
    checkRecord() {
      checkRecord(this.$store.state.case.id, 2).then(res => {
        if (res.data.status === true) {
          const answerList = res.data.items.filter(item => item.type === 5)
          if (res.data.items.length && answerList.length) {
            this.activeStep = answerList[0].answer.activeStep
            this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
          } else {
            this.initStepList()
          }
        } else {
          this.initStepList()
        }
      })
    },
    // 初始化步骤列表
    initStepList() {
      this.stepOneList = stepOne
    }
  },
  mounted() {
    if (this.$route.query.type) {
      this.getReportDetail(this.$route.query.id)
    } else {
      this.checkRecord()
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  display: flex;
  // padding: 42px 39px 52px 63px;
  // overflow: scroll;
  .main_content_btn {
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
    .step_btn {
      width: 119px;
      height: 32px;
      opacity: 1;
      border-radius: 16px;
      font-size: 18px;
      line-height: 32px;
      color: #ffffff;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
      // margin-top: 200px;
    }
    .step_prev {
      border: 1px solid #cacaca;
      background: #fff;
      color: #ffffff;
      color: #6d6d71;
    }
    .step_next {
      background: #49bba2;
    }
    .step_finished {
      background: #49bba2;
    }
  }
}
.pt50-pl60 {
  padding: 50px 0 0 60px;
}
.pt-50 {
  padding-top: 50px;
}
</style>
