<template>
  <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="name">
          <a-input placeholder="请输入类型名称" v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="类型" prop="type">
          <a-radio-group v-model="form.type">
            <a-radio-button :value="1">目录</a-radio-button>
            <a-radio-button :value="2">字典类型</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="父结点" prop="pid">
          <a-tree-select
            :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
            :tree-data="dicTree"
            placeholder="请选择父结点"
            tree-default-expand-all
            v-model="form.pid"
          />
        </a-form-model-item>
        <a-form-model-item label="唯一编码" prop="code" v-if="form.type == 2">
          <a-input placeholder="请输入唯一编码" v-model="form.code" />
        </a-form-model-item>
        <a-form-model-item label="排序" prop="sort">
          <a-input-number class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea placeholder="请输入备注" v-model="form.remark" />
        </a-form-model-item>
      </div>
    </a-spin>
  </a-form-model>
</template>
<script>
import { EMPTY_ID } from '@/util/global';

const defaultForm = {
  type: 1,
  sort: 100,
};

export default {
  data() {
    return {
      /** 表单数据 */
      form: {},
      /** 验证格式 */
      rules: {
        name: [{ required: true, message: '请输入类型名称' }],
        type: [{ required: true, message: '请选择需要添加的数据类型' }],
        pid: [{ required: true, message: '请选择父结点' }],
        code: [{ required: true, message: '请输入唯一编码' }],
      },

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

      /** 其他成员属性 */
      /** ... */
      dicTree: [],
    };
  },

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

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    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() {
      this.loading = true;
      /** 可以在这里await获取一些异步数据 */
      /** ...BEGIN */
      await this.onLoadDicTreeData();
      /** ...END */
      this.loading = false;
    },

    /** 当前组件的其他方法 */
    /** ... */
    onLoadDicTreeData() {
      return this.$api.sysDictTypeTree().then(({ data }) => {
        this.dicTree = [
          {
            id: EMPTY_ID,
            parentId: undefined,
            title: '顶级',
            value: EMPTY_ID,
            pid: undefined,
            children: data,
          },
        ];
      });
    },
  },
};
</script>