<template>
  <div class="image-selector">
    <!-- 多图片展示区域 -->
    <div v-if="isMultiple && modelValue && getImageUrls().length > 0" class="selected-images-container">
      <div class="selected-images-grid">
        <div v-for="(imageUrl, index) in getImageUrls()" :key="index" class="selected-image-item">
          <img :src="imageUrl" :alt="`图片${index + 1}`" />
          <div class="image-overlay">
            <!-- <el-button type="primary" size="small" @click.stop="editImage(index)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button> -->
            <el-button type="danger" size="small" @click.stop="removeImage(index)">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
        <div v-if="getImageUrls().length < maxCount" class="add-image-item" @click="openImageSelector">
          <el-icon>
            <Plus />
          </el-icon>
          <span>添加图片</span>
        </div>
      </div>
    </div>

    <!-- 单图片选择按钮 -->
    <div v-else-if="!isMultiple" class="image-selector-trigger" @click="openImageSelector">
      <div v-if="modelValue" class="selected-image">
        <img :src="modelValue as string" :alt="placeholder" />
        <div class="image-overlay">
          <el-icon>
            <Edit />
          </el-icon>
          <span>更换图片</span>
        </div>
      </div>
      <div v-else class="upload-placeholder">
        <el-icon>
          <Plus />
        </el-icon>
        <span>{{ placeholder }}</span>
      </div>
    </div>

    <!-- 多图片模式下的空状态 -->
    <div v-else class="image-selector-trigger" @click="openImageSelector">
      <div class="upload-placeholder">
        <el-icon>
          <Plus />
        </el-icon>
        <span>{{ placeholder }}</span>
      </div>
    </div>

    <!-- 文件素材库选择对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isMultiple ? '选择图片（多选）' : '选择图片'"
      width="90%"
      :close-on-click-modal="false"
      class="file-selector-dialog"
      top="5vh"
      :before-close="handleClose"
      append-to-body
      :z-index="9999"
    >
      <!-- 直接嵌入文件管理页面组件 -->
      <div class="file-manager-container">
        <FileManager
          ref="fileManagerRef"
          :select-mode="true"
          :file-type="'image'"
          :multiple="isMultiple"
          @file-selected="handleFileSelected"
          @files-selected="handleFilesSelected"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="confirmSelection" :disabled="isMultiple ? selectedFiles.length === 0 : !selectedFile">
            确认选择{{ isMultiple ? `(${selectedFiles.length})` : '' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑图片"
      width="80%"
      :close-on-click-modal="false"
      class="image-edit-dialog"
      top="5vh"
      append-to-body
      :z-index="9998"
    >
      <div class="image-editor-container">
        <!-- 左侧：图片预览和编辑区域 -->
        <div class="editor-main">
          <div class="image-preview-area">
            <div class="preview-container" :style="previewContainerStyle">
              <img :src="editImageUrl" :alt="selectedFile?.name" ref="editImageRef" @load="onEditImageLoad" class="edit-image" />
              <!-- 剪切框 -->
              <div v-if="showCropBox" class="crop-box" :style="cropBoxStyle" @mousedown="startCrop">
                <div class="crop-handle crop-handle-nw" @mousedown.stop="startResize('nw')"></div>
                <div class="crop-handle crop-handle-ne" @mousedown.stop="startResize('ne')"></div>
                <div class="crop-handle crop-handle-sw" @mousedown.stop="startResize('sw')"></div>
                <div class="crop-handle crop-handle-se" @mousedown.stop="startResize('se')"></div>
              </div>
            </div>
          </div>

          <!-- 编辑工具栏 -->
          <div class="editor-toolbar">
            <el-button-group>
              <el-button size="small" @click="toggleCrop" :type="showCropBox ? 'primary' : ''">
                <el-icon>
                  <Crop />
                </el-icon>
                剪切
              </el-button>
              <el-button size="small" @click="resetCrop">
                <el-icon>
                  <Refresh />
                </el-icon>
                重置
              </el-button>
            </el-button-group>
          </div>
        </div>

        <!-- 右侧：尺寸设置面板 -->
        <div class="editor-sidebar">
          <div class="size-panel">
            <h4>尺寸设置</h4>

            <!-- 预设尺寸 -->
            <div class="preset-sizes">
              <h5>预设尺寸</h5>
              <div class="preset-buttons">
                <el-button v-for="preset in presetSizes" :key="preset.name" size="small" @click="applyPresetSize(preset)">
                  {{ preset.name }}
                </el-button>
              </div>
            </div>

            <!-- 自定义尺寸 -->
            <div class="custom-size">
              <h5>自定义尺寸</h5>
              <el-form :model="sizeForm" label-width="60px">
                <el-form-item label="宽度">
                  <el-input-number v-model="sizeForm.width" :min="1" :max="2000" @change="updatePreviewSize" />
                  <span class="unit">px</span>
                </el-form-item>
                <el-form-item label="高度">
                  <el-input-number v-model="sizeForm.height" :min="1" :max="2000" @change="updatePreviewSize" />
                  <span class="unit">px</span>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="sizeForm.maintainAspectRatio" @change="onAspectRatioChange"> 保持宽高比 </el-checkbox>
                </el-form-item>
              </el-form>
            </div>

            <!-- 剪切设置 -->
            <div v-if="showCropBox" class="crop-settings">
              <h5>剪切设置</h5>
              <el-form :model="cropForm" label-width="60px">
                <el-form-item label="X坐标">
                  <el-input-number v-model="cropForm.x" :min="0" :max="originalSize.width" @change="updateCropBox" />
                </el-form-item>
                <el-form-item label="Y坐标">
                  <el-input-number v-model="cropForm.y" :min="0" :max="originalSize.height" @change="updateCropBox" />
                </el-form-item>
                <el-form-item label="宽度">
                  <el-input-number v-model="cropForm.width" :min="1" :max="originalSize.width" @change="updateCropBox" />
                </el-form-item>
                <el-form-item label="高度">
                  <el-input-number v-model="cropForm.height" :min="1" :max="originalSize.height" @change="updateCropBox" />
                </el-form-item>
              </el-form>
            </div>

            <!-- 图片信息 -->
            <div class="image-info-panel">
              <h5>图片信息</h5>
              <div class="info-item">
                <span class="label">文件名:</span>
                <span class="value">{{ selectedFile?.name }}</span>
              </div>
              <div class="info-item">
                <span class="label">原始尺寸:</span>
                <span class="value">{{ originalSize.width }} × {{ originalSize.height }}</span>
              </div>
              <div class="info-item">
                <span class="label">目标尺寸:</span>
                <span class="value">{{ sizeForm.width }} × {{ sizeForm.height }}</span>
              </div>
              <div class="info-item">
                <span class="label">文件大小:</span>
                <span class="value">{{ formatFileSize(selectedFile?.size) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEdit"> 确认编辑</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus, Edit, Crop, Refresh, Delete } from '@element-plus/icons-vue';
import FileManager from '@/views/file/info/index.vue';

// Props
interface Props {
  modelValue?: string | Array<any>;
  placeholder?: string;
  width?: number;
  height?: number;
  maintainAspectRatio?: boolean;
  multiple?: boolean;
  maxCount?: number;
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '选择图片',
  width: 300,
  height: 200,
  maintainAspectRatio: true,
  multiple: false,
  maxCount: 6
});

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: string | Array<any>];
  'change': [
    value:
      | { url: string; width: number; height: number }
      | Array<{
          url: string;
          width: number;
          height: number;
        }>
  ];
}>();

// 响应式数据
const dialogVisible = ref(false);
const editDialogVisible = ref(false);
const selectedFile = ref<any>(null);
const selectedFiles = ref<any[]>([]);
const fileManagerRef = ref();
const editImageRef = ref<HTMLImageElement>();
const currentEditIndex = ref(-1);

// 编辑相关数据
const editImageUrl = ref('');
const originalSize = ref({ width: 0, height: 0 });
const showCropBox = ref(false);
const isDragging = ref(false);
const isResizing = ref(false);
const resizeDirection = ref('');

// 尺寸表单
const sizeForm = ref({
  width: props.width,
  height: props.height,
  maintainAspectRatio: props.maintainAspectRatio
});

// 剪切表单
const cropForm = ref({
  x: 0,
  y: 0,
  width: 0,
  height: 0
});

// 预设尺寸
const presetSizes = [
  { name: '轮播图', width: 750, height: 400 },
  { name: '金刚区', width: 80, height: 80 },
  { name: '全屏广告', width: 750, height: 1334 },
  { name: '弹窗广告', width: 600, height: 800 },
  { name: '服务区', width: 60, height: 60 },
  { name: '正方形', width: 300, height: 300 },
  { name: '横版', width: 400, height: 300 },
  { name: '竖版', width: 300, height: 400 }
];

// 计算属性
const previewContainerStyle = computed(() => ({
  width: `${sizeForm.value.width}px`,
  height: `${sizeForm.value.height}px`,
  maxWidth: '100%',
  maxHeight: '400px',
  position: 'relative' as const,
  overflow: 'hidden' as const,
  border: '1px solid #d9d9d9',
  borderRadius: '6px'
}));

const cropBoxStyle = computed(() => ({
  position: 'absolute' as const,
  left: `${cropForm.value.x}px`,
  top: `${cropForm.value.y}px`,
  width: `${cropForm.value.width}px`,
  height: `${cropForm.value.height}px`,
  border: '2px solid #409eff',
  backgroundColor: 'rgba(64, 158, 255, 0.1)',
  cursor: 'move' as const
}));

// 计算属性
const isMultiple = computed(() => props.multiple);

// 获取图片URL数组
const getImageUrls = () => {
  if (!props.modelValue) return [];
  if (typeof props.modelValue === 'string') {
    return props.modelValue.split(',').filter((url) => url.trim());
  }
  if (Array.isArray(props.modelValue)) {
    return props.modelValue.map((item) => (typeof item === 'string' ? item : item.url)).filter((url) => url);
  }
  return [];
};

// 方法
const openImageSelector = () => {
  dialogVisible.value = true;
  selectedFile.value = null;
  selectedFiles.value = [];

  // 重置FileManager组件的选择状态
  nextTick(() => {
    if (fileManagerRef.value && fileManagerRef.value.clearSelection) {
      fileManagerRef.value.clearSelection();
    }
  });
};

const handleClose = () => {
  dialogVisible.value = false;
  selectedFile.value = null;
  selectedFiles.value = [];

  // 重置FileManager组件的选择状态
  nextTick(() => {
    if (fileManagerRef.value && fileManagerRef.value.clearSelection) {
      fileManagerRef.value.clearSelection();
    }
  });
};

// 处理文件选择（单选模式）
const handleFileSelected = (file: any) => {
  if (isMultiple.value) return;

  selectedFile.value = file;
  console.log('选择的文件:', file);
};

// 处理多文件选择
const handleFilesSelected = (files: any[]) => {
  if (!isMultiple.value) return;

  selectedFiles.value = files;
  console.log('选择的文件列表:', files);
};

// 确认选择
const confirmSelection = () => {
  if (isMultiple.value) {
    if (selectedFiles.value.length === 0) {
      ElMessage.warning('请选择至少一张图片');
      return;
    }

    // 多选模式：直接处理图片，不进行裁剪
    processMultipleImages();
  } else {
    if (!selectedFile.value) {
      ElMessage.warning('请选择一张图片');
      return;
    }

    // 单选模式：直接确认选择，不进行裁剪
    processSingleImage();
  }
};

// 处理单张图片
const processSingleImage = () => {
  const file = selectedFile.value;
  const imageUrl = getImageUrl(file);

  // 创建图片对象
  const imageObj = {
    url: imageUrl,
    width: props.width,
    height: props.height,
    originalFile: file
  };

  // 单选模式：直接更新modelValue为URL字符串
  emit('update:modelValue', imageObj.url);
  emit('change', imageObj);

  dialogVisible.value = false;
  ElMessage.success('图片选择成功');
};

// 处理多张图片
const processMultipleImages = async () => {
  const processedImages: any[] = [];
  const imageUrls: string[] = [];

  for (let i = 0; i < selectedFiles.value.length; i++) {
    const file = selectedFiles.value[i];
    const imageUrl = getImageUrl(file);

    // 创建图片对象
    const imageObj = {
      url: imageUrl,
      width: props.width,
      height: props.height,
      originalFile: file
    };

    processedImages.push(imageObj);
    imageUrls.push(imageUrl);
  }

  // 更新modelValue - 将URL用逗号拼接
  const currentUrls = getImageUrls();
  const allUrls = [...currentUrls, ...imageUrls];
  const urlString = allUrls.join(',');

  emit('update:modelValue', urlString);
  emit('change', processedImages); // 传递新添加的图片列表

  dialogVisible.value = false;
  ElMessage.success(`成功添加${processedImages.length}张图片`);
};

// 编辑单张图片
const editImage = (index: number) => {
  const currentUrls = getImageUrls();
  if (index < 0 || index >= currentUrls.length) return;

  currentEditIndex.value = index;
  const imageUrl = currentUrls[index];
  editImageUrl.value = imageUrl;

  // 重置编辑状态
  showCropBox.value = false;
  sizeForm.value = {
    width: props.width,
    height: props.height,
    maintainAspectRatio: props.maintainAspectRatio
  };

  editDialogVisible.value = true;
};

// 删除图片
const removeImage = (index: number) => {
  const currentUrls = getImageUrls();
  if (index < 0 || index >= currentUrls.length) return;

  // 移除指定索引的图片
  currentUrls.splice(index, 1);

  // 将剩余的URL用逗号拼接
  const newValue = currentUrls.join(',');

  emit('update:modelValue', newValue);
  ElMessage.success('图片已删除');
};

// 获取图片URL
const getImageUrl = (file: any) => {
  if (file.url) {
    if (file.url.startsWith('http')) {
      return file.url;
    }
    return file.url;
  }
  return '';
};

// 图片加载完成
const onEditImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement;
  originalSize.value = {
    width: img.naturalWidth,
    height: img.naturalHeight
  };

  // 初始化剪切框
  cropForm.value = {
    x: 0,
    y: 0,
    width: originalSize.value.width,
    height: originalSize.value.height
  };

  // 如果还没有设置尺寸，使用原始尺寸
  if (sizeForm.value.width === props.width && sizeForm.value.height === props.height) {
    sizeForm.value.width = originalSize.value.width;
    sizeForm.value.height = originalSize.value.height;
  }
};

