<template>
  <div>
    <ToolCard class="main_content">
      <Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
      <div style="flex: 1">
        <SmsStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" />
        <SmsStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
        <SmsStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
        <SmsStepFour :data="form" class="step-four" v-if="activeStep === 3" />
        <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 { cacheReport, getReportDetail, checkRecord, submitReport } from '../api'
import ToolCard from '@/components/base/ToolCard.vue'
import SmsStepOne from '../components/mobileSms/SmsStepOne.vue'
import Step from '@/components/base/Step.vue'
import SmsStepTwo from '../components/mobileSms/SmsStepTwo.vue'
import SmsStepThree from '../components/mobileSms/SmsStepThree.vue'
import SmsStepFour from '../components/mobileSms/SmsStepFour.vue'
export default {
  components: {
    ToolCard,
    SmsStepOne,
    Step,
    SmsStepTwo,
    SmsStepThree,
    SmsStepFour
  },
  data() {
    return {
      form: {
        stepOne: stepOne,
        stepTwo: {
          index: 0, // 触发类型
          triggerDate: '', // 单次触发 触发日期
          triggerTime: '', // 单次触发 触发时间
          time_range: [], // 周期触发 触发时间范围
          times_every: '', // 周期触发 触发周期
          times_hour: '', //  周期触发  触发时间
          times_send: '', // 节日触发 触发时间
          solarTermsList: [] // 选中的节日
        },
        stepThree: {
          title: '',
          content: ''
        }
      },
      activeStep: 0,
      caseId: ''
    }
  },

  methods: {
    // 上一步
    handlePrev() {
      this.activeStep--
    },
    handleNext() {
      // 找到对应步骤，调用组件内部方法检查未填
      switch (this.activeStep) {
        case 0:
          this.$refs.stepOne.handleStepOne() && this.handleStep()
          break
        case 1:
          this.$refs.stepTwo.handleStepTwo() && this.handleStep()
          break
        case 2:
          this.$refs.stepThree.handleStepThree() && this.handleStep()
          break
      }
    },
    // 保存步骤
    handleStep(val) {
      const reports = {
        activeStep: this.activeStep + 1,
        type: 4,
        commit_report: this.form
      }
      console.log(reports, 'rep')
      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
        this.caseId = res.data.id
        this.activeStep++
      })
    },
    // 预览
    handlePreview() {
      this.activeStep++
    },
    handlePlan() {
      const reports = {
        id: this.caseId || this.$route.query.id,
        reports: JSON.stringify({
          type: 4,
          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 === 4) {
          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 => parseInt(item.type) === 4)
          if (answerList) {
            this.caseId = answerList.id
            this.activeStep = answerList.answer.activeStep || 0
            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;
    margin-top: 41px;
    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>
