<template>
  <!-- 多选 -->
  <template v-if="multiple">
    <ul class="multiple-image-uploader">
      <li v-for="fileKey in modelValue" :key="fileKey" :style="{ width: previewHeight, height: previewHeight}">
        <img
          :src="$getImageURL(fileKey)"
          class="image-previewer"
          alt=""
        >
        <div class="opera">
          <el-button type="danger" size="small" @click="deleteImage(fileKey)">删除</el-button>
        </div>
      </li>
      <li class="button-add" :style="{ width: previewHeight, height: previewHeight}">
        <el-upload
          class="image-uploader__button"
          action="/api/resource/oss/upload/image"
          accept=".jpg,.jpeg,.png"
          :multiple="true"
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
        >
          <el-icon
            class="image-uploader-icon"
          >
            <Plus/>
          </el-icon>
        </el-upload>
      </li>
    </ul>
  </template>
  <!-- 单选 -->
  <el-upload
    v-else
    class="image-uploader"
    action="/api/resource/oss/upload/image"
    accept=".jpg,.jpeg,.png"
    list-type="picture-card"
    :show-file-list="false"
    :style="{ height: previewHeight}"
    :on-success="handleUploadSuccess"
  >
    <!-- 单选 -->
    <img
      v-if="modelValue"
      :src="$getImageURL(modelValue)"
      class="image-previewer"
      :style="{height: previewHeight}"
      alt=""
    >
    <el-icon
      v-else
      class="image-uploader-icon"
      :style="{height: previewHeight}"
    >
      <Plus/>
    </el-icon>
  </el-upload>
</template>

<script>

export default {
  name: 'ImageUploader',
  props: {
    // 头像fileKey
    modelValue: {
      required: true
    },
    // 是否支持多选
    multiple: {
      default: false
    },
    // 预览高度
    previewHeight: {
      default: '200px'
    }
  },
  methods: {
    // 删除图片
    deleteImage (fileKey) {
      const currentFileKeys = [...this.modelValue]
      currentFileKeys.splice(this.modelValue.indexOf(fileKey), 1)
      this.$emit('deleted', fileKey)
      this.$emit('update:modelValue', currentFileKeys)
    },
    // 处理头像上传成功
    handleUploadSuccess (res) {
      if (!res.success) {
        this.$tip.apiFailed(res)
        return
      }
      // 多选，值为数组
      if (this.multiple) {
        const newFileKeys = [...this.modelValue]
        newFileKeys.push(res.data.fileKey)
        this.$emit('update:modelValue', newFileKeys)
        this.$emit('uploaded', res.data.fileKey)
      }
      // 单选，值为字符串
      else {
        this.$emit('update:modelValue', res.data.fileKey)
        this.$emit('uploaded', res.data.fileKey)
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 多选
.multiple-image-uploader {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
  li {
    position: relative;
    img {
      border-radius: 5px;
    }
    .opera {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: opacity .3s;
    }
    &:hover {
      .opera {
        opacity: 1;
      }
    }
  }
  .button-add {
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    &:hover {
      border-color: #409EFF;
    }
  }
  .image-uploader__button {
    width: 100%;
    height: 100%;
    :deep(.el-upload--picture-card) {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: 0;
    }
  }
}
// 单选
.image-uploader {
  :deep(.el-upload) {
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    &:hover {
      border-color: #409EFF;
    }
  }
}
.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 1;
  text-align: center;
}
.image-previewer {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
</style>