// 切换剪切模式
const toggleCrop = () => {
  showCropBox.value = !showCropBox.value;
};

// 重置剪切
const resetCrop = () => {
  cropForm.value = {
    x: 0,
    y: 0,
    width: originalSize.value.width,
    height: originalSize.value.height
  };
};

// 应用预设尺寸
const applyPresetSize = (preset: any) => {
  sizeForm.value.width = preset.width;
  sizeForm.value.height = preset.height;
  updatePreviewSize();
};

// 更新预览尺寸
const updatePreviewSize = () => {
  if (sizeForm.value.maintainAspectRatio && originalSize.value.width && originalSize.value.height) {
    const aspectRatio = originalSize.value.width / originalSize.value.height;

    if (sizeForm.value.width !== props.width) {
      sizeForm.value.height = Math.round(sizeForm.value.width / aspectRatio);
    } else if (sizeForm.value.height !== props.height) {
      sizeForm.value.width = Math.round(sizeForm.value.height * aspectRatio);
    }
  }
};

// 宽高比变化
const onAspectRatioChange = (checked: boolean) => {
  if (checked && originalSize.value.width && originalSize.value.height) {
    updatePreviewSize();
  }
};

// 更新剪切框
const updateCropBox = () => {
  // 确保剪切框不超出图片边界
  cropForm.value.x = Math.max(0, Math.min(cropForm.value.x, originalSize.value.width - cropForm.value.width));
  cropForm.value.y = Math.max(0, Math.min(cropForm.value.y, originalSize.value.height - cropForm.value.height));
  cropForm.value.width = Math.max(1, Math.min(cropForm.value.width, originalSize.value.width - cropForm.value.x));
  cropForm.value.height = Math.max(1, Math.min(cropForm.value.height, originalSize.value.height - cropForm.value.y));
};

