<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'
import { siteImgUploadService } from '@/api/type'
import { informationImgUploadService } from '@/api/information'
import { hotImg } from '@/api/hot'
import DefaultImg from '@/assets/cover.jpg'
// 响应式处理
const isMobile = ref(window.innerWidth < 768)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const dialogVisible = ref(false)
const uploadRef = ref()
const imgUrl = ref()
const formData = new FormData()

const onUploadFile = (file) => {
  // 基于 FileReader 读取图片做预览
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
  console.log(imgUrl)
  formData.append('file', file.raw)

  // imgUrl.value = URL.createObjectURL(file.raw)
}

// 组件对外暴露一个方法 open
// tid -> 编号
// tUrl -> 图片地址
// type -> venue表示场馆 site表示场地 hot表示热点事件
const typeValue = ref('')
const open = (tid, tUrl, type) => {
  imgUrl.value = tUrl === null || tUrl === '' || tUrl === ' ' ? '' : tUrl
  typeValue.value = type
  formData.append('id', tid)
  dialogVisible.value = true
}
// 向外暴露
defineExpose({
  open
})

const emit = defineEmits(['success'])
// 上传图片
const uploadPhoto = async () => {
  const isFile = formData.get('file')
  if (isFile !== null) {
    if (typeValue.value === 'venue') {
      /* 调用场馆上传照片接口 */
      await siteImgUploadService(formData)
      ElMessage.success('场馆照片上传成功')
    } else if (typeValue.value === 'site') {
      // 调用场地上传照片接口
      await informationImgUploadService(formData)
      ElMessage.success('场地照片上传成功')
    } else if (typeValue.value === 'hot') {
      // 调用热点上传照片接口
      await hotImg(formData)
      ElMessage.success('照片上传成功')
    } else {
      ElMessage.info('暂无信息')
    }
    dialogVisible.value = false
    formData.delete('id')
    formData.delete('file')
  } else {
    ElMessage.error('请选择图片')
  }
  emit('success')
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="上传图片"
    :width="isMobile ? '90%' : '40%'"
    :height="isMobile ? '80vh' : '80vh'"
    :center="true"
    :close-on-click-modal="false"
    :modal="true"
    :draggable="true"
    style="max-width: 1000px"
  >
    <div class="upload-container">
      <!-- 图片预览 -->
      <div class="preview-box">
        <el-upload
          ref="uploadRef"
          class="avatar-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onUploadFile"
        >
          <img
            class="preview-img"
            :src="imgUrl !== '' ? imgUrl : DefaultImg"
            alt="预览图"
          />
        </el-upload>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button
          @click="uploadRef.$el.querySelector('input').click()"
          type="primary"
          :icon="Plus"
          size="large"
          style="margin: 0 15px"
        >
          选择图片
        </el-button>
        <el-button
          type="success"
          :icon="Upload"
          size="large"
          @click="uploadPhoto"
        >
          上传图片
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<style scoped>
.upload-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.preview-box {
  flex: 1;
  min-height: 200px;
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.preview-img:hover {
  transform: scale(1.02);
}

.avatar-uploader:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: auto;
}

:deep(.el-upload) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

:deep(.el-dialog__body) {
  padding: 0 !important;
}
</style>
