<template>
  <div class="main_content">
    <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 />
        </div>
      </template>
    </StepTab>
  </div>
</template>
<script>
import StepTab from '@/components/base/StepTab.vue'
import StepTodoList from './StepTodoList.vue'
export default {
  components: { StepTab, StepTodoList },

  data() {
    return {
      showIndex: 0,
      time: '',
      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.showIndex = index
    }
  }
}
</script>
