<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-01 15:14:48
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-10-24 10:45:39
-->
<template>
  <el-upload :headers="headers"
             :class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"
             :action="uploadImgUrl"
             :file-list="coverList"
             :on-success="handlePictureSuccess"
             :on-change="uploadImgChange"
             list-type="picture-card"
             :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'upDataImg',
  props: {
    maxLength: 0,
  },
  data() {
    return {
      showImg: true, //默认展示
      noneUploadImg: false, //
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      headers: {
        Authorization: getToken(),
      },
      coverList: [],
    }
  },
  methods: {
    geCoverList(val) {
      this.coverList = [{ url: val }]
      this.noneUploadImg= true
    },
    uploadImgChange(file, fileList) {
      this.noneUploadImg = fileList.length > this.maxLength - 1
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      this.$emit('getImg', res.data.url)
    },
    //图片上传删除
    handleRemove(file, fileList) {
      let arrList = fileList.map((item) => {
        return item.response.data.url
      })
      this.$emit('delImg', arrList)
      // this.form.cover = ''
      this.noneUploadImg = fileList.length > this.maxLength - 1
    },
  },
}
</script>

<style scoped lang="scss">
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
</style>