<template>
  <el-form :model="form" ref="form" label-width="100px" :rules="rules">
    <el-form-item label="外呼时段" required>
      <el-radio-group v-model="form.callFlag" @change="handleChangeType">
        <el-radio v-model="form.callFlag" :label="0">默认时段</el-radio>
        <el-radio v-model="form.callFlag" :label="1">自定义时段</el-radio>
      </el-radio-group>
      <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" @change="$emit('change')" />
    </el-form-item>
    <el-form-item label="外呼周期" required prop="activeTime">
      <el-date-picker value-format="timestamp" format="yyyy-MM-dd" :picker-options="pickerOptions" @blur="minTime = maxTime = null" v-model="form.activeTime" @change="handleDateChange" type="daterange" placeholder="请选择生日范围" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      <span class="tips">由于外呼线路有限，为保证外呼触达率，建议外呼时间周期不小于5天</span>
    </el-form-item>
  </el-form>
</template>

<script>
import defineTime from './defineTime.vue';
import { formatDateTimeByType } from '@/utils/index';
let minTime = null;
let maxTime = null;
export default {
  data() {
    return {
      formatDateTimeByType,
      form: {
        activeTime: '', //有效时间
        callFlag: 0, //外呼时段 0 默认 1 自定义
        callTime: [{}] // 自定义时段
      },
      pickerOptions: {
        onPick(time) {
          // 起始时间：仅半年范围内 && 结束时间：跨度最多3个月，即所选起始时间往后+90天为上限；
          if (!time.maxDate) {
            const minTimeRange = 90 * 24 * 60 * 60 * 1000; // 3个月
            const maxTimeRange = 180 * 24 * 60 * 60 * 1000; // 6个月
            minTime = time.minDate.getTime() - minTimeRange > new Date(new Date().toLocaleDateString()).getTime() ? time.minDate.getTime() - minTimeRange : new Date(new Date().toLocaleDateString()).getTime();
            maxTime = time.minDate.getTime() + minTimeRange < new Date().getTime() + maxTimeRange ? time.minDate.getTime() + minTimeRange : new Date().getTime() + maxTimeRange;
          }
        },
        disabledDate: time => {
          const maxTimeRange = 180 * 24 * 60 * 60 * 1000; // 6个月

          if (minTime && maxTime) {
            return time.getTime() < minTime || time.getTime() > maxTime;
          } else {
            return time.getTime() < new Date(new Date().toLocaleDateString()).getTime() || time.getTime() > new Date().getTime() + maxTimeRange;
          }
        }
      },
      rules: {
        activeTime: { required: true, message: '外呼周期不能为空' }
      }
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    scene: {
      type: Number,
      default: 0
    }
  },
  watch: {
    data(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(val));
      }
    },
    form(val) {
      this.$emit('change');
    }
  },
  computed: {
    activeTime() {
      let str = '';
      return str;
    }
  },
  components: {
    defineTime
  },
  methods: {
    submit() {
      return new Promise(async resolve => {
        let arr = [];
        if (this.form.callFlag == 1) {
          const res = await this.$refs.defineTime.submit();
          console.log(res);
          if (!res) return;
          res.timeRangeList.forEach(item => {
            if (Object.keys(item).length) {
              arr.push(`${item.startTime}-${item.endTime}`);
            }
          });
        }
        this.$refs.form.validate(val => {
          console.log(val);
          if (val) {
            const { callFlag, callTime, activeTime } = this.form;
            const obj = {
              startDate: activeTime[0],
              endDate: activeTime[1],
              callFlag,
              callTime
            };
            if (callFlag == 1) {
              obj.callTime = arr;
            }
            resolve(obj);
          } else {
            this.scrollToError(this);
            resolve(false);
          }
        });
      });
    },
    handleChangeType() {
      this.form = Object.assign({}, this.form);
    },
    handleDateChange(val) {
      if (!val) {
        minTime = maxTime = null;
      }
      this.form = Object.assign({}, this.form);
    }
  }
};
</script>

<style></style>
