<template>
  <div>
    <ToolCard class="main_content">
      <Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
      <div style="flex: 1">
        <AppStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" />
        <AppStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
        <AppStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
        <AppStepFour v-if="activeStep === 3" class="step-four" :data="form" />
        <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 appStepTwo from '@/utils/appStepTwo'
import stepTwo from '@/utils/stepTwo'
import { cacheReport, getReportDetail, checkRecord, submitReport } from '../api'
import ToolCard from '@/components/base/ToolCard.vue'
import AppStepOne from '../components/app/AppStepOne.vue'
import Step from '@/components/base/Step.vue'
import AppStepTwo from '../components/app/AppStepTwo.vue'
import AppStepThree from '../components/app/AppStepThree.vue'
import AppStepFour from '../components/app/AppStepFour.vue'
export default {
  components: {
    ToolCard,
    AppStepOne,
    Step,
    AppStepTwo,
    AppStepThree,
    AppStepFour
  },
  data() {
    return {
      form: {
        stepOne: stepOne,
        stepTwo: {
          index: 0,
          list: appStepTwo,
          list2: stepTwo
        },
        stepThree: {}
      },
      activeStep: 0,
      stepOneList: [],
      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:
          if (this.$refs.stepThree.makePreview() !== false) {
            this.form.stepThree = this.$refs.stepThree.makePreview()
            this.handleStep()
          }
          break
      }
    },
    handleStep() {
      const reports = {
        activeStep: this.activeStep + 1,
        type: 3,
        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: 3,
          commit_report: this.form
        })
      }
      submitReport(reports).then(res => {
        if (res.code === 0) {
          this.$router.push({
            path: '/works-show/history',
            query: {
              type: 3
            }
          })
        }
      })
    },
    // 获取步骤信息回显
    getReportDetail(id) {
      getReportDetail(id).then(res => {
        if (res.data.detail.answer.type === 3) {
          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 === 3)
          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>
