<template>
  <DragModal
      :mask-closable='false'
      :visible='visible'
      :width='800'
      :title="$t('structural-analysis.historical-boundary-map.boundary-map-upload')"
      @cancel='visible = false'
  >
    <template>
      <div class='clearfix'>
        <a-upload
            :customRequest='handleCustomRequest'
            :disabled="$api.isLook==='1'"
            :fileList='fileList'
            :remove='handleRemove'
            :supportServerRender='true'
            action=''
            listType='picture-card'
            @preview='handlePreview'
            :before-upload="beforeUpload"
        >
          <div v-if='fileList.length < 50'>
            <a-icon type='plus'/>
            <div class='ant-upload-text'>
              {{ $t('global-btn.upload') }}
            </div>
          </div>
        </a-upload>
      </div>
    </template>
    <div class='dialog-footer mt10 text-right'>
      <a-button @click='visible= false'>
        {{ $t('global-btn.close') }}
      </a-button>
    </div>
  </DragModal>
</template>
<script>

export default {
  name: 'index',
  data() {
    return {
      /** 组件开关 */
      visible: false,
      /** 文件集合 */
      fileList: [],
    }
  },
  watch: {
    'visible'(val) {
      if (val) {
        this.init();
      }
    },
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      let _that = this;
      let baseUrl = _that.$api.baseUrl
      if (baseUrl === '/') baseUrl = 'http://localhost:8082';
      _that.fileList = [];
      _that.$api.getHistoryChartFileList({
        fmeaId: _that.$store.getters.fmeaId
      }).then(res => {
        if (res.flag) {
          let data = res.data;
          data.forEach((item) => {
            _that.fileList.push({
              uid: item.id.toString(),
              name: item.fmeaId.toString(),
              status: 'done',
              url: baseUrl + '/DFMEA' + item?.attachmentPath,
            })
          })
        }
      })
    },
    // 文件上传之前的校验
    beforeUpload(file) {
      // 检查文件名是否包含中文字符
      // let chineseRegex = /[\u4e00-\u9fa5]/;
      // if (chineseRegex.test(file.name)) {
      //   // 如果包含中文字符，则阻止上传并给出提示
      //   this.$notification.warning({message: this.$t('structural-analysis.historical-boundary-map.please-modify-file-name')});
      //   return false; // 返回 false 将阻止文件上传
      // } else {
      //   return true; // 返回 true 将允许文件上传
      // }
      // 限制 只能上传图片
      let isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$notification.warning({message: this.$t('structural-analysis.historical-boundary-map.please-upload-image-type')});
      }
      return isImage;
    },
    /**
     * 处理自定义上传文件
     * @param file
     */
    handleCustomRequest(file) {
      let _that = this;
      let fd = new FormData()
      fd.append('file', file.file)
      fd.append('fmeaId', this.$store.getters.fmeaId)
      _that.$api.uploadHistoryChartFile(fd).then(res => {
        if (res.flag) {
          _that.init();
        } else {
          _that.$message.error(res.message)
        }
      })
    },
    /**
     * 处理图片预览
     * @param file
     */
    handlePreview(file) {
      window.open(file.url, '_blank');
    },
    /**
     * 处理删除
     * @param file
     */
    handleRemove(file) {
      let _that = this;
      let id = file.uid
      _that.$confirm({
        title: _that.$t('structural-analysis.del-message'),
        okText: _that.$t('global-btn.ok'),
        cancelText: _that.$t('global-btn.cancel'),
        okType: 'danger',
        onOk() {
          _that.$api.removeFmeaChartFile({id: id}).then(res => {
            if (res.flag) {
              _that.init();
            }
          })
        },
        onCancel() {
        },
      })
    },
  }
}

</script>