<template>
  <super-dialog
    v-on="$listeners"
    v-bind="$attrs"
    title="收费标准文档"
    v-model="dialogVisible"
    @close="$emit('close-dialog')"
    @closed="closed"
    @open="open"
  >
    <div class="detail-box">
      <div class="file-upload">
        <el-upload ref="upload" :accept="accept" :action="actionUrl + '/file/v1/uploadFileForConfig'"
                   :data="{   bizCode: 'RDProofFile',bizId,bizType:'1'  }" :headers="headers"
                   :before-upload="beforeUpload"
                   :on-error="handleError"
                   :on-success="handleSuccess"
                   :on-preview="handlePreview"
                   :file-list="fileList"
                   :on-remove="handleRemove"
                   :show-file-list="true" list-type="picture-card" name="files">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          <div slot="file" slot-scope="{file}">
            <el-image ref="previewImg" :src="file.url" :preview-src-list='previewList'></el-image>
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePreview(file)">
                <i class="el-icon-view"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </div>
    </div>
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {deleteFileById, getFileData} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadDamageProjectDetails'
import {mapState} from 'vuex'

export default {
  name: 'FileDialog',
  components: {SuperDialog},
  props: {
    isShowDetail: {
      default: false,
      type: Boolean,
    },
    bizId:{
      default: '',
      type: String,
    }
  },
  computed: {
    actionUrl: _ => window.context.portal,
    previewUrl: _ => window.context.portal + '/file/onlinePreviewController/v1/getFileById_',
    ...mapState({
      headers: (state) => ({Authorization: `Bearer ${state.login.currentUser.token}`})
    }),
    dialogVisible: {
      get() {
        return this.isShowDetail
      },
      set(val) {
        this.$emit('update:isShowDetail', val)
      },
    },
  },
  data() {
    return {
      accept: '.png, .jpg',
      fileList: [],
      previewList:[],
    }
  },
  methods: {
    // 弹层打开
    open() {
      this.getDetailData()
    },
    // 弹层关闭
    closed() {
      this.fileList = []
    },
    beforeUpload(file) {
      const {size} = file
      const maxSize = 50 * 1024 * 1024 // 20MB
      if (size > maxSize) {
        this.$message.warning('附件大小不能超过5MB')
        setTimeout(_ => this.saveLoading = false, 0)
        return false
      }
    },
    handleSuccess(response,file) {
      const {
        fileId = '',
        fileName = '',
        size: fileSizes = 0,
        success,
      } = response
      if (success) {
        this.fileList.push({uid:file.uid, fileId, fileSizes, fileName,'url':this.previewUrl + fileId})
      } else {
        this.$message.error('文件上传失败')
      }
    },
    // 文件上传失败
    handleError() {
      this.$message.warning('图片上传失败')
    },
    async handleRemove(file,fileList){
      let id = file.fileId?file.fileId:file.id
      const {state} = await deleteFileById(id)
      if(state){
        this.$message.success('删除成功')
        await this.getDetailData()
      }
    },
    handlePreview(file){
      let id = file.fileId?file.fileId:file.id
      this.previewList = [this.previewUrl + id]
      this.$refs.previewImg.showViewer = true
    },
    // 获取详情
    async getDetailData() {
      this.fileList = []
      this.fileList = await getFileData(this.bizId)
      if(this.fileList.length > 0){
        this.fileList = this.fileList.map((file) => {
          return {
            ...file,
            url:this.previewUrl+file.id,
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-upload-list__item.is-ready {
  display: none !important;
}
.detail-box {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  .file-upload {
    border-radius: 5px;
    transition: all .3s;

    ::v-deep.el-upload {
      width: 240px;
      height: 150px;
      border-radius: 5px;
      border: 1px dashed #43a1ff !important;
      background-color: #114066;

      i {
        font-size: 24px;

        &::before {
          font-size: 20px;
          color: #43a1ff;
        }
      }

      * {
        border-radius: 5px !important;
      }
    }
  }
}
</style>
