<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="24">
          <a-form-model-item class="ant-row-flex" label="产权性质" prop="houseInfo.propertyRights">
            <a-radio-group button-style="solid" v-model="form.houseInfo.propertyRights">
              <a-radio-button
                :key="item.code"
                :value="item.code"
                v-for="item in codes.housePropertyRights"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex ant-form-inline" label="房屋包含的住宅总套数">
            <section>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="直管公房"
                prop="houseInfo.straightHouseCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.straightHouseCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="单位自管公房"
                prop="houseInfo.selfHouseCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.selfHouseCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item :colon="false" class="ant-row-flex" label="其他" props="otherCount">
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.otherCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </section>
            <section>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="商品房"
                prop="houseInfo.businessCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.businessCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="房改房"
                prop="houseInfo.changeHouseCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.changeHouseCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="拆迁安置房"
                prop="houseInfo.resettlementHouseCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.resettlementHouseCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </section>
            <section>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="私房"
                prop="houseInfo.privateHouseCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.privateHouseCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item
                :colon="false"
                class="ant-row-flex"
                label="总共"
                prop="houseInfo.houseCount"
              >
                <a-row type="flex">
                  <a-col flex="1">
                    <a-input-number
                      :min="0"
                      :step="1"
                      disabled
                      placeholder="几"
                      v-model="form.houseInfo.houseCount"
                    />
                  </a-col>
                  <a-col>
                    <span class="yo-addon">套</span>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </section>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="产权单位" prop="houseInfo.propertyUnit">
            <a-input placeholder="请输入产权单位" v-model="form.houseInfo.propertyUnit" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="负责人" prop="houseInfo.propertyUnitUser">
            <a-input placeholder="请输入负责人" v-model="form.houseInfo.propertyUnitUser" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            class="ant-row-flex"
            label="负责人电话"
            prop="houseInfo.propertyUnitUserTel"
          >
            <a-input placeholder="请输入负责人电话" v-model="form.houseInfo.propertyUnitUserTel" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="联系人" prop="houseInfo.propertyUnitConent">
            <a-input placeholder="请输入联系人" v-model="form.houseInfo.propertyUnitConent" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            class="ant-row-flex"
            label="联系人电话"
            prop="houseInfo.propertyUnitConentTel"
          >
            <a-input placeholder="请输入联系人电话" v-model="form.houseInfo.propertyUnitConentTel" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
  /* ... */
  houseInfo: {
    propertyRights: null,
    straightHouseCount: 0,
    selfHouseCount: 0,
    otherCount: 0,
    businessCount: 0,
    changeHouseCount: 0,
    resettlementHouseCount: 0,
    privateHouseCount: 0,
    houseCount: 0,
    propertyUnit: null,
    propertyUnitUser: null,
    propertyUnitUserTel: null,
    propertyUnitConent: null,
    propertyUnitConentTel: null,
  },
};

export default {
  props: ['param'],

  data() {
    return {
      labelCol: { flex: '150px' },
      wrapperCol: { flex: '1' },

      /** 表单数据 */
      form: {
        ...defaultForm,
      },
      /** 验证格式 */
      rules: {
        /* ... */
        'houseInfo.propertyRights': [{ required: true, message: '请选择产权性质' }],
        'houseInfo.straightHouseCount': [{ required: true, message: '请输入直管公房' }],
        'houseInfo.selfHouseCount': [{ required: true, message: '请输入单位自管公房' }],
        'houseInfo.otherCount': [{ required: true, message: '请输入其他' }],
        'houseInfo.businessCount': [{ required: true, message: '请输入商品房' }],
        'houseInfo.changeHouseCount': [{ required: true, message: '请输入房改房' }],
        'houseInfo.resettlementHouseCount': [{ required: true, message: '请输入拆迁安置房' }],
      },

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

      /** 其他成员属性 */
      /* ... */
      codes: {
        housePropertyRights: [],
      },
    };
  },
  watch: {
    'form.houseInfo.straightHouseCount'(value) {
      this.houseCountCal();
    },
    'form.houseInfo.selfHouseCount'(value) {
      this.houseCountCal();
    },
    'form.houseInfo.otherCount'(value) {
      this.houseCountCal();
    },
    'form.houseInfo.businessCount'(value) {
      this.houseCountCal();
    },
    'form.houseInfo.changeHouseCount'(value) {
      this.houseCountCal();
    },
    'form.houseInfo.resettlementHouseCount'(value) {
      this.houseCountCal();
    },
    'form.houseInfo.privateHouseCount'(value) {
      this.houseCountCal();
    },
  },
  async created() {
    this.onFillData();
  },

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    async onFillData() {
      this.loading = true;
      {
        await this.onLoadCodes();

        /** 将默认数据覆盖到form */
        const record = this.param && this.param.record;
        const form = this.$_.cloneDeep(defaultForm);

        if (record) {
          this.$_.giveDeep(form, record);
        }

        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);
    },

    /** 当前组件的其他方法 */
    /* ... */
    onLoadCodes() {
      return this.$api
        .sysDictTypeDropDowns({
          code: ['dic_house_property_rights'],
        })
        .then(({ data: { dic_house_property_rights } }) => {
          this.codes = {
            housePropertyRights: dic_house_property_rights,
          };
        });
    },
    houseCountCal() {
      this.form.houseInfo.houseCount =
        this.form.houseInfo.straightHouseCount +
        this.form.houseInfo.selfHouseCount +
        this.form.houseInfo.otherCount +
        this.form.houseInfo.businessCount +
        this.form.houseInfo.changeHouseCount +
        this.form.houseInfo.resettlementHouseCount +
        this.form.houseInfo.privateHouseCount;
    },
  },
};
</script>