<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="triggerDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
          &nbsp;&nbsp;
          <el-time-picker
            v-model="triggerTime"
            arrow-control
            placeholder="选择时间"
            size="mini"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
          &nbsp;&nbsp;对目标用户进行触达
        </div>
        <div v-if="showIndex === 1">
          从&nbsp;&nbsp;
          <el-date-picker
            v-model="time_range"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          &nbsp;&nbsp;时间范围内
          <br />
          <br />
          &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
          <el-select v-model="times_every">
            <el-option v-for="it in timesList" :key="it.value" :label="it.label" :value="it.value"> </el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;
          <el-time-picker v-model="times_hour" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
          </el-time-picker>
          发送
        </div>
        <div v-if="showIndex === 2">
          <!-- 节气 -->
          <div class="solarTerms">
            <div class="solarTerms_left">
              <div class="solarTerms_left_top">节气</div>
              <div
                :class="checkAllSolar ? 'solarTerms_left_top_selectActive' : 'solarTerms_left_top_select'"
                @click="handleSelectAllSolar"
              >
                全选
              </div>
            </div>
            <div class="solarTerms_right">
              <div
                v-for="(item, index) in solarTermsList"
                :key="index"
                :class="item.isActive ? 'solarTerms_right_itemActive' : 'solarTerms_right_item'"
                @click="handleItemSolarActive(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <!-- 节日 -->
          <div class="festival">
            <div class="festival_left">
              <div class="festival_left_top">节日</div>
              <div
                :class="checkAllFest ? 'festival_left_top_selectActive' : 'festival_left_top_select'"
                class="festival_left_top_select"
                @click="handleSelectAllFes"
              >
                全选
              </div>
            </div>
            <div class="festival_right">
              <div v-for="(item, index) in festivalList" :key="index">
                <div
                  :class="item.isActive ? 'festival_right_itemActive' : 'festival_right_item'"
                  @click="handleItemFesActive(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="sendMessage">
            在如上日期
            <el-time-picker
              v-model="times_send"
              arrow-control
              placeholder="选择时间"
              size="mini"
              value-format="HH:mm:ss"
            >
            </el-time-picker>
            发送
          </div>
        </div>
      </template>
    </StepTab>
  </div>