// 开始剪切
const startCrop = (event: MouseEvent) => {
  if (isResizing.value) return;

  isDragging.value = true;
  const startX = event.clientX;
  const startY = event.clientY;
  const startCropX = cropForm.value.x;
  const startCropY = cropForm.value.y;

  const handleMouseMove = (e: MouseEvent) => {
    if (!isDragging.value) return;

    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    cropForm.value.x = Math.max(0, Math.min(startCropX + deltaX, originalSize.value.width - cropForm.value.width));
    cropForm.value.y = Math.max(0, Math.min(startCropY + deltaY, originalSize.value.height - cropForm.value.height));
  };

  const handleMouseUp = () => {
    isDragging.value = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
};

// 开始调整大小
const startResize = (direction: string) => {
  isResizing.value = true;
  resizeDirection.value = direction;

  const handleMouseMove = (e: MouseEvent) => {
    if (!isResizing.value) return;

    // 根据方向调整剪切框大小
    const rect = editImageRef.value?.getBoundingClientRect();
    if (!rect) return;

    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    switch (direction) {
      case 'nw':
        cropForm.value.x = Math.max(0, Math.min(mouseX, cropForm.value.x + cropForm.value.width - 1));
        cropForm.value.y = Math.max(0, Math.min(mouseY, cropForm.value.y + cropForm.value.height - 1));
        cropForm.value.width = cropForm.value.x + cropForm.value.width - cropForm.value.x;
        cropForm.value.height = cropForm.value.y + cropForm.value.height - cropForm.value.y;
        break;
      case 'ne':
        cropForm.value.y = Math.max(0, Math.min(mouseY, cropForm.value.y + cropForm.value.height - 1));
        cropForm.value.width = Math.max(1, mouseX - cropForm.value.x);
        cropForm.value.height = cropForm.value.y + cropForm.value.height - cropForm.value.y;
        break;
      case 'sw':
        cropForm.value.x = Math.max(0, Math.min(mouseX, cropForm.value.x + cropForm.value.width - 1));
        cropForm.value.width = cropForm.value.x + cropForm.value.width - cropForm.value.x;
        cropForm.value.height = Math.max(1, mouseY - cropForm.value.y);
        break;
      case 'se':
        cropForm.value.width = Math.max(1, mouseX - cropForm.value.x);
        cropForm.value.height = Math.max(1, mouseY - cropForm.value.y);
        break;
    }

    updateCropBox();
  };

  const handleMouseUp = () => {
    isResizing.value = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
};

// 确认编辑
const confirmEdit = () => {
  const result = {
    url: editImageUrl.value,
    width: sizeForm.value.width,
    height: sizeForm.value.height,
    crop: showCropBox.value ? cropForm.value : null
  };

  if (isMultiple.value && currentEditIndex.value >= 0) {
    // 多选模式：更新指定索引的图片URL
    const currentUrls = getImageUrls();
    currentUrls[currentEditIndex.value] = result.url;
    const urlString = currentUrls.join(',');
    emit('update:modelValue', urlString);
  } else {
    // 单选模式
    emit('update:modelValue', result.url);
  }

  emit('change', result);
  editDialogVisible.value = false;
  currentEditIndex.value = -1;

  ElMessage.success('图片编辑成功');
};

// 格式化文件大小
const formatFileSize = (size: number) => {
  if (!size) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB'];
  let index = 0;
  let fileSize = size;
  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024;
    index++;
  }
  return fileSize.toFixed(2) + ' ' + units[index];
};
</script>

<style scoped>
.image-selector {
  display: inline-block;
}

.image-selector-trigger {
  cursor: pointer;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  transition: border-color 0.3s;
  background: #fafafa;
}

.image-selector-trigger:hover {
  border-color: #409eff;
}

.selected-image {
  position: relative;
  display: inline-block;
}

.selected-image img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 4px;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 4px;
}

