<template>
  <div>
    <el-upload
      :action="upload"
      list-type="picture-card"
      :auto-upload="true"
      :multiple="true"
      :headers="headers"
      :file-list="fileList"
      :on-success="success"
      :data="updata"
      :accept="accept"
      :disabled="disabled"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}" style="width: 100%; height: 100%">
        <!-- {{file}} -->
        <img
          v-if="
            file.name.split('.')[1] == 'jpg' ||
            file.name.split('.')[1] == 'JPG' ||
            file.name.split('.')[1] == 'jpeg' ||
            file.name.split('.')[1] == 'JPEG' ||
            file.name.split('.')[1] == 'png' ||
            file.name.split('.')[1] == 'PNG' ||
            file.name.split('.')[1] == 'bmp' ||
            file.name.split('.')[1] == 'BMP' ||
            file.name.split('.')[1] == 'gif' ||
            file.name.split('.')[1] == 'GIF'
          "
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        />
        <img
          v-else
          class="el-upload-list__item-thumbnail"
          src="../../assets/downImg/文件夹.png"
          alt=""
        />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span> -->
          <span
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog
      append-to-body
      :visible.sync="updialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="附件预览"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import basicData from '@/api/basicData.js'
import req from '@/request.js'
export default {
  props: {
    dadToSon: {
      type: Object,
      default: () => {
        return ''
      },
    },
    accept: {
      type: String,
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      updata: {
        sourceId: this.dadToSon.sourceId,
      },
      dialogImageUrl: '',
      updialogVisible: false,
      files: [],
      fileList: this.dadToSon.fileList,
      // disabled: false, //按钮禁用控制
    }
  },
  created() {
  },
  computed: mapState({
    deleteUrl: function () {
      return (
        window.context.yhxt +
        '/bizMigrantBuildersInformation/v1/updateMigrantWorkersInformation'
      )
    },
    headers: (state) => {
      return {Authorization: `Bearer ${state.login.currentUser.token}`}
    },
    upload: function () {
      return window.context.portal + '/bizAccessory/v1/minioWorkOrderUpload'
    },
  }),
  methods: {
    success(response, file, fileList) {
      console.log(response, file, fileList)
      this.files = fileList
      //  this.files.push(response.value)
      this.$emit('sonToDad', this.files)
    },
    //上传事件
    handleRemove(file) {
      console.log(file,this.files, 'file')
      // this.files = this.files.filter((item) => {
      //   return item.uid != file.uid
      // })
      // this.fileList = this.files
      this.fileList = this.fileList.filter((item, index) => {
        // console.log(item, 'rrrrrrrrrrrrrr')
        return item.uid != file.uid
      })
      this.files = this.fileList
      this.$emit('sonToDad', this.files)
      if(file.id) {
          basicData.deleteEnclosureManagement(file.id).then((res) => {
          console.log(res)
        })
      }
    },
    handlePictureCardPreview(file) {
      console.log(file, '预览')
      if (
        file.name.split('.')[1] == 'jpg' ||
        file.name.split('.')[1] == 'JPG' ||
        file.name.split('.')[1] == 'jpeg' ||
        file.name.split('.')[1] == 'JPEG' ||
        file.name.split('.')[1] == 'png' ||
        file.name.split('.')[1] == 'PNG' ||
        file.name.split('.')[1] == 'bmp' ||
        file.name.split('.')[1] == 'BMP' ||
        file.name.split('.')[1] == 'gif' ||
        file.name.split('.')[1] == 'GIF'
      ) {
        this.dialogImageUrl = file.url
      } else {
        this.dialogImageUrl = require('../../assets/downImg/文件夹.png')
      }
      this.updialogVisible = true
    },
    handleDownload(file) {
      // console.log(file)
      if (file.id) {
        req
          .downloadGet(
            window.context.yhxt +
              `/bizEngineeringAccessories/v1/minIoAllDownFile?bizPath=specialproject&ids=${file.id}`
          )
          .then((res) => {
            if (res) {
              this.$message.success('下载成功')
            }
          })
      } else {
        this.$message.info('请先保存附件')
      }
      // this.$emit('downFile',file)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
}
</style>
