<template>
  <a-modal
    :title="$t('plan.dvp.upload-material-list')"
    :visible="isUpload"
    :maskClosable="false"
    :width="800"
    @cancel="cancel"
    @ok="save"
  >
    <a-form>
      <a-row :gutter="24">
        <!--材料清单编号-->
        <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <a-form-item :label="$t('plan.dvp.material-number')" :required="true">
            <a-input v-model.trim="uploadParam.materialNo" :maxLength='50' :placeholder="$t('global-btn.please-enter') + $t('plan.dvp.material-number')" allowClear></a-input>
          </a-form-item>
        </a-col>
        <!--上传材料清单 -->
        <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <a-form-item :label="$t('plan.dvp.upload-material-list')" :required="true">
            <a-upload-dragger
              name="file"
              :multiple="false"
              action=""
              :customRequest='editUploadFile'
              :file-list="fileList"
              :remove='editRemoveFile'
            >
              <p class="ant-upload-drag-icon">
                <a-icon type="inbox"/>
              </p>
              <p class="ant-upload-text">
                {{ $t('dvp.full.vehicle.dvp.click-drag-file-area') }}
              </p>
              <p class="ant-upload-hint">
                {{ $t('dvp.full.vehicle.dvp.only-support-single-upload') }}
              </p>
            </a-upload-dragger>
          </a-form-item>
        </a-col>
        <!--零部件编号-->
        <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <a-form-item :label="$t('workbench.compoment-number')" :required="true">
            <a-select v-model="uploadParam.partCode" @change="cascadeSelect" :filter-option="handleFilterDataList" mode="multiple"  allowClear :placeholder="$t('global-btn.please-select') + $t('workbench.compoment-number')">
              <a-select-option v-for='item in partInfoList' :key='item.id' :value='item.id'>
                {{ item.partCode }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!--零部件名称-->
        <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <a-form-item :label="$t('workbench.compoment-name')" :required="true">
            <a-input v-model.trim="uploadParam.partName" :disabled="true" :placeholder="$t('global-btn.please-select') + $t('workbench.compoment-name')" allowClear></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>


<script>
export default {

  props: {
    isUpload: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      /** 弹框参数 */
      uploadParam: {},
      /** 上传文件 */
      fileList: [],
      /** 零部件编号/名称下拉选项 */
      partInfoList: [],
      /** 级联 用的零部件名称下拉选项 */
      cascadeList: []
    }
  },

  methods: {

    /**
     * 初始化下拉数据
     */
    initSelectData() {
      this.partInfoList = [];
      this.cascadeList = [];
      let data = {
        dvpId: this.$store.getters.dvpId
      };
      this.$api.getPartList(data).then(res => {
        if (res.flag) {
          let partList = res.data.partList;
          this.partInfoList = partList;
          this.cascadeList = partList;
        }
      });
    },

    /**
     * 保存 按钮
     * */
    save() {
      // 非空校验
      if (!this.isNull()) {
        return false;
      }
      let data = {
        dvpId: this.$store.getters.dvpId,
        code: this.uploadParam.materialNo,
        partCodeList: this.uploadParam.partCode,
        attachmentType: 0,
        dvpAddFileModel: this.fileList[0],
      };
      this.$api.materialsListUpload(data).then(res => {
        if (res.flag) {
          this.$message.success(res.message);
          this.cancel();
          this.$emit("initData");
        } else {
          this.$message.error(res.message);
        }
      });
    },

    /**
     * 取消按钮
     */
    cancel() {
      this.uploadParam = [];
      this.fileList = [];
      this.$emit("closeUploadModal");
    },

    /**
     * 实验报告，文件上传
     * @param obj 回调对象
     */
    editUploadFile(obj) {
      let _that = this;
      _that.fileList = [];
      if (obj.file.size > 104857600) {
        _that.$message.warning(_that.$t('global-message.warn.uploaded-files-cannot-exceed'));
        return;
      }
      let fd = new FormData();
      fd.append('file', obj.file);
      fd.append('fileType', '18');
      _that.$api.uploadFile(fd).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
          _that.fileList.push({
            name: res.data.fileName,
            fileName: res.data.fileName,
            filePath: res.data.filePath,
            fileSize: res.data.fileSize,
            newFileName: res.data.newFileName,
            uid: obj.file.uid
          });
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      }).finally(() => {});
    },

    /**
     * 实验报告，文件删除
     * @param file 文件
     */
    editRemoveFile(file) {
      this.fileList = [];
    },

    /**
     * 级联下拉选择
     * @param val
     */
    cascadeSelect(val, options) {
      if (options && options.length > 0) {
        this.cascadeList = [];
        this.uploadParam.partName = " ";
        options.forEach( item => {
          this.partInfoList.forEach( partInfo => {
            if (partInfo.id === item.data.key) {
              this.cascadeList.push(partInfo);
              this.uploadParam.partName += partInfo.partName + " ";
            }
          });
        });
      } else {
        this.cascadeList = this.partInfoList;
        this.uploadParam.partName = "";
      }
    },

      /**
     * 下拉选模糊查询
     * @param input
     * @param option
     * @returns {boolean}
     */
    handleFilterDataList(input,option) {
      return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
    },

    /**
     * 非空校验 判断是否为空
     * @returns {boolean}
     */
    isNull() {
      let _that = this;
      let message = [];
      if (!_that.uploadParam.materialNo) {
        message.push(_that.$t('global-btn.please-enter') + _that.$t('plan.dvp.material-number'));
      }
      if (!_that.uploadParam.partCode) {
        message.push(_that.$t('global-btn.please-select') + _that.$t('verity.dvp.part.number'));
      }
      if (_that.fileList.length < 1) {
        message.push(_that.$t('global-message.warn..message.warn.select-file'));
      }
      if (message && message.length > 0) {
        for (let i = 0; i < message.length; i++) {
          _that.$notification.warning({message: message[i]});
        }
        return false;
      }
      return true;
    }
  }
}
</script>

<style lang="less" scoped>

</style>
