<template>
  <!-- 
    整页表单的分片表单
    v 1.0
    2021-05-12
    Lufthafen
  -->
  <a-form-model
    :label-col="labelCol"
    :model="form"
    :rules="rules"
    :wrapper-col="wrapperCol"
    ref="form"
  >
    <a-spin :spinning="loading">
      <a-icon slot="indicator" spin type="loading" />
      <a-row :gutter="16" type="flex">
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="巡查日期" prop="patrolInfo.patrolDate">
            <a-date-picker
              class="w-100-p"
              placeholder="请选择巡查日期"
              v-model="form.patrolInfo.patrolDate"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="巡查人/单位" prop="patrolInfo.patrolUser">
            <a-input placeholder="请输入巡查人/单位" v-model="form.patrolInfo.patrolUser" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
  patrolInfo: {
    patrolDate: null,
    patrolUser: null,
  },
};
export default {
  props: ['param', 'frame'],
  data() {
    return {
      labelCol: { flex: '150px' },
      wrapperCol: { flex: '1' },

      /** 表单数据 */
      form: {
        ...defaultForm,
      },
      /** 验证格式 */
      rules: {
        /* ... */
        'patrolInfo.patrolDate': [{ required: true, message: '请选择巡查日期', trigger: 'blur' }],
        'patrolInfo.patrolUser': [{ required: true, message: '请输入巡查人/单位', trigger: 'blur' }],
      },
      /** 加载异步数据状态 */
      loading: false,

      /** 其他成员属性 */
      codes: {},
    };
  },

  async created() {
    this.onFillData();
  },

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    async onFillData() {
      this.loading = true;
      {
        /** 将默认数据覆盖到form */
        const record = this.param && this.param.record;

        const form = this.$_.cloneDeep(defaultForm);

        if (record) {
          // 此处因业务复杂, 所有数据必定包裹在单独节点中, 所以需要两层循环
          Object.keys(form).forEach((p) => {
            if (record.hasOwnProperty(p) && record[p]) {
              const _form = form[p],
                _record = record[p];
              Object.keys(form[p]).forEach((q) => {
                if (_record.hasOwnProperty(q) && (_record[q] !== null) & (_record[q] !== undefined)) {
                  _form[q] = _record[q];
                }
              });
            }
          });
        }
        this.form = form;
      }
      this.loading = false;
    },

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    onGetData() {
      return new Promise((reslove, reject) => {
        this.$refs.form.validate((valid, err) => {
          if (valid) {
            const record = this.$_.cloneDeep(this.form);

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
            /* ... */

            reslove(record);
          } else {
            reject(err);
          }
        });
      });
    },

    /**
     * 必要的方法
     * 在外部窗口关闭或重置时对表单验证进行初始化
     */
    onResetFields() {
      setTimeout(() => {
        this.$refs.form.resetFields();

        /** 在这里可以初始化当前组件中其他属性 */
        /* ... */
      }, 300);
    },

    /** 当前组件的其他方法 */
    /* ... */
  },
};
</script>
