<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.triggerDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          &nbsp;&nbsp;
          <el-time-picker
            v-model="data.triggerTime"
            arrow-control
            placeholder="选择时间"
            size="mini"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
          &nbsp;&nbsp;对目标用户进行触达
        </div>
        <div v-if="data.index === 1">
          从&nbsp;&nbsp;
          <el-date-picker
            v-model="data.time_range"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          &nbsp;&nbsp;时间范围内
          <br />
          <br />
          <!-- <el-select v-model="data.times_every">
            <el-option v-for="it in timesList" :key="it.value" :label="it.label" :value="it.value"> </el-option>
          </el-select> -->
          <el-cascader :options="timesEvery" v-model="data.times_every"></el-cascader>
          &nbsp;&nbsp;&nbsp;
          <el-time-picker
            v-model="data.times_hour"
            arrow-control
            placeholder="选择时间"
            size="mini"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
          发送
        </div>
        <div v-if="data.index === 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="data.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: {
    data: { type: Object }
  },

  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      timesEvery: [],
      timesList: [
        {
          value: '每日',
          label: '每日'
        },
        {
          value: '每周',
          label: '每周'
        },
        {
          value: '每月',
          label: '每月'
        }
      ],
      // 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_icon41.png',
          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon42.png',
          tabName: '周期触发'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon31.png',
          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon32.png',
          tabName: '节日触发'
        }
      ],
      // 节气
      festivalList: [
        { id: '00', name: '元旦', isActive: false },
        { id: '11', name: '情人节', isActive: false },
        { id: '22', name: '愚人节', isActive: false },
        { id: '33', name: '复活节', isActive: false },
        { id: '44', name: '母亲节', isActive: false },
        { id: '55', name: '父亲节', isActive: false },
        { id: '66', name: '感恩节', isActive: false },
        { id: '77', name: '万圣节', isActive: false },
        { id: '88', name: '元旦节', isActive: false },
        { id: '99', 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.timesEvery = [
      {
        value: '每日',
        label: '每日'
      },
      {
        value: '每周',
        label: '每周',
        children: [
          {
            value: '周一',
            label: '周二'
          },
          {
            value: '周二',
            label: '周二'
          },
          {
            value: '周三',
            label: '周三'
          },
          {
            value: '周四',
            label: '周四'
          },
          {
            value: '周五',
            label: '周五'
          },
          {
            value: '周六',
            label: '周六'
          },
          {
            value: '周日',
            label: '周日'
          }
        ]
      },
      {
        value: '每月',
        label: '每月',
        children: []
      }
    ]
    for (let i = 0; i < 31; i++) {
      this.timesEvery[2].children.push({ value: `${i + 1}号`, label: `${i + 1}号` })
    }
    this.setSolarTerms()
  },
  methods: {
    setSolarTerms() {
      if (this.data.index === 2) {
        this.festivalList.map(item => {
          if (this.data.solarTermsList.find(i => i.id === item.id)) {
            item.isActive = true
          }
          return item
        })
        this.solarTermsList.map(item => {
          if (this.data.solarTermsList.find(i => i.id === item.id)) {
            item.isActive = true
          }
          return item
        })
      }
    },
    // 全选节气
    handleSelectAllSolar() {
      if (this.checkAllSolar) {
        this.solarTermsList.forEach(item => {
          item.isActive = !item.isActive
        })
      } else {
        this.solarTermsList.forEach(item => {
          item.isActive = true
        })
      }
      this.solarTermsChange()
    },
    // 全选节日
    handleSelectAllFes() {
      if (this.checkAllFest) {
        this.festivalList.forEach(item => {
          item.isActive = !item.isActive
        })
      } else {
        this.festivalList.forEach(item => {
          item.isActive = true
        })
      }
      this.solarTermsChange()
    },
    // 是否选择节气
    handleItemSolarActive(item) {
      item.isActive = !item.isActive
      this.solarTermsChange()
    },
    // 是否选择节日
    handleItemFesActive(item) {
      item.isActive = !item.isActive
      this.solarTermsChange()
    },
    solarTermsChange() {
      this.data.solarTermsList = []
      this.festivalList.forEach(item => {
        item.isActive && this.data.solarTermsList.push(item)
      })
      this.solarTermsList.forEach(item => {
        item.isActive && this.data.solarTermsList.push(item)
      })
    },
    // tab切换
    handleTab(index) {
      this.data.index = index
      this.setSolarTerms()
    },
    // 进去下一步之前的判断
    handleStepTwo() {
      if (
        this.data.index === 0 &&
        (this.data.triggerDate === '' ||
          this.data.triggerDate === null ||
          this.data.triggerTime === '' ||
          this.data.triggerTime === null)
      ) {
        this.$message.warning('请完善改步骤后才能进入下一步')
        return false
      } else if (
        this.data.index === 1 &&
        (this.data.time_range[0] === '' ||
          this.data.time_range[1] === '' ||
          this.data.times_every === '' ||
          this.data.times_hour === '')
      ) {
        this.$message.warning('请完善改步骤后才能进入下一步')
        return false
      } else if (
        this.data.index === 2 &&
        (this.data.times_send === '' ||
          this.data.times_send === null ||
          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>
