<template>
  <div class="uploadpic">
    <!-- :file-list="fileList" v-else<img v-if="filePath" :src="filePath" alt="图" class="avatar"/> -->
    <el-upload
      ref="uploadfile"
      :action="imgAction"
      :headers="headers"
      :before-upload="imgBeforeUpload"
      :list-type="listtype"
      :on-preview="handlePreview"
      :on-change="handleChange"
      :class="objClass"
      :limit="limit"
      :auto-upload="true"
      :on-remove="handelDelete"
      :on-error="handleError"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
    >
      <!-- 这是修改回显的时候显示的照片 -->
      <img v-if="filePath" :src="filePath" class="avatar" />
      <!-- v-else<el-button  v-if="fileName=='publicize'" size="small" type="primary">点击上传</el-button> -->
      <div v-else>
        <i slot="default" class="el-icon-plus"></i>
        <!-- <div slot="tip" class="el-upload__tip"></div> -->
      </div>
    </el-upload>

    <!-- <div class="avatar">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip"></div>
    </div>
    {{filePath.length}}111 -->
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'MultiUpload',
  components: { ElImageViewer },
  model: {
    prop: 'value',
  },
  props: {
    //配合v-model 加载初始值
    value: {
      type: Array,
      default: () => [],
    },
    listtype: String,
    limit: Number,
    fileName: String,
    serverAddr: String,
    // imgAction: String,
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ['png', 'jpg', 'jpeg'],
    },
  },
  data() {
    return {
      fileList: [],
      filePath: '',
      imageVisible: false,
      dialogImageUrl: '',
      // imgAction: "dev-api/upload",
      imgAction: process.env.VUE_APP_BASE_API + '/common/upload',
      progressPercent: 0,
      minSize: 1 * 1024,
      maxSize: 50 * 1024 * 1024,
      minSizeTip: '1KB',
      maxSizeTip: '50MB',
      objClass: {
        upLoadShow: true,
        upLoadHide: false,
      },
    }
  },
  mounted() {
    //  console.log('value---',getToken())
  },
  computed: {
    headers() {
      return { Authorization: 'Bearer ' + getToken() }
    },
  },
  created() {
    // console.log('----',this.value)
    // this.setFileList(this.value);
    // console.log('上传地址process.env.VUE_APP_BASE_API + ',process.env.VUE_APP_BASE_API)
  },
  // //监听父组件值是否在变化
  watch: {
    //有些页面初始初始src没有赋值
    // value(newValue, oldValue) {
    //   // console.log('当前图片',newValue, '之前图片',oldValue)
    //   this.setFileList(newValue);
    // },
  },
  methods: {
    // 效验方法
    imgBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = ''
        if (file.name.lastIndexOf('.') > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true
          if (fileExtension && fileExtension.indexOf(type) > -1) return true
          return false
        })
        if (!isTypeOk) {
          this.$message.error(`请上传${this.fileType.join('/')}格式文件!`)
          return false
        }
      }

      let isAccept = true
      let isRightSize = file.size <= this.maxSize
      if (!isRightSize) {
        this.$message.error('文件大小不能超过' + this.maxSizeTip)
        return false
      }
      isRightSize = file.size >= this.minSize
      if (!isRightSize) {
        this.$message.error('文件大小不能小于' + this.minSizeTip)
        return false
      }
      return isRightSize && isAccept
    },
    // 文件上传时
    handlePreview(file) {
      this.imageVisible = true
      this.dialogImageUrl = file.response
    },
    // 关闭放大查看
    closeViewer() {
      this.imageVisible = false
    },
    // 删除时方法
    handelDelete(file, fileList) {
      console.log('删除接口', this.filePath, file, fileList)
      this.filePath = ''
    },
    clearImages() {
      // 在这里实现清除图片的逻辑
      // 例如，使用 el-upload 提供的方法清除图片
      this.$refs.uploadfile.clearFiles()
    },
    // 上传成功
    handleSuccess(response, file) {
      this.value.push(response.fileName)
      // this.filePath=''
      // this.handelDelete()
    },
    //上传失败
    handleError() {
      this.$message.error('文件上传失败，请重新上传或联系管理员')
    },
    // 文件超出个数限制
    handleExceed() {
      this.$message.error('最多只能上传' + this.limit + '个文件')
    },
    handleChange() {},

    //通过父组件传过来的value更新子组件
    setFileList(string) {
      this.filePath = string
      // console.log('图片',this.filePath,'图片完')
    },
    reset() {
      this.$nextTick(() => {
        this.filePath = ''
        // console.log('this.filePath',this.filePath,)
      })
    },
  },
}
</script>

<style scoped>
.uploadpic >>> .el-upload--picture-card {
  background-color: transparent;
  /* border:1px dashed #34b2ed */
}
.uploadpic >>> .el-upload--picture-card i {
  /* color: #34b2ed */
}
.el-upload__tip {
  /* color: #34b2ed; */
  margin-top: -42px;
}
/*当upLoadShow为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.uploadpic >>> .upLoadShow .el-upload {
  width: 148px;
  height: 148px;
  /* line-height: 146px; */
}
.avatar {
  width: 148px;
  height: 148px;
  /* line-height: 146px;
      background-color: transparent;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      text-align: center; */
}
/*当upLoadHide为true时，启用如下样式，即缩略图的样式，若为false则不启用该样式*/
.uploadpic >>> .upLoadHide .el-upload-list--picture-card .el-upload-list__item {
  width: 148px;
  height: 148px;
  /* line-height: 146px; */
}
/*当upLoadHide为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.uploadpic >>> .upLoadHide .el-upload {
  display: none;
}
</style>
