<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="areaCode">
          <a-cascader
            :field-names="{ label: 'name', value: 'code', children: 'children' }"
            :options="areaData"
            @change="onAreaCodeChange"
            expand-trigger="hover"
            placeholder="请选择所属区域"
            v-model="form.areaCode"
          />
        </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 label="排序" prop="sort">
          <a-input-number
            :max="1000"
            :min="0"
            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 { numberToChinese } from '@/util/format';

/* 表单内容默认值 */
const defaultForm = {
  /* ... */
  pid: undefined,
  sort: 100,
};

export default {
  data() {
    return {
      /** 表单数据 */
      form: {},
      /** 验证格式 */
      rules: {
        name: [{ required: true, message: '请输入片区名称', trigger: 'blur' }],
        areaCode: [{ required: true, message: '请选择所属区域' }],
        /* ... */
      },

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

      codes: {
        type: [],
      },

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

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    onFillData(params) {
      // 从字符串areaCode查找到整个层级
      const areaCode = [];
      const findCode = (data, level) => {
        level = level || 0;
        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          areaCode[level] = item.code;

          if (item.code === params.record.areaCode) {
            areaCode.length = level + 1;
            return true;
          }

          if (item.children && item.children.length) {
            const found = findCode(item.children, level + 1);
            if (found) {
              return true;
            }
          }
        }
      };

      if (params.record && params.record.areaCode) {
        findCode(this.areaData);
      }

      /** 将默认数据覆盖到form */
      this.form = this.$_.cloneDeep({
        ...defaultForm,
        pid: params.orgId,
        ...params.record,
        /** 在此处添加其他默认数据转换 */
        /* ... */
        areaCode,
      });
    },

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    onGetData() {
      return new Promise((reslove, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const record = this.$_.cloneDeep(this.form);
            record.areaCode = record.areaCode[record.areaCode.length - 1];
            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
            /* ... */

            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获取一些异步数据 */
      await this.onLoadCodes();
      await this.onLoadAreaData();
      /* ... */
      this.loading = false;
    },

    /** 当前组件的其他方法 */
    /* ... */
    onLoadCodes() {
      this.$api
        .$queue([
          this.$api.sysDictTypeDropDownAwait({ code: 'org_type' }),
          /* ... */
        ])
        .then(([org_type]) => {
          this.codes.type = org_type.data;
          /* ... */
        });
    },
    onLoadAreaData() {
      return this.$api.getAreaTree({ level: 3 }).then(({ data }) => {
        // 为了防止出现空的层级选择,删除所有空children节点
        const clearChiildren = (data) => {
          data.forEach((item) => {
            if (item.children && item.children.length) {
              clearChiildren(item.children);
            } else {
              delete item.children;
            }
          });
        };
        clearChiildren(data);
        this.areaData = data;
      });
    },
    onAreaCodeChange(value) {
      this.loading = true;
      this.$api
        .houseZoneAutoIncrement({ code: value[value.length - 1] })
        .then(({ data }) => {
          this.$set(this.form, 'name', `片区${numberToChinese(data)}`);
        })
        .catch(() => {
          this.form.areaCode = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>