<template>
  <el-form :model="form" ref="form" label-width="100px" :rules="rules">
    <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>
      <el-date-picker value-format="timestamp" format="MM-dd" v-model="form.activeTime" @change="handleDateChange" type="daterange" placeholder="请选择生日范围" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
import defineTime from './defineTime.vue';
import { formatDateTimeByType } from '@/utils/index';

export default {
  data() {
    return {
      formatDateTimeByType,
      form: {
        activeTime: '', //有效时间
        callFlag: 0, //外呼时段 0 默认 1 自定义
        callTime: [{}] // 自定义时段
      },
      rules: {}
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    data(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(val));
      }
    }
  },
  computed: {
    activeTime() {
      let str = '';
      return str;
    }
  },
  components: {
    defineTime
  },
  methods: {
    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, activeTime } = this.form;
            const obj = {
              startDate: activeTime[0],
              endDate: activeTime[1],
              callFlag,
              callTime
            };
            if (arr.length) {
              obj.callTime = arr;
            }
            resolve(obj);
          } else {
            resolve(false);
          }
        });
      });
    }
  }
};
</script>

<style></style>
