<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="12">
          <a-form-model-item class="ant-row-flex" label="房屋位置区域" prop="treatmentProposal">
            <a-checkbox-group v-model="form.treatmentProposal">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.housePosition"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="幕墙类型" prop="treatmentProposal">
            <a-radio-group v-model="form.treatmentProposal">
              <a-radio-button
                :key="item.code"
                :value="item.code"
                v-for="item in codes.curtainWallType"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="幕墙总面积" prop="treatmentProposal">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  class="w-100-p"
                  placeholder="请输入幕墙总面积"
                  v-model="form.areaCount"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">m²</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" prop="treatmentProposal">
            <span slot="label">
              幕墙缓冲区域
              <br />及防护措施
            </span>
            <a-checkbox-group v-model="form.treatmentProposal">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.wallBuffer"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="幕墙竣工日期" prop="treatmentProposal">
            <a-date-picker class="w-100-p" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12"></a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="幕墙设计使用年限" prop="treatmentProposal">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  :step="1"
                  class="w-100-p"
                  placeholder="请输入幕墙设计使用年限"
                  v-model="form.areaCount"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">年</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="幕墙质量保修期" prop="treatmentProposal">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  :step="1"
                  class="w-100-p"
                  placeholder="请输入幕墙质量保修期"
                  v-model="form.areaCount"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">年</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="幕墙设计单位" prop="treatmentProposal">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="幕墙设计单位联系人" prop="treatmentProposal">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="幕墙设计单位电话" prop="treatmentProposal">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="幕墙施工单位" prop="treatmentProposal">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="幕墙施工单位联系人" prop="treatmentProposal">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="幕墙施工单位电话" prop="treatmentProposal">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="幕墙图纸资料存档处" prop="drawingMaterial">
            <a-checkbox-group v-model="form.drawingMaterial">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.storageOfDrawings"
              >{{ item.value }}</a-checkbox>
              <a-input
                class="w-300"
                placeholder="请输入其他图纸资料存档处"
                v-if="form.drawingMaterial && form.drawingMaterial.indexOf(codes.storageOfDrawings[codes.storageOfDrawings.length - 1].code) >= 0"
                v-model="form.drawingMaterialText"
              />
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="外立面照片" prop="facadePhoto">
            <a-upload
              :custom-request="onFileUpload"
              :file-list="form.facadePhoto"
              :preview-file="onPreviewFile"
              @change="onFileChange"
              @preview="onFilePreview"
              list-type="picture-card"
            >
              <div>
                <a-icon type="plus" />
                <div class="ant-upload-text">外立面照片</div>
              </div>
            </a-upload>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="建筑高度" prop="treatmentProposal">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  class="w-100-p"
                  placeholder="请输入建筑高度"
                  v-model="form.areaCount"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">m</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex ant-form-inline" label="结构层高">
            <a-form-model-item :colon="false" class="ant-row-flex" label="主楼" prop="landLevelCount">
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :step="1"
                    class="w-100-p"
                    placeholder="请输入主楼层高"
                    v-model="form.landLevelCount"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">m</span>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item
              :colon="false"
              class="ant-row-flex"
              label="裙房"
              prop="undergroundLevelCount"
            >
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :step="1"
                    class="w-100-p"
                    placeholder="请输入裙房层高"
                    v-model="form.undergroundLevelCount"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">m</span>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex ant-form-inline" label="幕墙高度">
            <a-form-model-item :colon="false" class="ant-row-flex" label="主楼" prop="landLevelCount">
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :step="1"
                    class="w-100-p"
                    placeholder="请输入主楼层高"
                    v-model="form.landLevelCount"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">m</span>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item
              :colon="false"
              class="ant-row-flex"
              label="裙房"
              prop="undergroundLevelCount"
            >
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :step="1"
                    class="w-100-p"
                    placeholder="请输入裙房层高"
                    v-model="form.undergroundLevelCount"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">m</span>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="幕墙与主体结构锚固件" prop="drawingMaterial">
            <a-checkbox-group v-model="form.drawingMaterial">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.structuralAnchor"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
  /* ... */
  facadePhoto: [],
};

export default {
  props: ['param'],

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

      /** 表单数据 */
      form: {},
      /** 验证格式 */
      rules: {
        /* ... */
      },

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

      /** 其他成员属性 */
      /* ... */
      codes: {
        housePosition: [],
        curtainWallType: [],
        wallBuffer: [],
        storageOfDrawings: [],
        structuralAnchor: [],
      },
    };
  },

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

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    async onFillData() {
      /** 将默认数据覆盖到form */
      const record = this.param && this.param.record,
        facadePhoto = [];

      // 从数据中的文件id转换成uploader所需的格式
      if (record) {
        const fileList = record.facadePhoto.split(',');
        for (let i = 0; i < fileList.length; i++) {
          const file = await PreviewFile(fileList[i]);
          const base64 = await BlobToBase64(file);
          facadePhoto.push({
            uid: fileList[i],
            response: fileList[i], // 用于和新上传的文件一同回传
            name: file.name,
            url: base64,
            status: 'done',
          });
        }
      }

      this.form = this.$_.cloneDeep({
        ...defaultForm,
        ...record,
        /** 在此处添加其他默认数据转换 */
        /* ... */
        facadePhoto,
      });
    },

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

    /** 当前组件的其他方法 */
    /* ... */
    onLoadCodes() {
      return this.$api
        .sysDictTypeDropDowns({
          code: [
            'dic_house_position',
            'dic_house_curtain_wall_type',
            'dic_house_wall_buffer',
            'dic_house_storage_of_drawings',
            'dic_house_structural_anchor',
          ],
        })
        .then(
          ({
            data: {
              dic_house_position,
              dic_house_curtain_wall_type,
              dic_house_wall_buffer,
              dic_house_storage_of_drawings,
              dic_house_structural_anchor,
            },
          }) => {
            this.codes = {
              housePosition: dic_house_position,
              curtainWallType: dic_house_curtain_wall_type,
              wallBuffer: dic_house_wall_buffer,
              storageOfDrawings: dic_house_storage_of_drawings,
              structuralAnchor: dic_house_structural_anchor,
            };
          }
        );
    },

    /* 上传图片相关 Begin */
    onFileChange({ fileList }) {
      this.form.facadePhoto = fileList;
    },
    onPreviewFile(file) {
      return new Promise((resolve) => {
        const base64 = BlobToBase64(file);
        resolve(base64);
      });
    },
    async onFileUpload({ file, onProgress, onSuccess, onError }) {
      onProgress();
      const fd = new FormData();
      fd.append('file', file);
      try {
        const { data: fileId } = await this.$api.sysFileInfoUpload(fd);
        onSuccess(fileId);
      } catch {
        onError();
      }
    },
    onFilePreview(file) {
      const items = [];
      for (let i = 0; i < this.form.facadePhoto.length; i++) {
        const _file = this.form.facadePhoto[i];
        const img = new Image();
        const src = _file.url || _file.thumbUrl;
        img.src = src;
        items.push({
          src,
          w: img.naturalWidth,
          h: img.naturalHeight,
        });
      }
      this.$refs['photo-swipe'].initPhotoSwipe(items, {
        index: this.form.facadePhoto.indexOf(file),
      });
    },
    /* 上传图片相关 End */
  },
};
</script>