<template>
  <!-- 
    普通编辑窗体
    v 1.2
    2021-04-30
    Lufthafen
  -->
  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
    <a-spin :spinning="loading">
      <a-icon slot="indicator" spin type="loading" />
      <div class="yo-form-group">
        <!-- 表单控件 -->
        <!-- ... -->
        <a-form-model-item label="区域类型" prop="levelType">
          <a-select :disabled="exist" placeholder="请选择区域类型" v-model="form.levelType">
            <a-select-option
              :key="i"
              :value="item.code"
              v-for="(item, i) in levelType"
            >{{ item.value }}</a-select-option>
            <a-icon slot="suffixIcon" type="lock" v-if="exist" />
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="区域名称" prop="name">
          <a-input placeholder="请输入区域名称" v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item prop="code">
          <span slot="label">
            区域编码
            <a-tooltip title="用于系统内部使用，添加后不可更改">
              <a-icon theme="twoTone" type="info-circle" />
            </a-tooltip>
          </span>
          <a-input :disabled="exist" placeholder="请输入区域编码" v-model="form.code">
            <a-icon slot="suffix" type="lock" v-if="exist" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="adCode">
          <span slot="label">
            行政编码
            <a-tooltip title="国家规定的区划代码，可随实际情况更改而更改">
              <a-icon theme="twoTone" type="info-circle" />
            </a-tooltip>
          </span>
          <a-input placeholder="请输入行政编码" v-model="form.adCode" />
        </a-form-model-item>
        <a-form-model-item label="排序" prop="sort">
          <a-input-number :min="0" class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="note">
          <a-textarea :rows="4" placeholder="请输入备注" v-model="form.note"></a-textarea>
        </a-form-model-item>
      </div>
    </a-spin>
  </a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
  /* ... */
};

export default {
  data() {
    return {
      /** 表单数据 */
      form: {},
      /** 验证格式 */
      rules: {
        /* ... */
        levelType: [{ required: true, message: '请选择参数类型' }],
        name: [{ required: true, message: '请输入参数名称' }],
        adCode: [{ required: true, message: '请输入参数编码' }],
        code: [{ required: true, message: '请输入显示编码' }],
      },

      /** 加载异步数据状态 */
      loading: false,

      /** 其他成员属性 */
      /* ... */
      exist: false,
      levelType: [],
    };
  },

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    onFillData(params) {
      /** 将默认数据覆盖到form */
      this.form = this.$_.cloneDeep({
        ...defaultForm,
        ...params.record,
        /** 在此处添加其他默认数据转换 */
        /* ... */
        levelType: params.record && params.record.levelType.toString(),
      });

      // 编码不可更改
      this.exist = !!params.record;
    },

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

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

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

    /**
     * 必要的方法
     * 在外部窗口进行保存时调用表单验证
     */
    onValidate(callback) {
      this.$refs.form.validate(callback);
    },

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

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

    /**
     * 必要方法
     * 加载当前表单中所需要的异步数据
     */
    async onInit(params) {
      this.loading = true;
      /** 可以在这里await获取一些异步数据 */
      /* ... */
      this.levelType = await this.onLoadlevelTypeData();
      this.loading = false;
    },

    /** 当前组件的其他方法 */
    /* ... */
    onLoadlevelTypeData() {
      return this.$api.sysDictTypeDropDown({ code: 'dic_areacode_type' }).then(({ data }) => {
        return data;
      });
    },
  },
};
</script>