<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.houseSite">
            <a-checkbox-group v-model="form.houseInfo.houseSite">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseHouseSite"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            class="ant-row-flex"
            label="相邻施工"
            prop="houseInfo.adjacentConstruction"
          >
            <a-checkbox-group v-model="form.houseInfo.adjacentConstruction">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseAdjacentConstruction"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="化学侵蚀" prop="houseInfo.chemicalErosion">
            <a-checkbox-group v-model="form.houseInfo.chemicalErosion">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseChemicalErosion"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            class="ant-row-flex"
            label="结构拆改"
            prop="houseInfo.structuralDismantling"
          >
            <a-radio-group button-style="solid" v-model="form.houseInfo.structuralDismantling">
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.houseStructuralDismantling"
              >{{ 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" label="加层改造" prop="houseInfo.addingLayer">
            <a-radio-group button-style="solid" v-model="form.houseInfo.addingLayer">
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.houseAddingLayer"
              >{{ 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" label="修缮加固" prop="houseInfo.repairAndReinforce">
            <a-checkbox-group v-model="form.houseInfo.repairAndReinforce">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseRepairAndReinforce"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="历史灾害" prop="houseInfo.historicalCalamity">
            <a-checkbox-group v-model="form.houseInfo.historicalCalamity">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseHistoricalCalamity"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="使用功能变更" prop="houseInfo.functionalChange">
            <a-checkbox-group v-model="form.houseInfo.functionalChange">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseFunctionalChange"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="其他调查内容" prop="houseInfo.otherContents">
            <a-textarea auto-size placeholder="请输入其他调查内容" v-model="form.houseInfo.otherContents" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
  /* ... */
  houseInfo: {
    houseSite: ['1'],
    adjacentConstruction: ['0'],
    chemicalErosion: ['0'],
    structuralDismantling: '0',
    addingLayer: '0',
    repairAndReinforce: ['0'],
    historicalCalamity: ['0'],
    functionalChange: ['0'],
    otherContents: null,
  },
};

export default {
  props: ['param'],

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

      /** 表单数据 */
      form: {
        ...defaultForm,
      },
      /** 验证格式 */
      rules: {
        /* ... */
        'houseInfo.houseSite': [{ required: true, message: '请选择房屋场地' }],
        'houseInfo.adjacentConstruction': [{ required: true, message: '请选择相邻施工' }],
        'houseInfo.chemicalErosion': [{ required: true, message: '请选择化学侵蚀' }],
        'houseInfo.structuralDismantling': [{ required: true, message: '请选择结构拆改' }],
        'houseInfo.addingLayer': [{ required: true, message: '请选择加层改造' }],
        'houseInfo.repairAndReinforce': [{ required: true, message: '请选择修缮加固' }],
        'houseInfo.historicalCalamity': [{ required: true, message: '请选择历史灾害' }],
        'houseInfo.functionalChange': [{ required: true, message: '请选择使用功能变更' }],
      },

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

      /** 其他成员属性 */
      /* ... */
      codes: {
        houseHouseSite: [],
        houseAdjacentConstruction: [],
        houseChemicalErosion: [],
        houseStructuralDismantling: [],
        houseAddingLayer: [],
        houseRepairAndReinforce: [],
        houseHistoricalCalamity: [],
        houseFunctionalChange: [],
      },
    };
  },

  watch: {
    'form.houseInfo.adjacentConstruction'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'adjacentConstruction');
    },
    'form.houseInfo.chemicalErosion'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'chemicalErosion');
    },
    'form.houseInfo.repairAndReinforce'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'repairAndReinforce');
    },
    'form.houseInfo.historicalCalamity'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'historicalCalamity');
    },
    'form.houseInfo.functionalChange'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'functionalChange');
    },
  },

  async created() {
    this.onFillData();
  },

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

        /** 将默认数据覆盖到form */
        const record = this.param && this.param.record;
        record.houseInfo.houseSite = record.houseInfo.houseSite.split(',');
        record.houseInfo.adjacentConstruction = record.houseInfo.adjacentConstruction.split(',');
        record.houseInfo.chemicalErosion = record.houseInfo.chemicalErosion.split(',');
        record.houseInfo.repairAndReinforce = record.houseInfo.repairAndReinforce.split(',');
        record.houseInfo.historicalCalamity = record.houseInfo.historicalCalamity.split(',');
        record.houseInfo.functionalChange = record.houseInfo.functionalChange.split(',');

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

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
            record.houseInfo.houseSite = this.form.houseInfo.houseSite.join(',');
            record.houseInfo.adjacentConstruction = this.form.houseInfo.adjacentConstruction.join(',');
            record.houseInfo.chemicalErosion = this.form.houseInfo.chemicalErosion.join(',');
            record.houseInfo.repairAndReinforce = this.form.houseInfo.repairAndReinforce.join(',');
            record.houseInfo.historicalCalamity = this.form.houseInfo.historicalCalamity.join(',');
            record.houseInfo.functionalChange = this.form.houseInfo.functionalChange.join(',');
            /* ... */

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

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

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

    /** 当前组件的其他方法 */
    /* ... */
    onLoadCodes() {
      return this.$api
        .sysDictTypeDropDowns({
          code: [
            'dic_house_house_site',
            'dic_house_adjacent_construction',
            'dic_house_chemical_erosion',
            'dic_house_structural_dismantling',
            'dic_house_adding_layer',
            'dic_house_repair_and_reinforce',
            'dic_house_historical_calamity',
            'dic_house_functional_change',
          ],
        })
        .then(
          ({
            data: {
              dic_house_house_site,
              dic_house_adjacent_construction,
              dic_house_chemical_erosion,
              dic_house_structural_dismantling,
              dic_house_adding_layer,
              dic_house_repair_and_reinforce,
              dic_house_historical_calamity,
              dic_house_functional_change,
            },
          }) => {
            this.codes = {
              houseHouseSite: dic_house_house_site,
              houseAdjacentConstruction: dic_house_adjacent_construction,
              houseChemicalErosion: dic_house_chemical_erosion,
              houseStructuralDismantling: dic_house_structural_dismantling,
              houseAddingLayer: dic_house_adding_layer,
              houseRepairAndReinforce: dic_house_repair_and_reinforce,
              houseHistoricalCalamity: dic_house_historical_calamity,
              houseFunctionalChange: dic_house_functional_change,
            };
          }
        );
    },

    onCheckedNone(value, oldValue, key) {
      // 选中"无"时全不选,反之取消选择"无"
      if (value.indexOf('0') >= 0 && (!oldValue || oldValue.indexOf('0') === -1)) {
        this.form.houseInfo[key] = ['0'];
      } else if (value.indexOf('0') >= 0 && value.length > 1) {
        this.form.houseInfo[key].splice(value.indexOf('0'), 1);
      }
    },
  },
};
</script>