</template>
<script>
import StepTab from '@/components/base/StepTab.vue'
export default {
  components: { StepTab },
  props: {
    stepTwoData: {}
  },

  data() {
    return {
      timesList: [
        {
          value: '0',
          label: '每日'
        },
        {
          value: '1',
          label: '每周'
        },
        {
          value: '2',
          label: '每月'
        }
      ],
      triggerDate: '', // 单次触发 触发日期
      triggerTime: '', // 单次触发 触发时间
      time_range: [], // 周期触发 触发时间范围
      times_every: '', // 周期触发 触发周期
      times_hour: '', //  周期触发  触发时间
      times_send: '', // 节日触发 触发时间
      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: '周期触发'
        },
        {
          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: '节日触发'
        }
      ],
      festivalList: [
        { id: '0', name: '元旦', isActive: false },
        { id: '1', name: '情人节', isActive: false },
        { id: '2', name: '愚人节', isActive: false },
        { id: '3', name: '复活节', isActive: false },
        { id: '4', name: '母亲节', isActive: false },
        { id: '5', name: '父亲节', isActive: false },
        { id: '6', name: '感恩节', isActive: false },
        { id: '7', name: '万圣节', isActive: false },
        { id: '8', name: '元旦节', isActive: false },
        { id: '9', name: '小满', isActive: false }
      ],
      solarTermsList: [
        { id: '0', name: '小寒', isActive: false },
        { id: '1', name: '大寒', isActive: false },
        { id: '2', name: '立春', isActive: false },
        { id: '3', name: '雨水', isActive: false },
        { id: '4', name: '惊蛰', isActive: false },
        { id: '5', name: '春分', isActive: false },
        { id: '6', name: '清明', isActive: false },
        { id: '7', name: '谷雨', isActive: false },
        { id: '8', name: '立夏', isActive: false },
        { id: '9', name: '小满', isActive: false },
        { id: '10', name: '芒种', isActive: false },
        { id: '11', name: '夏至', isActive: false },
        { id: '12', name: '小暑', isActive: false },
        { id: '13', name: '大暑', isActive: false },
        { id: '14', name: '立秋', isActive: false },
        { id: '15', name: '处暑', isActive: false },
        { id: '16', name: '白露', isActive: false },
        { id: '17', name: '秋分', isActive: false },
        { id: '18', name: '寒露', isActive: false },
        { id: '19', name: '霜降', isActive: false },
        { id: '20', name: '立冬', isActive: false },
        { id: '21', name: '小雪', isActive: false },
        { id: '22', name: '大雪', isActive: false },
        { id: '23', name: '冬至', isActive: false }
      ]
    }
  },
  computed: {
    // 全选节气
    checkAllSolar() {
      return this.solarTermsList.filter(item => item.isActive === true).length === this.solarTermsList.length
    },
    // 全选节日
    checkAllFest() {
      return this.festivalList.filter(item => item.isActive === true).length === this.festivalList.length
    }
  },
  mounted() {
    this.festivalList = this.stepTwoData.festivalList.length ? this.stepTwoData.festivalList : this.festivalList
    this.solarTermsList = this.stepTwoData.solarTermsList.length ? this.stepTwoData.solarTermsList : this.solarTermsList
    this.triggerDate = this.stepTwoData.triggerDate
    this.triggerTime = this.stepTwoData.triggerTime
    this.time_range = this.stepTwoData.time_range
    this.times_every = this.stepTwoData.times_every
    this.times_hour = this.stepTwoData.times_hour
    this.times_send = this.stepTwoData.times_send
  },

  methods: {
    // 全选节气
    handleSelectAllSolar() {
      if (this.checkAllSolar) {
        this.solarTermsList.forEach(item => {
          item.isActive = !item.isActive
        })
      } else {
        this.solarTermsList.forEach(item => {
          item.isActive = true
        })
      }
    },
    // 全选节日
    handleSelectAllFes() {
      if (this.checkAllFest) {
        this.festivalList.forEach(item => {
          item.isActive = !item.isActive
        })
      } else {
        this.festivalList.forEach(item => {
          item.isActive = true
        })
      }
    },
    // 是否选择节气
    handleItemSolarActive(item) {
      item.isActive = !item.isActive
    },
    // 是否选择节日
    handleItemFesActive(item) {
      item.isActive = !item.isActive
    },
    // tab切换
    handleTab(index) {
      this.showIndex = index
    },
    // 进去下一步之前的判断
    handleStepTwo() {
      const stepTwoData = {
        triggerDate: this.triggerDate,
        triggerTime: this.triggerTime,
        time_range: this.time_range,
        times_every: this.times_every,
        times_hour: this.times_hour,
        times_send: this.times_send,
        solarTermsList: this.solarTermsList,
        festivalList: this.festivalList
      }

      this.$emit('getTime', stepTwoData)
      if (
        this.triggerDate === '' ||
        this.triggerTime === '' ||
        this.time_range[0] === '' ||
        this.time_range[1] === '' ||
        this.times_every === '' ||
        this.times_hour === '' ||
        this.times_send === '' ||
        this.festivalList.filter(item => item.isActive === false).length === this.festivalList.length ||
        this.solarTermsList.filter(item => item.isActive === false).length === this.solarTermsList.length
      ) {
        this.$message.warning('请完善改步骤后才能进入下一步')
        return false
      }
      return true
    }
  }
}
</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;
  }
}
.solarTerms {
  display: flex;
  .solarTerms_left {
    width: 102px;
    .solarTerms_left_top {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      padding-left: 19px;
    }
    .solarTerms_left_top_selectActive {
      width: 70px;
      height: 32px;
      background: rgba(73, 187, 162, 0.39);
      border-radius: 20px;
      text-align: center;
      font-size: 14px;
      line-height: 32px;
      color: #ffffff;
      margin-top: 16px;
      cursor: pointer;
    }
    .solarTerms_left_top_select {
      width: 70px;
      height: 32px;
      border: 1px solid #cacaca;
      border-radius: 20px;
      font-size: 14px;
      line-height: 32px;
      color: #999999;
      text-align: center;
      margin-top: 16px;
      cursor: pointer;
    }
  }
  .solarTerms_right {
    display: flex;
    flex-wrap: wrap;
    max-width: 465px;
    .solarTerms_right_itemActive {
      width: 60px;
      height: 26px;
      background: rgba(237, 245, 243, 0.39);
      border: 1px solid #80d6c4;
      border-radius: 20px;
      text-align: center;
      font-size: 12px;
      line-height: 26px;
      color: #49bba2;
      margin-right: 11px;
      margin-bottom: 11px;
    }
    .solarTerms_right_item {
      width: 60px;
      height: 26px;
      background: rgba(255, 255, 255, 0.39);
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      font-size: 12px;
      line-height: 26px;
      text-align: center;
      color: #999999;
      margin-right: 11px;
      margin-bottom: 11px;
    }
  }
}

.festival {
  display: flex;
  margin-top: 36px;
  .festival_left {
    width: 102px;
    .festival_left_top {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      padding-left: 19px;
    }

    .festival_left_top_select {
      cursor: pointer;
      width: 70px;
      height: 32px;
      border: 1px solid #cacaca;
      border-radius: 20px;
      font-size: 14px;
      line-height: 32px;
      color: #999999;
      text-align: center;
      margin-top: 16px;
    }
    .festival_left_top_selectActive {
      width: 70px;
      height: 32px;
      background: rgba(73, 187, 162, 0.39);
      border-radius: 20px;
      text-align: center;
      font-size: 14px;
      line-height: 32px;
      color: #ffffff;
      margin-top: 16px;
      cursor: pointer;
    }
  }

  .festival_right {
    display: flex;
    flex-wrap: wrap;
    max-width: 465px;
    .festival_right_itemActive {
      width: 60px;
      height: 26px;
      background: rgba(237, 245, 243, 0.39);
      border: 1px solid #80d6c4;
      border-radius: 20px;
      text-align: center;
      font-size: 12px;
      line-height: 26px;
      color: #49bba2;

      margin-right: 11px;
      margin-bottom: 11px;
    }

    .festival_right_item {
      width: 60px;
      height: 26px;
      background: rgba(255, 255, 255, 0.39);
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      font-size: 12px;
      line-height: 26px;
      text-align: center;
      color: #999999;
      margin-right: 11px;
      margin-bottom: 11px;
    }
  }
}
.sendMessage {
  margin-left: 146px;
  margin-top: 39px;
}
</style>
