<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, ElFormItem, ElIcon, ElInput, ElMessage } from 'element-plus';

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

// 表单数据
const formData = reactive({
  description: '', // 描述字段
  structureImage: '', // 油站架构图
  divisionImage: '', // 油站分工图
});

// 当前上传类型
const currentUploadType = ref<'division' | 'structure'>('structure');

// 创建裁剪模态框
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 handleStructureUploadSuccess = ({ data, source }: any) => {
  formData.structureImage = source;
  ElMessage.success(t('component.cropper.uploadSuccess'));
};

// 分工图上传成功处理
const handleDivisionUploadSuccess = ({ data, source }: any) => {
  formData.divisionImage = source;
  ElMessage.success(t('component.cropper.uploadSuccess'));
};

// 上传成功的通用处理函数
const handleUploadSuccess = ({ data, source }: any) => {
  if (currentUploadType.value === 'structure') {
    handleStructureUploadSuccess({ data, source });
  } else {
    handleDivisionUploadSuccess({ data, source });
  }
  modalApi.close();
};

// 打开架构图上传
const openStructureUpload = () => {
  currentUploadType.value = 'structure';
  modalApi.open();
};

// 打开分工图上传
const openDivisionUpload = () => {
  currentUploadType.value = 'division';
  modalApi.open();
};
</script>

<template>
  <div>
    <ElForm :model="formData" label-width="120px">
      <!-- 描述字段 -->
      <ElFormItem label="描述" prop="description">
        <ElInput
          v-model="formData.description"
          type="textarea"
          :rows="4"
          placeholder="请输入油站管理架构描述"
        />
      </ElFormItem>

      <!-- 图片上传区域 - 左右居中布局，标签在下方 -->
      <div class="flex justify-center gap-8">
        <!-- 油站架构图 -->
        <div class="flex flex-col items-center">
          <div
            class="h-36 w-48 cursor-pointer overflow-hidden rounded"
            @click="openStructureUpload"
          >
            <img
              v-if="formData.structureImage"
              :src="formData.structureImage"
              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-sm text-gray-600">油站架构图</span>
        </div>

        <!-- 油站分工图 -->
        <div class="flex flex-col items-center">
          <div
            class="h-36 w-48 cursor-pointer overflow-hidden rounded"
            @click="openDivisionUpload"
          >
            <img
              v-if="formData.divisionImage"
              :src="formData.divisionImage"
              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-sm text-gray-600">油站分工图</span>
        </div>
      </div>
    </ElForm>

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