.selected-image:hover .image-overlay {
  opacity: 1;
}

.upload-placeholder {
  color: #909399;
}

.upload-placeholder .el-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

/* 文件选择器对话框样式 */
.file-selector-dialog :deep(.el-dialog__body) {
  padding: 0;
  height: 80vh;
  overflow: visible;
}

.file-manager-container {
  height: 100%;
  overflow: visible;
}

/* 图片编辑对话框样式 */
.image-edit-dialog :deep(.el-dialog__body) {
  padding: 20px;
  height: 80vh;
  overflow: visible;
}

.image-editor-container {
  display: flex;
  height: 100%;
  gap: 20px;
}

.editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.image-preview-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 6px;
  margin-bottom: 15px;
}

.preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.edit-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.crop-box {
  position: absolute;
  border: 2px solid #409eff;
  background: rgba(64, 158, 255, 0.1);
  cursor: move;
}

.crop-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #409eff;
  border: 1px solid white;
  border-radius: 50%;
}

.crop-handle-nw {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}

.crop-handle-ne {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}

.crop-handle-sw {
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}

.crop-handle-se {
  bottom: -4px;
  right: -4px;
  cursor: se-resize;
}

.editor-toolbar {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.editor-sidebar {
  width: 300px;
  background: #fafafa;
  border-radius: 6px;
  padding: 15px;
  overflow-y: auto;
}

.size-panel h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.size-panel h5 {
  margin: 15px 0 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.preset-sizes {
  margin-bottom: 20px;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-size {
  margin-bottom: 20px;
}

.unit {
  margin-left: 8px;
  color: #909399;
}

.crop-settings {
  margin-bottom: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.image-info-panel {
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.info-item .label {
  color: #909399;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

.dialog-footer {
  text-align: right;
}

/* 多图片展示样式 */
.selected-images-container {
  margin-bottom: 16px;
}

.selected-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-width: 100%;
}

.selected-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}

.selected-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selected-image-item .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.selected-image-item:hover .image-overlay {
  opacity: 1;
}

.add-image-item {
  aspect-ratio: 1;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s;
  background: #fafafa;
  color: #909399;
}

.add-image-item:hover {
  border-color: #409eff;
  color: #409eff;
}

.add-image-item .el-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.add-image-item span {
  font-size: 12px;
}
</style>
