<template>
    <div class="upload-file-wrap">
      <el-row>
        <el-col :span="span" v-if="isInCount">
          <div class="el-col-ctn-box">
            <div class="el-col-upload-box">
              <el-upload
                  class="el-upload-box"
                  ref="upload"
                  action=""
                  :accept="accept"
                  :show-file-list="false"
                  :http-request="httpRequest"
                  >
                <div class="upload-file">
                  <i class="el-icon-plus uploader-file-icon"></i>
                  <!-- <div class="font-size-12 color-BCDFFD text-center">上传材料</div> -->
                </div>
              </el-upload>
              <div class="font-size-12 color-a9a9a9 text-center line-height-20">{{ uploadName }}</div>
            </div>
  
          </div>
        </el-col>
        <!--上传的图片预览-->
        <el-col :span="span" v-for="(item,i) in lists" :key="i">
          <div class="el-col-ctn-box "
               @click="handlePreview(item)">
            <div class="el-col-upload-box">
              <div class="upload-preview-box">
                <img v-if="item.deletable && !readOnly"
                     class="upload-delete-icon" src="../assets/image/icon_close.png" alt=""
                     @click.stop.prevent="handleDelete(item, i)">
                <div class="upload-file">
                  <!-- svg展示 -->
                  <svgViewer :src="item.iconFrontSrc" class="el-image-upload" v-if="item.fileType==='svg'"> </svgViewer>
                  <!-- 其他展示  -->
                  <el-image class="el-image-upload" :src="item.iconFrontSrc" fit="scale-down" v-else></el-image>
                </div>
              </div>
  
              <div v-if="!showFileName" class="font-size-12 color-a9a9a9 text-center line-height-20">
                {{ showFileName ? item.fileName : maxCount === 1 ? uploadName : '' }}
              </div>
            </div>
  
          </div>
        </el-col>
      </el-row>
  
      <!-- 大图预览 -->
      <dialogPreview v-if="editImgFlag" :visible.sync="editImgFlag" :previewUrl="previewPath" :isSvg="isSvg" />
      <pdfPreview v-if="editPdfFlag" :visible.sync="editPdfFlag" :previewUrl="previewPath"/>
      <videoPreview v-if="editMp4Flag" :visible.sync="editMp4Flag" :previewUrl="previewPath"/>
    </div>
  </template>
  
  <script>
  import commonFun from "../services/projectConfig";
  
  export default {
    name: "uploadFile",
    components: {
      svgViewer: () => import('./svg-viewer'),
      dialogPreview: () => import('./dialogPreview'),
      pdfPreview: () => import('./pdfPreview.vue'),//查看PDF文件
      videoPreview: () => import('./videoPreview.vue'),//查看视频文件
    },
    props: {
      span: {
        // layout组件参数，每排排列几个
        type: Number,
        default: 5
      },
      accept: {
        type: String,
        default: '*',
      },
      imageHeight: {
        // 图片、上传框的高度
        type: String,
        default: ''
      },
      imageMode: {
        // 图片裁剪、缩放的模式,具体参考uni image
        type: String,
        default: 'aspectFit'
      },
      readOnly: {
        // 只读，true-是，false-否
        type: Boolean,
        default: false
      },
  
      fileList: {
        // 已上传的文件列表
        type: [Array, Object],
        default: () => {
          return [
            //{ url:文件地址, fileName: 文件名}
          ]
        }
      },
      uploadName: {
        // 要上传的文件昵称
        type: String,
        default: '上传'
      },
      maxCount: {
        // 允许上传文件的最大总数
        type: Number,
        default: 1
      },
      selectCount: {
        // 每次上传时，允许用户选择的文件数量
        type: Number,
        default: 1
      },
      customUpload: {
        // 自定义上传按钮的样式
        type: Boolean,
        default: false
      },
      autoUpload: {
        // 是否自动上传
        type: Boolean,
        default: true
      },
      showFileName: {
        // 是否显示文件名
        type: Boolean,
        default: false
      },
      splitFileTitle: {
        // 是否在显示效果上分割文件、文件名
        type: Boolean,
        default: true
      },
      isImg: {
        // 是否在显示图片预览
        type: Boolean,
        default: true
      },
      fileSize: {
        // 上传文件大小-单位M
        type: Number,
        default: 10
      },
      serveType: {
        // 服务类型 1线下 2线上
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        lists: [
          //{url: 文件地址, fileName: 文件名, deletable: 是否可删除, readStatus: 是否显示阅读状态, iconFrontSrc: 图标样式}
        ],
        dialogVisible: false,
        isSvg: true,
        editPdfFlag:false,
        editMp4Flag:false,
        editImgFlag: false,
        previewPath:'',
      }
    },
    computed: {
      isInCount() {
        return (this.lists.length < this.maxCount) && !this.readOnly
      },
    },
    watch: {
      // 监听文件列表的变化，重新整理内部数据
      fileList: {
        immediate: true,
        handler() {
          this.formatFileList()
        }
      },
  
    },
  
    methods: {
      formatFileList() {
        let fileList = this.fileList || []
        fileList = JSON.parse(JSON.stringify(fileList))
        // console.log('upload===========formatFileList()方法==========fileList：', fileList)
        const lists = fileList.map(item => {
            let obj = Object.assign(item)
            obj.deletable = typeof (obj.deletable) === 'boolean' ? obj.deletable : true
            let text = obj.url || obj.fileName
            obj.fileType = this.$util.getFileExtension(text)
            obj.iconFrontSrc = this.$util.getIcon(obj)

            // let previewUrl = `${projectConfig.fileHost}${obj.url}`
            let previewUrl = `/manage-center/minio/preview/${obj.url}`
            if(obj.url.includes('http')){
                previewUrl = obj.url
            }
            obj.previewUrl = previewUrl
            if(this.$util.getFileType(text) === 'image') {
                // 如果是图片，直接显示图片
                obj.iconFrontSrc = obj.previewUrl
            }

            return obj
        });
        this.lists = lists
        // console.log('uploadFile----:', this.lists)
      },
      async httpRequest(param) {
        console.log(this.accept,'httpRequest上传文件：', param)
        let fileType = this.$util.getFileExtension(param.file.name)
        // 上传图片类型:png,jpg,bmp
        if (this.accept !== '*' && this.accept.indexOf(fileType) === -1) {
          this.$message({message: `不能上传${fileType}格式的文件`, type: 'warning'});
          return
        }
        // 上传大小 100M
        const uploadfileSize = param.file.size
        if (uploadfileSize.toFixed(2) > (this.fileSize * 1024 * 1024)) {
          this.$message({message: `请上传大小需在${this.fileSize}MB以内的文件`, type: 'warning'});
          return
        }
  
        try {
        //   let formData = new FormData()
        //   formData.append('file', param.file)
        //   if (this.serveType === 1){
        //     let uploadFileRes = await commonFun.uploadFile(formData);
        //     let fileList = JSON.parse(JSON.stringify(this.fileList))
        //     fileList.push({
        //       url: uploadFileRes.minioUrl,
        //       previewUrl: uploadFileRes.preSignDownload,
        //       fileType: this.$util.getFileExtension(uploadFileRes.minioUrl)
        //     })
        //     this.$emit('handleUploadFile', fileList)
        //   }else {
        //     let uploadFileRes = await commonFun.uploadFile2(formData);
        //     let fileList = JSON.parse(JSON.stringify(this.fileList))
        //     fileList.push({
        //       url: uploadFileRes.url,
        //       previewUrl: uploadFileRes.fullUrl,
        //       fileType: this.$util.getFileExtension(uploadFileRes.url),
        //       fileName: uploadFileRes.objectName
        //     })
        //     this.$emit('handleUploadFile', fileList)
        //   }
            let formData = new FormData()
            formData.append('file', param.file)
                let uploadFileRes = await this.$fetchApi.uploadFile(formData);
            let fileList = JSON.parse(JSON.stringify(this.fileList))
            fileList.push({
                url: uploadFileRes.url,
                fileSize: uploadFileRes.size,
                fileType: this.$util.getFileExtension(uploadFileRes.url),
                fileName: uploadFileRes.objectName
            })
            this.$emit('handleUploadFile', fileList)

        } catch (e) {
          this.$message.error(e.msg)
        }
      },
      async handlePreview(item) {

        // try {
                //     let res = await this.$fetchApi.getMinioToken({objectName: item.url})
                //     window.open(`${item.previewUrl}?token=${res}`, '_target')
                // }catch (e) {
                //     this.$message.error(e.msg || e)
                // }

        if (!this.isImg) {return}
        this.isSvg = false;
        let analysisType = this.$util.getFileType(item.fileType);
        if (item.fileType === 'svg'){
          this.previewPath = item.iconFrontSrc
          this.isSvg = true;
          this.editImgFlag = true;
        }else if (analysisType === 'image'){
          if (item.previewUrl) {
            this.previewPath = item.previewUrl
          }else {
            this.previewPath = await commonFun.viewFile2({url: item.url})
          }
          this.editImgFlag = true;
        }else if(analysisType.toLowerCase() === 'mp4' || analysisType.toLowerCase() === 'video'){
          if (item.previewUrl) {
            this.previewPath = item.previewUrl
          }else {
            this.previewPath = await commonFun.viewFile2({url: item.url})
          }
          this.editMp4Flag = true;
        }else if(analysisType.toLowerCase() === 'pdf'){
          if (item.previewUrl) {
            this.previewPath = item.previewUrl
          }else {
            this.previewPath = await commonFun.viewFile2({url: item.url})
          }
          this.editPdfFlag = true;
        }else {
          let res = await commonFun.viewFile2({url: item.url})
          window.open(`${res}`, '_target')
        }
      },
      handleDelete(item, i) {
        this.lists.splice(i, 1)
        let fileList = JSON.parse(JSON.stringify(this.fileList))
        fileList.splice(i, 1)
        this.$emit('handleUploadFile', fileList)
      }
    },
  }
  </script>
  
  <style lang="scss">
  .el-col-ctn-box {
    width: 100%;
    // height: 154px;
  }
  
  .el-col-upload-box {
    width: 120px;
    // height: 154px;
    border-radius: 4px;
    // overflow: hidden;
  }
  
  .el-upload-box {
    width: 100%;
    height: 120px;
    background: #eeeeee;
    border: 1px dashed #dcdcdc;
    border-radius: 4px;
  }
  
  .el-col-ctn-box .el-upload,
  .el-col-ctn-box .upload-file {
    width: 100% !important;
  }
  
  .el-col-ctn-box .upload-preview-box {
    position: relative;
    height: 120px;
    border: 1px solid rgba(151, 168, 177, 0.2);
    border-radius: 4px;
  }
  
  .el-col-ctn-box .upload-delete-icon {
    width: 30px;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 11111;
  }
  
  .el-col-ctn-box .upload-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
  }
  
  .el-col-ctn-box .uploader-file-icon {
    font-size: 32px;
    color: #000;
  }
  
  .el-col-ctn-box .el-image-upload {
    border-radius: 4px;
    padding: 5px;
    box-sizing: border-box;
  
    svg {
      width: 120px;
      height: 120px;
    }
  }
  
  .el-col-ctn-box .txt-center {
    height: 40px;
    line-height: 20px;
  }
  
  .line-height-30 {
    line-height: 30px;
  }
  </style>