<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="projectName">
            <a-input placeholder="请输入检查单位（人）" v-model="form.projectName" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="检查日期" prop="projectName">
            <a-date-picker class="w-100-p" placeholder="请选择检查日期" v-model="form.projectName" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" prop="projectName">
            <span slot="label">
              是否发生过使用
              <br />安全问题
            </span>
            <a-row :gutter="16" type="flex">
              <a-col>
                <a-switch v-model="form.exteriorWallTile" />
              </a-col>
              <a-col flex="1">
                <a-textarea auto-size placeholder="请输入安全问题备注" />
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="是否有日常维护" prop="projectName">
            <a-row :gutter="16" type="flex">
              <a-col>
                <a-switch v-model="form.exteriorWallTile" />
              </a-col>
              <a-col flex="1">
                <a-textarea auto-size placeholder="请输入日常维护备注" />
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="是否存在安全隐患" prop="projectName">
            <a-row :gutter="16" type="flex">
              <a-col>
                <a-switch v-model="form.exteriorWallTile" />
              </a-col>
              <a-col flex="1">
                <a-textarea auto-size placeholder="请输入安全隐患备注" />
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <fieldset>
            <legend>检查情况</legend>
            <a-form-model-item class="ant-row-flex" label="雨水渗漏情况" prop="projectName">
              <a-row :gutter="16" type="flex">
                <a-col :span="12">
                  <a-textarea auto-size placeholder="请输入安全隐患备注" />
                </a-col>
                <a-col :span="12">
                  <a-upload
                    :custom-request="onFileUpload"
                    :file-list="form.anEntryDocument"
                    :showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
                    @change="(data) => onFileChange(data, 'anEntryDocument')"
                    @download="onFileDownload"
                  >
                    <a-button icon="upload" type="dashed">上传立项文件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item class="ant-row-flex" label="面砖空鼓、脱落情况" prop="projectName">
              <a-row :gutter="16" type="flex">
                <a-col :span="12">
                  <a-textarea auto-size placeholder="请输入安全隐患备注" />
                </a-col>
                <a-col :span="12">
                  <a-upload
                    :custom-request="onFileUpload"
                    :file-list="form.anEntryDocument"
                    :showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
                    @change="(data) => onFileChange(data, 'anEntryDocument')"
                    @download="onFileDownload"
                  >
                    <a-button icon="upload" type="dashed">上传立项文件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item class="ant-row-flex" prop="projectName">
              <span slot="label">
                装饰保温层空鼓、
                <br />脱落情况
              </span>
              <a-row :gutter="16" type="flex">
                <a-col :span="12">
                  <a-textarea auto-size placeholder="请输入安全隐患备注" />
                </a-col>
                <a-col :span="12">
                  <a-upload
                    :custom-request="onFileUpload"
                    :file-list="form.anEntryDocument"
                    :showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
                    @change="(data) => onFileChange(data, 'anEntryDocument')"
                    @download="onFileDownload"
                  >
                    <a-button icon="upload" type="dashed">上传立项文件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item class="ant-row-flex" label="其他情况" prop="projectName">
              <a-row :gutter="16" type="flex">
                <a-col :span="12">
                  <a-textarea auto-size placeholder="请输入安全隐患备注" />
                </a-col>
                <a-col :span="12">
                  <a-upload
                    :custom-request="onFileUpload"
                    :file-list="form.anEntryDocument"
                    :showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
                    @change="(data) => onFileChange(data, 'anEntryDocument')"
                    @download="onFileDownload"
                  >
                    <a-button icon="upload" type="dashed">上传立项文件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model-item>
          </fieldset>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="主要安全隐患综述" prop="mainSafety">
            <a-checkbox-group v-model="form.mainSafety">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                v-for="item in codes.mainSafety"
              >{{ 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" prop="mainSafety">
            <span slot="label">
              主要安全隐患综述
              <br />备注
            </span>
            <a-textarea />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <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"
                v-for="item in codes.treatmentProposal"
              >{{ 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="mainSafety">
            <a-textarea />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="整改情况" prop="mainSafety">
            <a-textarea />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="填表人" prop="mainSafety">
            <a-input />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="填表日期" prop="mainSafety">
            <a-date-picker class="w-100-p" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="审核人" prop="mainSafety">
            <a-input />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
  /* ... */
};

export default {
  props: ['param'],

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

      /** 表单数据 */
      form: {},
      /** 验证格式 */
      rules: {
        /* ... */
        mainSafety: [{ required: true, message: '请选择主要安全隐患综述', trigger: 'blur' }],
        treatmentProposal: [{ required: true, message: '请选择处理意见', trigger: 'blur' }],
      },

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

      /** 其他成员属性 */
      /* ... */
      codes: {
        mainSafety: [],
        treatmentProposal: [],
      },
    };
  },

  watch: {
    'form.mainSafety'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'mainSafety');
    },

    'form.treatmentProposal'(value, oldValue) {
      this.onCheckedNone(value, oldValue, 'treatmentProposal');
    },
  },

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

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

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

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    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_facebrick_mainsafety', 'dic_house_facebrick_treatment_proposal'],
        })
        .then(({ data: { dic_house_facebrick_mainsafety, dic_house_facebrick_treatment_proposal } }) => {
          this.codes = {
            mainSafety: dic_house_facebrick_mainsafety,
            treatmentProposal: dic_house_facebrick_treatment_proposal,
          };
        });
    },

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

    /* 上传下载文件相关 Begin */
    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();
      }
    },
    onFileChange({ fileList }, key) {
      this.form[key] = fileList;
    },
    onFileDownload(file) {
      this.$api.sysFileInfoDownload({ id: file.response }).then((res) => {
        const url = window.URL.createObjectURL(res.data);
        const fileName = GetFileName(res.headers['content-disposition']);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
      });
    },
    /* 上传图片相关 End */
  },
};
</script>