<template>
  <div>
    <ToolCard class="main_content">
      <Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
      <div style="flex: 1">
        <MailStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="mailStepOne" />
        <MailStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" ref="mailStepTwo" />
        <MailStepThree :data="form.stepThree" ref="mailStepThree" v-if="activeStep === 2" />
        <MailStepFour :data="form" class="step-four" v-if="activeStep === 3"></MailStepFour>
        <div class="main_content_btn" v-if="this.$route.query.view != 1">
          <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="handleNext" 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 stepTwo from '@/utils/stepTwo'
import { cacheReport, getReportDetail, checkRecord, submitReport } from '../api'
import ToolCard from '@/components/base/ToolCard.vue'
import MailStepOne from '../components/mail/MailStepOne.vue'
import Step from '@/components/base/Step.vue'
import MailStepTwo from '../components/mail/MailStepTwo.vue'
import MailStepThree from '../components/mail/MailStepThree.vue'
import MailStepFour from '../components/mail/MailStepFour.vue'
export default {
  components: {
    ToolCard,
    MailStepOne,
    Step,
    MailStepTwo,
    MailStepThree,
    MailStepFour
  },
  data() {
    return {
      // 所有步骤的数据
      form: {
        stepOne: stepOne,
        stepTwo: {
          index: 0,
          list: stepTwo,
          date: '',
          time: ''
        },
        stepThree: {}
      },
      // 当前步骤的索引
      activeStep: 0,
      // 答题id
      caseId: ''
    }
  },

  methods: {
    // 上一步
    handlePrev() {
      this.activeStep--
    },
    // 下一步
    handleNext() {
      // 找到对应步骤，调用组件内部方法检查未填
      switch (this.activeStep) {
        case 0:
          this.$refs.mailStepOne.handleStepOne() && this.handleStep()
          break
        case 1:
          this.$refs.mailStepTwo.handleStepTwo() && this.handleStep()
          break
        case 2:
          if (this.$refs.mailStepThree.makePreview() !== false) {
            this.form.stepThree = this.$refs.mailStepThree.makePreview()
            this.handleStep()
          }
          break
      }
    },
    // 保存步骤信息
    handleStep() {
      const reports = {
        activeStep: this.activeStep + 1,
        type: 2,
        commit_report: this.form
      }
      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
        this.caseId = res.data.id
        this.activeStep++
      })
    },
    // 提交
    handlePlan() {
      const reports = {
        id: this.caseId || this.$route.query.id,
        reports: JSON.stringify({
          type: 2,
          commit_report: this.form
        })
      }
      submitReport(reports).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '已成功创建营销计划',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push({
              path: '/works-show/history',
              query: {
                type: 3
              }
            })
          }, 1000)
        }
      })
    },
    // 获取步骤信息回显
    getReportDetail(id) {
      getReportDetail(id).then(res => {
        if (res.data.detail.answer.type === 2) {
          if (parseInt(this.$route.query.view) === 1) {
            this.activeStep = 3
          } else {
            this.activeStep = res.data.detail.answer.activeStep
          }
          this.form = res.data.detail.answer.commit_report
        }
      })
    },
    // 验证是否有未完成的答题记录
    checkRecord() {
      checkRecord(this.$store.state.case.id, 2).then(res => {
        if (res.data.status === true) {
          const answerList = res.data.items.find(item => item.type === 2)
          if (answerList) {
            this.activeStep = answerList.answer.activeStep || 0
            this.caseId = answerList.id
            this.form = answerList.answer.commit_report
          }
        }
      })
    }
  },
  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;
      padding: 0 25px;
      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;
}
.step-four {
  padding: 42px 35px;
  flex: 1;
  border-left: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}
</style>
