<template>
  <div>
    <StepTab :tabList="tabList" @tabActive="handleTab" :index="data.index">
      <template #plan_title>计划类型</template>
      <template #trigger_title>触发条件</template>
      <template #trigger_con>
        <div v-if="data.index == 0">
          在 &nbsp;&nbsp;
          <el-date-picker
            v-model="data.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          &nbsp;&nbsp;
          <el-time-picker v-model="data.time" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
          </el-time-picker>
          &nbsp;&nbsp;对目标用户进行触达
        </div>
        <div v-if="data.index == 1">
          <StepTodoList :form="data.list" />
        </div>
      </template>
    </StepTab>
    <div class="main_content_btn"></div>
  </div>
</template>
<script>
import StepTab from '@/components/base/StepTab.vue'
import StepTodoList from './StepTodoList.vue'
export default {
  components: { StepTab, StepTodoList },
  props: {
    data: { type: Object }
  },

  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      times: '',
      times2: '',
      caseId: '',
      showIndex: 0,
      // 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: '条件触发'
        }
      ]
    }
  },
  methods: {
    handleTab(index) {
      this.data.index = index
    },

    handleStepTwo() {
      let flag = true
      if (this.data.index === 1) {
        this.data.list[0].form.triggerList.forEach(item => {
          if (item.triggerValue === '') {
            flag = false
          }
        })
      } else if (this.data.index === 0) {
        console.log(this.data)
        if (this.data.date === '' || this.data.date === null || this.data.time === '' || this.data.time === null) {
          flag = false
        }
      }
      !flag && this.$message.warning('请完善改步骤后才能进入下一步')
      return flag
    }
  }
}
</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>
