<template>
  <div>
    <!-- 图片上传组件 -->
    <el-upload
      class="pic-uploader-component"               <!-- 自定义类名用于样式控制 -->
    :action="uploadAction"                       <!-- 设置上传的服务器地址 -->
    :headers="uploadHeaders"                     <!-- 设置上传请求头，包含认证信息 -->
    accept=".png,.jpg,.jpeg,.gif"                <!-- 限制可接受的文件类型 -->
    :show-file-list="false"                      <!-- 不显示上传文件列表 -->
    :on-success="handleUploadSuccess"            <!-- 文件上传成功后的回调 -->
    :before-upload="beforeAvatarUpload"          <!-- 上传前的钩子函数，用于限制文件类型和大小 -->
    >
    <!-- 如果有图片，则显示图片；否则显示加号图标 -->
    <img
      v-if="modelValue"
      alt=""
      :src="checkFileUrl(modelValue)"            <!-- 动态绑定图片源 -->
    class="pic"                                <!-- 自定义类名用于样式控制 -->
    >
    <el-icon
      v-else                                     <!-- 如果没有图片则显示加号图标 -->
    color="#8c939d"
    size="28"
    >
    <Plus />                                   <!-- 加号图标 -->
    </el-icon>
    </el-upload>
  </div>
</template>

<script setup>
import { checkFileUrl } from '@/utils'             // 导入用于检查文件URL的工具函数
import $cookie from 'vue-cookies'                  // 导入vue-cookies用于获取存储在客户端的token
import { ElMessage } from 'element-plus'           // 导入Element Plus的消息提示组件
import { defineEmits, defineProps } from 'vue'     // 导入Vue的响应式API

// 定义上传请求头，包含从cookie中获取的Authorization令牌
const uploadHeaders = { Authorization: $cookie.get('Authorization') }

// 定义上传图片的服务器地址
const uploadAction = http.adornUrl('/admin/file/upload/element')

// 定义emit函数，用于向父组件发送更新
const emit = defineEmits(['update:modelValue'])

// 定义父组件传递的属性
const props = defineProps({
  modelValue: {
    default: '',                                   // 默认值为空字符串
    type: String                                   // 类型为字符串
  }
})

/**
 * 图片上传成功的处理函数
 */
const handleUploadSuccess = (response, file) => {
  emit('update:modelValue', file.response.data) // 更新父组件的modelValue
}

/**
 * 上传前的钩子函数，用于限制图片上传的格式和大小
 */
const beforeAvatarUpload = (file) => {
  const isLt2M = file.size / 1024 / 1024 < 2       // 检查文件大小是否小于2MB
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
  if (!isJPG) {
    ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!') // 提示错误信息
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!') // 提示错误信息
    return false
  }
  return isLt2M && isJPG                           // 返回布尔值，决定是否允许上传
}

</script>

<style lang="scss" scoped>
/* 使用SCSS编写样式，并且只应用于当前组件 */
.pic-uploader-component :deep(.el-upload) {
  border: 1px dashed #d9d9d9;                     /* 边框样式 */
  border-radius: 6px;                             /* 圆角边框 */
  cursor: pointer;                                /* 鼠标悬停时指针样式 */
  position: relative;                             /* 相对定位 */
  overflow: hidden;                               /* 超出内容隐藏 */
  .pic-uploader-icon {
    font-size: 28px;                              /* 字体大小 */
    color: #8c939d;                               /* 字体颜色 */
    width: 178px;
    height: 178px;
    line-height: 178px;                           /* 行高 */
    text-align: center;                           /* 文本居中 */
  }
  .pic {
    width: 178px;                                 /* 图片宽度 */
    height: 178px;                                /* 图片高度 */
    display: block;                               /* 块级元素 */
  }
}
.pic-uploader-component :deep(.el-upload:hover) {
  border-color: #409EFF;                          /* 悬停时边框颜色 */
}
:deep(.el-upload) {
  width: 148px;                                   /* 元素宽度 */
  height: 148px;                                  /* 元素高度 */
}
</style>
