<template>
  <el-form :model="form" ref="form" label-width="100px" :rules="rules">
    <el-form-item label="节日名称" prop="holiday_type" required>
      <el-radio v-model="form.holiday_type" :label="1">推荐节日</el-radio>
      <el-radio v-model="form.holiday_type" :label="2">自定义节日</el-radio>
      <span class="tips">为保证触达率，节日活动需要提前创建，不支持创建节日日期为活动创建日的活动</span>
      <div>
        <el-tag type="mini">{{ form.holiday_name }}</el-tag>
        <el-button type="text" v-show="form.holiday_type == 1" @click="visible = true">选择节日</el-button>
      </div>
    </el-form-item>
    <el-form-item label="节日日期" prop="holiday_date" required>
      <span class="tips" v-if="!form.holiday_date">未选择节日</span>
      <span v-else>{{ form.holiday_date }}</span>
    </el-form-item>
    <el-form-item label="外呼时间" prop="holiday_day" required>
      节日前
      <el-input-number class="w100" style="margin:0 5px;" v-model="form.holiday_day" controls-position="right" :max="30" :min="1" size="small" />
      天内外呼完成
      <span class="tips">由于外呼线路有限，为保证外呼触达率，建议外呼时间周期不小于5</span>
    </el-form-item>
    <el-form-item label="外呼时段" required>
      <el-radio v-model="form.callFlag" :label="0">默认时段</el-radio>
      <el-radio v-model="form.callFlag" :label="1">自定义时段</el-radio>
      <div v-show="form.callFlag == 0" style="line-height: 20px;">
        每天 09:00-20:00
      </div>
      <defineTime v-show="form.callFlag == 1" ref="defineTime" :data="form.callTime" />
    </el-form-item>
    <el-form-item label="活动有效期" required>
      <span v-if="!activeTime" class="tips" style="font-size: 14px;margin:0">设置【节日日期】和【外呼时间】后自动生成</span>
      <span v-else>{{ activeTime }}</span>
    </el-form-item>
    <el-dialog title="选择节日" :visible.sync="visible" width="700px" :before-close="close">
      <div class="tips">
        仅支持选择节日日期为最近1-60天内的节日
      </div>
      <div class="holiday" v-for="item in holidayData" :key="item.id">
        <dm-sub-title>{{ item.id }}级 </dm-sub-title>
        <div class="radioLine">
          <el-radio v-model="selectedData" :label="val" v-for="val in item.holidaysList" :key="val.id">{{ val.name }}</el-radio>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="addItem">确定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import defineTime from './defineTime.vue';
import { formatDateTimeByType, getTimesByReq } from '@/utils/index';
import { listAllHolidays } from '@/service/api/aiApi.js';

export default {
  data() {
    return {
      formatDateTimeByType,
      getTimesByReq,
      form: {
        holiday_type: 1, //  节日活动场景特有值 节日类型 1推荐 2自定义
        holiday_name: '国庆节', // 节日活动场景特有值 节日名称
        holiday_date: '2022-10-01', //节日活动场景特有值 节日日期
        holiday_day: '', // 外呼时间
        callFlag: 0, //外呼时段 0 默认 1 自定义
        callTime: [{}] // 自定义时段
      },
      rules: {},
      holidayData: [
        {
          id: 'S', //节日分类ID
          name: '', //节日分类名称
          holidaysList: [
            {
              id: '1', // 节日配置ID
              name: '妇女节', //节日配置名称
              date: '2020-03-08' //节日配置日期
            },
            {
              id: '2', // 节日配置ID
              name: '618', //节日配置名称
              date: '2020-06-18' //节日配置日期
            },
            {
              id: '3', // 节日配置ID
              name: '端午节端午节端午', //节日配置名称
              date: '2020-10-01' //节日配置日期
            }
          ]
        },
        {
          id: 'A', //节日分类ID
          name: '', //节日分类名称
          holidaysList: [
            {
              id: '4', // 节日配置ID
              name: '端午节', //节日配置名称
              date: '2020-05-05' //节日配置日期
            },
            {
              id: '5', // 节日配置ID
              name: '中秋节', //节日配置名称
              date: '2020-07-15' //节日配置日期
            },
            {
              id: '6', // 节日配置ID
              name: '愚人节', //节日配置名称
              date: '2020-04-01' //节日配置日期
            }
          ]
        },
        {
          id: 'B', //节日分类ID
          name: '', //节日分类名称
          holidaysList: [
            {
              id: '7', // 节日配置ID
              name: '元宵节', //节日配置名称
              date: '2020-01-01' //节日配置日期
            }
          ]
        }
      ],
      selectedData: '',
      visible: false
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.getListAllHolidays();
  },
  watch: {
    data(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(val));
        this.handleHolidayDay();
      }
    }
  },
  computed: {
    activeTime() {
      let str = '';
      if (this.form.holiday_date && this.form.holiday_day) {
        let startTimestamp = getTimesByReq(this.form.holiday_date) - this.form.holiday_day * 24 * 60 * 60 * 1000;
        let endTimestamp = getTimesByReq(this.form.holiday_date) - 24 * 60 * 60 * 1000;
        str = formatDateTimeByType(startTimestamp, 'yyyy-MM-dd') + ' 至 ' + formatDateTimeByType(endTimestamp, 'yyyy-MM-dd');
      }
      return str;
    }
  },
  components: {
    defineTime
  },
  methods: {
    handleHolidayDay() {
      // 回显时 根据活动有效期和节日日期 算出外呼时间
      this.form.holiday_day = ((getTimesByReq(this.form.holiday_date) - this.form.startDate) / 24) * 60 * 60 * 1000;
    },

    async getListAllHolidays() {
      const { result } = await listAllHolidays();
      console.log(result);
      if (result) {
        // this.holidayData = result;
      }
    },
    addItem() {
      if (!this.selectedData) {
        this.$message({ type: 'warning', message: '未选择节日' });
        return;
      }
      const { date, name } = this.selectedData;
      this.form.holiday_name = name;
      this.form.holiday_date = date;
      this.close();
    },
    close() {
      this.selectedData = '';
      this.visible = false;
    },
    submit() {
      return new Promise(async resolve => {
        const res = await this.$refs.defineTime.submit();
        let arr = [];
        if (!res) return;
        res.timeRangeList.forEach(item => {
          if (Object.keys(item).length) {
            arr.push(`${item.startTime}-${item.endTime}`);
          }
        });
        this.$refs.form.validate(val => {
          if (val) {
            const { callFlag, callTime, holiday_date, holiday_type, holiday_name, holiday_day } = this.form;
            const obj = {
              startDate: getTimesByReq(holiday_date) - holiday_day * 24 * 60 * 60 * 1000,
              endDate: getTimesByReq(holiday_date) - 24 * 60 * 60 * 1000,
              callFlag,
              callTime,
              holiday_date,
              holiday_type,
              holiday_name
            };
            console.log(obj);
            if (arr.length) {
              obj.callTime = arr;
            }
            resolve(obj);
          } else {
            resolve(false);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tips {
  font-size: 12px;
  font-weight: 400;
  color: #909399;
  line-height: 17px;
  margin-left: 20px;
}
.radioLine {
  padding: 12px 0 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  .el-radio {
    margin: 0;
  }
}
</style>
