<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { $t as t } from '@vben/locales';

import { Plus } from '@element-plus/icons-vue';
import { ElForm, ElIcon, ElMessage } from 'element-plus';

import cropperModal from '#/components/cropper/src/cropper-modal.vue';

// 表单数据
const formData: any = reactive({
  waterSupplyImage: '', // 油站给排水图
  dailyParkingImage: '', // 平日停车位设置图与站内隔离图
  memberDayParkingImage: '', // 会员日停车位设置图与站内隔离图
  trafficFlowImage: '', // 站内动线图
  posterPositionImage: '', // 站内海报位置图及海报尺寸
});

// 当前上传类型
type UploadType =
  | 'dailyParking'
  | 'memberDayParking'
  | 'posterPosition'
  | 'trafficFlow'
  | 'waterSupply';
const currentUploadType = ref<UploadType>('waterSupply');

// 创建裁剪模态框
const [CropperModal, modalApi] = useVbenModal({
  connectedComponent: cropperModal,
});

// 上传函数（模拟上传，实际使用时需要替换为真实的上传API）
const uploadImage = async ({
  file,
  filename,
  name,
}: {
  file: Blob;
  filename: string;
  name: string;
}): Promise<any> => {
  // 模拟上传延迟
  return new Promise((resolve) => {
    setTimeout(() => {
      // 这里应该是调用真实的上传接口
      // 现在返回模拟数据
      resolve({
        url: URL.createObjectURL(file),
        filename,
      });
    }, 1000);
  });
};

// 上传成功的通用处理函数
const handleUploadSuccess = ({ data, source }: any) => {
  formData[currentUploadType.value] = source;
  ElMessage.success(t('component.cropper.uploadSuccess'));
  modalApi.close();
};

// 打开图片上传
const openImageUpload = (type: UploadType) => {
  currentUploadType.value = type;
  modalApi.open();
};
</script>

<template>
  <div>
    <ElForm :model="formData" label-width="120px">
      <!-- 图片上传区域 - 网格布局 -->
      <div class="grid grid-cols-5 gap-4">
        <!-- 油站给排水图 -->
        <div class="flex flex-col items-center">
          <div
            class="h-40 w-60 cursor-pointer overflow-hidden rounded"
            @click="openImageUpload('waterSupply')"
          >
            <img
              v-if="formData.waterSupplyImage"
              :src="formData.waterSupplyImage"
              alt="油站给排水图"
              class="h-full w-full rounded border border-gray-300 object-contain"
            />
            <div
              v-else
              class="hover:border-primary flex h-full w-full cursor-pointer items-center justify-center rounded border border-dashed border-gray-300 transition-colors"
            >
              <ElIcon
                class="hover:text-primary text-gray-400 transition-colors"
              >
                <Plus size="30" />
              </ElIcon>
            </div>
          </div>
          <span class="mt-2 text-center text-sm text-gray-600">
            油站给排水图
          </span>
        </div>

        <!-- 平日停车位设置图与站内隔离图 -->
        <div class="flex flex-col items-center">
          <div
            class="h-40 w-60 cursor-pointer overflow-hidden rounded"
            @click="openImageUpload('dailyParking')"
          >
            <img
              v-if="formData.dailyParkingImage"
              :src="formData.dailyParkingImage"
              alt="平日停车位设置图与站内隔离图"
              class="h-full w-full rounded border border-gray-300 object-contain"
            />
            <div
              v-else
              class="hover:border-primary flex h-full w-full cursor-pointer items-center justify-center rounded border border-dashed border-gray-300 transition-colors"
            >
              <ElIcon
                class="hover:text-primary text-gray-400 transition-colors"
              >
                <Plus size="30" />
              </ElIcon>
            </div>
          </div>
          <span class="mt-2 text-center text-sm text-gray-600">
            平日停车位设置图与站内隔离图
          </span>
        </div>

        <!-- 会员日停车位设置图与站内隔离图 -->
        <div class="flex flex-col items-center">
          <div
            class="h-40 w-60 cursor-pointer overflow-hidden rounded"
            @click="openImageUpload('memberDayParking')"
          >
            <img
              v-if="formData.memberDayParkingImage"
              :src="formData.memberDayParkingImage"
              alt="会员日停车位设置图与站内隔离图"
              class="h-full w-full rounded border border-gray-300 object-contain"
            />
            <div
              v-else
              class="hover:border-primary flex h-full w-full cursor-pointer items-center justify-center rounded border border-dashed border-gray-300 transition-colors"
            >
              <ElIcon
                class="hover:text-primary text-gray-400 transition-colors"
              >
                <Plus size="30" />
              </ElIcon>
            </div>
          </div>
          <span class="mt-2 text-center text-sm text-gray-600">
            会员日停车位设置图与站内隔离图
          </span>
        </div>

        <!-- 站内动线图 -->
        <div class="flex flex-col items-center">
          <div
            class="h-40 w-60 cursor-pointer overflow-hidden rounded"
            @click="openImageUpload('trafficFlow')"
          >
            <img
              v-if="formData.trafficFlowImage"
              :src="formData.trafficFlowImage"
              alt="站内动线图"
              class="h-full w-full rounded border border-gray-300 object-contain"
            />
            <div
              v-else
              class="hover:border-primary flex h-full w-full cursor-pointer items-center justify-center rounded border border-dashed border-gray-300 transition-colors"
            >
              <ElIcon
                class="hover:text-primary text-gray-400 transition-colors"
              >
                <Plus size="30" />
              </ElIcon>
            </div>
          </div>
          <span class="mt-2 text-center text-sm text-gray-600">站内动线图</span>
        </div>

        <!-- 站内海报位置图及海报尺寸 -->
        <div class="flex flex-col items-center">
          <div
            class="h-40 w-60 cursor-pointer overflow-hidden rounded"
            @click="openImageUpload('posterPosition')"
          >
            <img
              v-if="formData.posterPositionImage"
              :src="formData.posterPositionImage"
              alt="站内海报位置图及海报尺寸"
              class="h-full w-full rounded border border-gray-300 object-contain"
            />
            <div
              v-else
              class="hover:border-primary flex h-full w-full cursor-pointer items-center justify-center rounded border border-dashed border-gray-300 transition-colors"
            >
              <ElIcon
                class="hover:text-primary text-gray-400 transition-colors"
              >
                <Plus size="30" />
              </ElIcon>
            </div>
          </div>
          <span class="mt-2 text-center text-sm text-gray-600">
            站内海报位置图及海报尺寸
          </span>
        </div>
      </div>
    </ElForm>

    <!-- 裁剪模态框 -->
    <CropperModal
      :upload-api="uploadImage"
      @upload-success="handleUploadSuccess"
    />
  </div>
</template>
