<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">
        <!-- 表单控件 -->
        <div class="p-md">
          <a-alert message="tips：选择所属区域和类型之后，项目名称、项目序号自动生成，无需手动填写。项目备注请填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。" />
        </div>
        <a-form-model-item label="类型" prop="type">
          <a-radio-group button-style="solid" v-model="form.type" :disabled="exist">
            <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="areaCode">
          <a-cascader :field-names="{ label: 'name', value: 'code', children: 'children' }" :options="areaData" expand-trigger="hover" placeholder="请选择所属区域" v-model="form.areaCode" :display-render="displayRender" @change="formAreaCodeChange" />
        </a-form-model-item>
        <a-form-model-item label="项目名称" prop="name">
          <a-input placeholder="选择所属区域和类型之后自动生成" v-model="form.name" :disabled="true"><a-icon slot="suffix" type="lock" /></a-input>
        </a-form-model-item>
        <a-form-model-item label="序号" prop="sort">
          <a-input placeholder="选择所属区域和类型之后自动生成" v-model="form.sort" :disabled="true"><a-icon slot="suffix" type="lock" /> </a-input>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="note">
          <a-textarea :rows="4" placeholder="请输入备注,填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。" 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: {
        /* ... */
        note: [{ required: true, message: '请输入备注' }],
        name: [{ required: true, message: '请输入项目名称' }],
        sort: [{ required: true, message: '请输入排序' }],
        areaCode: [{ required: true, message: '请选择所属区域,必须选到社区' }],
        type: [{ required: true, message: '请选择类型' }],
      },

      /** 加载异步数据状态 */
      loading: false,
      /** 其他成员属性 */
      areaData: [],
      intEntity: {},
      exist: false,
      /* ... */
    };
  },
  created() {
    // 用于监视复杂表达式的函数
    this.$watch(
      // 表达式 `this.a + this.b` 每次得出一个不同的结果时
      // 处理函数都会被调用。
      // 这就像监听一个未被定义的计算属性
      () => [this.form.areaCode, this.form.type],
      (newVal, oldVal) => {
        // 做点什么
        if (this.form.areaCode.length == 4 && this.form.type) {
          if (this.intEntity.id && this.intEntity.type == this.form.type && this.intEntity.areaCode[this.intEntity.areaCode.length - 1] == this.form.areaCode[this.form.areaCode.length - 1]) {
            this.$set(this.form, 'sort', this.intEntity.sort);
            this.$set(this.form, 'name', this.intEntity.name);
          } else {
            this.loading = true;
            this.$api
              .houseProjectNextSort({ areaCode: this.form.areaCode[this.form.areaCode.length - 1], type: this.form.type })
              .then((res) => {
                this.$set(this.form, 'sort', res.data);
                this.$set(this.form, 'name', '项目' + this.toChinesNum(res.data));
              })
              .finally(() => {
                this.loading = false;
              });
          }
        } else {
          this.$set(this.form, 'sort', this.intEntity.sort);
          this.$set(this.form, 'name', this.intEntity.name);
        }
      }
    );
  },
  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    onFillData(params) {
      // 从字符串areaCode查找到整个层级
      const areaCodeDeault = params.record ? params.record.areaCode : params.pid ? params.pid : '';
      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 === areaCodeDeault) {
            areaCode.length = level + 1;
            return true;
          }

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

      if (areaCodeDeault) {
        findCode(this.areaData);
      }
      /** 将默认数据覆盖到form */
      this.form = this.$_.cloneDeep({
        ...defaultForm,
        ...params.record,
        /** 在此处添加其他默认数据转换 */
        areaCode: areaCode.length == 4 ? areaCode : [],
        /* ... */
      });
      this.intEntity = this.$_.cloneDeep({
        ...defaultForm,
        ...params.record,
        /** 在此处添加其他默认数据转换 */
        areaCode: areaCode.length == 4 ? areaCode : [],
        /* ... */
      });
      // 住宅/非住宅不可更改
      this.exist = !!params.record;
    },

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    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获取一些异步数据 */
      this.areaData = await this.onLoadAreaData();
      /* ... */
      this.loading = false;
    },

    /** 当前组件的其他方法 */
    onLoadAreaData() {
      return this.$api.getAreaTree().then((res) => {
        return res.data;
      });
    },
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
    toChinesNum(val) {
      let num = parseInt(val);
      let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
      let unit = ['', '十', '百', '千', '万'];
      let getWan = (temp) => {
        let strArr = temp.toString().split('').reverse();
        let newNum = '';
        for (var i = 0; i < strArr.length; i++) {
          newNum = (i == 0 && strArr[i] == 0 ? '' : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) + newNum;
        }
        return newNum;
      };
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) noWan = '0' + noWan;

      let chinanum = overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num);
      return chinanum;
    },
    formAreaCodeChange(val) {
      if (val.length != 4) {
        this.form.areaCode = [];
      }
    },
    /* ... */
  },
};
</script>