<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :confirm-loading="loading"
    title="下载报告"
    :body-style="{ paddingBottom: '8px' }"
    :visible="showDownloadModal"
    okText="下载"
    @ok="save"
    @cancel="cancel"
  >
    <a-form
      layout="horizontal"
      :form="form"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
      <a-form-item>
        <a-checkbox v-model="isFilterByTime">
          筛选时间
        </a-checkbox>
      </a-form-item>

      <a-form-item v-if="isFilterByTime">
        <KDatePicker
          :record="record"
          :parentDisabled="false"
          v-decorator="[
            record.model, // input 的 name
            {
              initialValue: record.options.range ? record.options.rangeDefaultValue : record.options.defaultValue, // 默认值
              rules: record.rules // 验证规则
            }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from 'moment'
import KDatePicker from '../../components/k-form-design/packages/KDatePicker'

export default {
  name: 'TeDetailPageAdd',
  props: {
    // 弹窗是否打开
    showDownloadModal: Boolean,
    record: {
      type: Object,
      default: () => ({
        type: 'date',
        label: '日期选择框',
        options: {
          width: '100%',
          defaultValue: '',
          range: true,
          showTime: { format: 'HH:mm', defaultValue: [moment('00:00', 'HH:mm'), moment('00:00', 'HH:mm')] },
          disabled: false,
          hidden: false,
          clearable: true,
          placeholder: '选择日期时间',
          format: 'YYYY-MM-DD HH:mm'
        },
        model: 'downloadTime',
        key: 'date_1655275578666',
        rules: [{ required: true, message: '请选择开始时间和结束时间' }]
      })
    }
  },
  components: {
    KDatePicker
  },
  data() {
    return {
      // 提交状态
      loading: false,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      isFilterByTime: false
    }
  },
  watch: {},
  methods: {
    /**
     * 保存和编辑
     *
     * @author zs
     * @date 2021/09/02 18:35
     */
    async save() {
      // 校验表单
      this.form.validateFields(async err => {
        if (!err) {
          try {
            if (this.isFilterByTime) {
              const formObj = this.form.getFieldsValue()
              console.log(formObj)
              this.$emit('changeDownloadModalStatus', formObj.downloadTime ? formObj.downloadTime : [])
            }
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    cancel() {
      this.$emit('changeDownloadModalStatus')
    },

  }
}
</script>
