<template>
  <div>
    <StepTab :tabList="tabList" @tabActive="handleTab">
      <template #plan_title>计划类型</template>
      <template #trigger_title>触发条件</template>
      <template #trigger_con>
        <div v-if="showIndex === 0">
          在 &nbsp;&nbsp;<el-date-picker
            v-model="time"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
          >
          </el-date-picker
          >&nbsp;&nbsp;对目标用户进行触达
        </div>
        <div v-if="showIndex === 1">
          <StepTodoList :form="form" />
        </div>
      </template>
    </StepTab>
    <div class="main_content_btn">
      <div class="step_prev step_btn" @click="handlePrev">上一步</div>
      <div class="step_next step_btn" @click="handleNext">下一步</div>
    </div>
  </div>
</template>
<script>
import StepTab from '@/components/base/StepTab.vue'
import StepTodoList from './StepTodoList.vue'
import { cacheReport } from '../../api'
export default {
  components: { StepTab, StepTodoList },

  data() {
    return {
      showIndex: 0,
      time: '',
      // tab切换列表
      tabList: [
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
          tabName: '单次触发'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
          tabName: '条件触发'
        }
      ],
      // 条件触发列表
      form: {
        triggerList: [
          {
            triggerValue: '',
            list: [
              { value: '0', label: '启动APP' },
              { value: '1', label: '用户登录' },
              { value: '2', label: '购买基金商品' },
              { value: '3', label: '购买理财产品' },
              { value: '4', label: '购买保险产品' },
              { value: '5', label: '浏览基金产品' },
              { value: '6', label: '浏览理财产品' },
              { value: '7', label: '浏览保险产品' },
              { value: '8', label: '关闭APP' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    console.log(JSON.parse(window.localStorage.getItem('triggerList')), '123')
    if (JSON.parse(window.localStorage.getItem('triggerList'))) {
      this.form.triggerList = JSON.parse(window.localStorage.getItem('triggerList'))
    }
    if (window.localStorage.getItem('time')) {
      this.time = window.localStorage.getItem('time')
    }
  },

  methods: {
    handleTab(index) {
      this.showIndex = index
    },
    handlePrev() {
      this.$parent.$parent.handlePrev()
    },
    handleNext() {
      let flag = false
      this.form.triggerList.forEach(item => {
        if (item.triggerValue === '' || this.time === '') {
          flag = true
          return false
        }
      })
      if (flag) {
        this.$message.warning('请完善改步骤后才能进入下一步')
        return false
      } else {
        const reports = { type: 1, commit_report: [{ form: this.form.triggerList }, { time: this.time }] }
        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
          window.localStorage.setItem('triggerList', JSON.stringify(this.form.triggerList))
          window.localStorage.setItem('time', this.time)
          this.$emit('getStepTwoInfo', this.form.triggerList, this.time)
          this.$parent.$parent.handleNext()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main_content_btn {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  .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;
  }
  .step_prev {
    border: 1px solid #cacaca;
    background: #fff;
    color: #ffffff;
    color: #6d6d71;
  }
  .step_next {
    background: #49bba2;
  }
}
</style>
