<template>
  <div class="facility-management-container">
    <!-- 空状态：没有区域数据时 -->
    <div v-if="facilityAreas.length === 0" class="empty-page-state">
      <el-empty description="暂无数据" />
      <el-button type="primary" :loading="saving" @click="openCreateAreaDialog"> 新建区域 </el-button>
    </div>

    <template v-else>
      <!-- 区域选择与操作（标签样式 + 下拉菜单） -->
      <div class="header-section">
        <div class="area-tabs">
          <div
            v-for="(area, index) in facilityAreas"
            :key="area.id"
            class="area-tab-item"
            :class="{ active: activeTab === index }"
            @click="
              activeTab = index;
              handleAreaChange();
            "
          >
            <span class="tab-text">{{ area.facilityAreaName || area.areaName }}</span>
          </div>
          <el-dropdown trigger="click" class="area-dropdown">
            <span class="dropdown-trigger">
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openEditAreaDialog">
                  <span class="dropdown-item-edit">编辑</span>
                </el-dropdown-item>
                <el-dropdown-item @click="openDeleteAreaDialog">
                  <span class="dropdown-item-delete">删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-button type="primary" @click="openCreateAreaDialog"> 新建区域 </el-button>
      </div>

      <!-- 添加实景图片 -->
      <div class="image-upload-section">
        <div class="section-header">
          <span class="section-title">添加实景图片</span>
          <el-button type="primary" link @click="openImageUpload"> 上传 </el-button>
        </div>
        <div class="panorama-list">
          <div v-if="panoramaImages.length > 0" class="panorama-images">
            <div v-for="(img, idx) in panoramaImages" :key="idx" class="panorama-item" @click="previewImage(img)">
              <el-image :src="img" fit="cover" class="panorama-img" />
            </div>
          </div>
          <div class="upload-trigger" @click="openImageUpload">
            <el-icon><Plus /></el-icon>
            <span>上传图片 ({{ panoramaImages.length }}/20)</span>
          </div>
        </div>
        <div v-if="panoramaImages.length > 0" class="image-actions">
          <el-button @click="handleRemoveAllImages"> 删除 </el-button>
          <el-button type="primary" :loading="saving" @click="handleSaveImages"> 保存 </el-button>
        </div>
      </div>

      <!-- 设施列表 -->
      <div class="facility-list-section">
        <div class="section-header">
          <span class="section-title">设施列表</span>
          <div class="add-hint">
            <el-button type="primary" @click="openCreateFacilityDialog"> 新增 </el-button>
            <span class="hint-text">(点击弹窗, 超过10条可滑动)</span>
          </div>
        </div>
        <el-table :data="facilityList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column label="图片" width="100" align="center">
            <template #default="{ row }">
              <el-image
                v-if="row.equipmentImage || row.imgUrl"
                :src="row.equipmentImage || row.imgUrl"
                fit="cover"
                class="facility-thumb"
                :preview-src-list="[row.equipmentImage || row.imgUrl]"
              >
                <template #error>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div v-else class="image-placeholder">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="facilityName" label="名称" min-width="120">
            <template #default="{ row }">
              {{ row.equipmentName || row.facilityName }}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="100" align="center">
            <template #default="{ row }">
              {{ row.equipmentNums ?? row.quantity ?? 0 }}
            </template>
          </el-table-column>
          <el-table-column label="是否显示" width="100" align="center">
            <template #default="{ row }">
              {{ row.displayInStoreDetail == 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="editFacility(row)"> 编辑 </el-button>
              <el-button type="primary" link @click="deleteFacility(row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>

    <!-- 新建/编辑区域弹窗 -->
    <el-dialog v-model="areaDialogVisible" :title="areaDialogTitle" width="400px" @close="resetAreaForm">
      <el-form ref="areaFormRef" :model="areaFormData" :rules="areaRules" label-width="0">
        <el-form-item prop="name">
          <el-input v-model="areaFormData.name" placeholder="请输入区域名称" maxlength="20" show-word-limit clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="areaDialogVisible = false"> 取消 </el-button>
        <el-button type="primary" :loading="saving" @click="submitAreaForm"> 确定 </el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑设施弹窗 -->
    <el-dialog v-model="facilityDialogVisible" :title="facilityDialogTitle" width="400px" @close="resetFacilityForm">
      <el-form ref="facilityFormRef" :model="facilityFormData" :rules="facilityRules" label-width="120px">
        <el-form-item label="名称*" prop="name">
          <el-input v-model="facilityFormData.name" placeholder="请输入" maxlength="50" clearable />
        </el-form-item>
        <el-form-item label="数量*" prop="quantity">
          <el-input-number v-model="facilityFormData.quantity" :min="1" :max="99" style="width: 100%" />
        </el-form-item>
        <el-form-item label="图片*" prop="imageUrl">
          <UploadImg
            v-model:image-url="facilityFormData.imageUrl"
            :width="'120px'"
            :height="'120px'"
            :file-size="20"
            :api="formData => uploadFormDataToOss(formData, 'image')"
            :file-type="['image/jpeg', 'image/png', 'image/gif', 'image/webp']"
          />
        </el-form-item>
        <el-form-item label="显示在店铺详情" prop="showInDetail">
          <el-radio-group v-model="facilityFormData.showInDetail">
            <el-radio :label="1"> 显示 </el-radio>
            <el-radio :label="0"> 隐藏 </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="facilityDialogVisible = false"> 取消 </el-button>
        <el-button type="primary" :loading="saving" @click="submitFacilityForm"> 确定 </el-button>
      </template>
    </el-dialog>

    <!-- 删除区域弹窗 -->
    <el-dialog v-model="deleteAreaDialogVisible" title="请选择需要删除的区域" width="400px">
      <el-checkbox-group v-model="selectedAreaIds">
        <div v-for="area in facilityAreas" :key="area.id" class="delete-item">
          <el-checkbox :label="area.id">
            {{ area.facilityAreaName || area.areaName }}
          </el-checkbox>
        </div>
      </el-checkbox-group>
      <template #footer>
        <el-button @click="deleteAreaDialogVisible = false"> 取消 </el-button>
        <el-button type="primary" :loading="saving" @click="confirmDeleteAreas"> 确定 </el-button>
      </template>
    </el-dialog>

    <!-- 实景图片上传弹窗 -->
    <el-dialog v-model="imageUploadDialogVisible" title="上传图片" width="600px" @close="resetImageUpload">
      <div class="panorama-upload-dialog">
        <el-upload
          v-model:file-list="tempPanoramaFileList"
          action="#"
          list-type="picture-card"
          :limit="20"
          :on-preview="handlePanoramaPreview"
          :on-remove="handlePanoramaRemove"
          :before-upload="beforePanoramaUpload"
          :http-request="handlePanoramaHttpUpload"
          accept="image/*"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <div class="upload-tip">上传图片 ({{ tempPanoramaFileList.length }}/20)</div>
      </div>
      <template #footer>
        <el-button @click="imageUploadDialogVisible = false"> 取消 </el-button>
        <el-button type="primary" :loading="saving" @click="confirmImageUpload"> 确定 </el-button>
      </template>
    </el-dialog>

    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imageViewerVisible"
      :url-list="imageViewerUrlList"
      :initial-index="imageViewerInitialIndex"
      @close="imageViewerVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules, UploadRequestOptions, UploadUserFile } from "element-plus";
import { Plus, Picture, Delete, ArrowDown } from "@element-plus/icons-vue";
import UploadImg from "@/components/Upload/Img.vue";
import { localGet } from "@/utils";
import { uploadFileToOss, uploadFormDataToOss } from "@/api/upload.js";
import {
  getSportsFacilityAreaList,
  createSportsFacilityArea,
  updateSportsFacilityArea,
  updateSportsFacilityAreaHeadUrl,
  batchDeleteSportsFacilityArea,
  getSportsEquipmentFacilityListByArea,
  saveSportsEquipmentFacility,
  updateSportsEquipmentFacility,
  deleteSportsEquipmentFacility
} from "@/api/modules/storeDecoration";

// 区域类型
interface FacilityArea {
  id: number;
  areaName?: string;
  facilityAreaName?: string;
  areaHeadUrl?: string;
}

// 设施类型（与商家端一致）
interface FacilityItem {
  id: number;
  areaId?: number;
  equipmentName?: string;
  facilityName?: string;
  equipmentNums?: number;
  quantity?: number;
  equipmentImage?: string;
  imgUrl?: string;
  displayInStoreDetail?: number;
}

const storeId = ref<number | null>(null);
const facilityAreas = ref<FacilityArea[]>([]);
const activeTab = ref(0);
const facilityList = ref<FacilityItem[]>([]);
const panoramaImages = ref<string[]>([]);
const saving = ref(false);

// 区域弹窗
const areaDialogVisible = ref(false);
const areaFormRef = ref<FormInstance>();
const areaFormData = reactive({ name: "" });
const areaRules: FormRules = { name: [{ required: true, message: "请输入区域名称", trigger: "blur" }] };
const isEditingArea = ref(false);
const editingAreaId = ref<number | null>(null);
const areaDialogTitle = computed(() => (isEditingArea.value ? "编辑" : "新建") + "区域");

// 设施弹窗
const facilityDialogVisible = ref(false);
const facilityFormRef = ref<FormInstance>();
const facilityFormData = reactive({
  name: "",
  quantity: 1,
  imageUrl: "",
  showInDetail: 1
});
const facilityRules: FormRules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  imageUrl: [{ required: true, message: "请上传图片", trigger: "change" }]
};
const isEditingFacility = ref(false);
const editingFacilityId = ref<number | null>(null);
const facilityDialogTitle = computed(() => (isEditingFacility.value ? "编辑" : "新增"));

// 删除区域弹窗
const deleteAreaDialogVisible = ref(false);
const selectedAreaIds = ref<(string | number)[]>([]);

// 实景图片上传
const imageUploadDialogVisible = ref(false);
const tempPanoramaFileList = ref<UploadUserFile[]>([]);

// 图片预览
const imageViewerVisible = ref(false);
const imageViewerUrlList = ref<string[]>([]);
const imageViewerInitialIndex = ref(0);

// 当前区域
const currentArea = computed(() => facilityAreas.value[activeTab.value]);

// 获取区域列表
const fetchFacilityAreas = async () => {
  if (!storeId.value) return;
  try {
    const res: any = await getSportsFacilityAreaList({ storeId: storeId.value });
    if (res?.code === 200 && res?.data) {
      facilityAreas.value = (res.data || []).map((a: any) => ({
        ...a,
        facilityAreaName: a.areaName ?? a.facilityAreaName
      }));
      if (facilityAreas.value.length > 0 && activeTab.value >= facilityAreas.value.length) {
        activeTab.value = 0;
      }
    } else {
      facilityAreas.value = [];
    }
  } catch (e) {
    console.error("获取设施区域列表失败:", e);
    facilityAreas.value = [];
  }
};

// 获取设施列表
const fetchFacilityList = async () => {
  if (!storeId.value || !currentArea.value) {
    facilityList.value = [];
    return;
  }
  try {
    const res: any = await getSportsEquipmentFacilityListByArea({
      storeId: storeId.value,
      areaId: currentArea.value.id
    });
    if (res?.code === 200 && res?.data) {
      facilityList.value = (res.data || []).map((item: any) => ({
        ...item,
        areaId: currentArea.value.id
      }));
    } else {
      facilityList.value = [];
    }
  } catch (e) {
    console.error("获取设施列表失败:", e);
    facilityList.value = [];
  }
};

// 获取实景图片
const fetchPanoramaImages = () => {
  if (!currentArea.value) {
    panoramaImages.value = [];
    return;
  }
  const url = currentArea.value.areaHeadUrl;
  if (url) {
    panoramaImages.value = url
      .split(",")
      .map(s => s.trim())
      .filter(Boolean);
  } else {
    panoramaImages.value = [];
  }
};

// 切换区域
const handleAreaChange = () => {
  fetchFacilityList();
  fetchPanoramaImages();
};

// 新建区域
const openCreateAreaDialog = () => {
  isEditingArea.value = false;
  editingAreaId.value = null;
  areaFormData.name = "";
  areaDialogVisible.value = true;
};

// 编辑区域
const openEditAreaDialog = () => {
  if (!currentArea.value) return;
  isEditingArea.value = true;
  editingAreaId.value = currentArea.value.id;
  areaFormData.name = currentArea.value.facilityAreaName || currentArea.value.areaName || "";
  areaDialogVisible.value = true;
};

// 提交区域表单
const submitAreaForm = async () => {
  if (!areaFormRef.value) return;
  try {
    await areaFormRef.value.validate();
  } catch {
    return;
  }
  if (!storeId.value) {
    ElMessage.error("未找到店铺ID");
    return;
  }
  saving.value = true;
  try {
    let res: any;
    if (isEditingArea.value && editingAreaId.value) {
      res = await updateSportsFacilityArea({
        areaId: editingAreaId.value,
        areaName: areaFormData.name.trim()
      });
    } else {
      res = await createSportsFacilityArea({
        storeId: storeId.value,
        facilityCategoryName: areaFormData.name.trim()
      });
    }
    if (res?.code === 200) {
      ElMessage.success(isEditingArea.value ? "编辑成功" : "新增成功");
      areaDialogVisible.value = false;
      await fetchFacilityAreas();
      if (!isEditingArea.value) {
        activeTab.value = 0;
      }
      fetchFacilityList();
      fetchPanoramaImages();
    } else {
      ElMessage.error(res?.msg || "操作失败");
    }
  } catch (e) {
    console.error("提交区域失败:", e);
    ElMessage.error("操作失败");
  } finally {
    saving.value = false;
  }
};

// 删除区域弹窗
const openDeleteAreaDialog = () => {
  selectedAreaIds.value = [];
  deleteAreaDialogVisible.value = true;
};

// 确认删除区域
const confirmDeleteAreas = async () => {
  if (selectedAreaIds.value.length === 0) {
    ElMessage.warning("请选择要删除的区域");
    return;
  }
  if (!storeId.value) return;
  saving.value = true;
  try {
    const res: any = await batchDeleteSportsFacilityArea({
      storeId: storeId.value,
      areaIds: selectedAreaIds.value
    });
    if (res?.code === 200) {
      ElMessage.success(`成功删除${selectedAreaIds.value.length}个区域`);
      deleteAreaDialogVisible.value = false;
      await fetchFacilityAreas();
      if (activeTab.value >= facilityAreas.value.length) {
        activeTab.value = Math.max(0, facilityAreas.value.length - 1);
      }
      fetchFacilityList();
      fetchPanoramaImages();
    } else {
      ElMessage.error(res?.msg || "删除失败");
    }
  } catch (e) {
    console.error("删除区域失败:", e);
    ElMessage.error("删除失败");
  } finally {
    saving.value = false;
  }
};

// 实景图片上传
const openImageUpload = () => {
  if (!currentArea.value) {
    ElMessage.warning("请先选择区域");
    return;
  }
  tempPanoramaFileList.value = panoramaImages.value.map((url, i) => ({
    uid: Date.now() + i,
    name: `img-${i}`,
    status: "success",
    url
  })) as UploadUserFile[];
  imageUploadDialogVisible.value = true;
};

const beforePanoramaUpload = (file: File) => {
  const isImage = file.type.startsWith("image/");
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isImage) {
    ElMessage.error("只能上传图片文件");
    return false;
  }
  if (!isLt10M) {
    ElMessage.error("图片大小不能超过10MB");
    return false;
  }
  return true;
};

const handlePanoramaHttpUpload = async (options: UploadRequestOptions) => {
  const rawFile = (options.file as any).raw || options.file;
  if (!rawFile) {
    options.onError(new Error("文件不存在") as any);
    return;
  }
  try {
    const fileUrl = await uploadFileToOss(rawFile, "image");
    // el-upload 列表项可能是 options.file（包装对象）或 raw，需同时设置 url 到列表项
    const listItem = tempPanoramaFileList.value.find(f => (f as any).raw === rawFile || (f as any) === rawFile);
    if (listItem) {
      (listItem as any).url = fileUrl;
      (listItem as any).status = "success";
    }
    (options.file as any).url = fileUrl;
    (options.file as any).status = "success";
    (options.file as any).response = { data: { fileUrl } };
    options.onSuccess({ data: { fileUrl } });
  } catch (e) {
    options.onError(e as any);
  }
};

const handlePanoramaPreview = (file: UploadUserFile) => {
  if (file.url) {
    imageViewerUrlList.value = tempPanoramaFileList.value.map(f => f.url).filter(Boolean) as string[];
    imageViewerInitialIndex.value = imageViewerUrlList.value.indexOf(file.url);
    imageViewerVisible.value = true;
  }
};

const handlePanoramaRemove = () => {
  // 删除由 el-upload 自动处理，无需额外逻辑
};

const confirmImageUpload = async () => {
  if (!currentArea.value || !storeId.value) return;
  const urls = tempPanoramaFileList.value.map(f => f.url).filter((u): u is string => !!u && u.startsWith("http"));
  try {
    saving.value = true;
    const res: any = await updateSportsFacilityAreaHeadUrl({
      areaId: currentArea.value.id,
      areaHeadUrl: urls.join(",")
    });
    if (res?.code === 200) {
      panoramaImages.value = urls;
      if (currentArea.value) currentArea.value.areaHeadUrl = urls.join(",");
      ElMessage.success("保存成功");
      imageUploadDialogVisible.value = false;
    } else {
      ElMessage.error(res?.msg || "保存失败");
    }
  } catch (e) {
    console.error("保存实景图片失败:", e);
    ElMessage.error("保存失败");
  } finally {
    saving.value = false;
  }
};

const handleRemoveAllImages = async () => {
  if (!currentArea.value) return;
  try {
    saving.value = true;
    const res: any = await updateSportsFacilityAreaHeadUrl({
      areaId: currentArea.value.id,
      areaHeadUrl: ""
    });
    if (res?.code === 200) {
      panoramaImages.value = [];
      if (currentArea.value) currentArea.value.areaHeadUrl = "";
      ElMessage.success("删除成功");
    } else {
      ElMessage.error(res?.msg || "删除失败");
    }
  } catch (e) {
    console.error("删除图片失败:", e);
    ElMessage.error("删除失败");
  } finally {
    saving.value = false;
  }
};
const handleSaveImages = () => {
  if (!currentArea.value) return;
  openImageUpload();
};

const resetImageUpload = () => {
  tempPanoramaFileList.value = [];
};

const previewImage = (url: string) => {
  imageViewerUrlList.value = panoramaImages.value;
  imageViewerInitialIndex.value = panoramaImages.value.indexOf(url);
  imageViewerVisible.value = true;
};

// 设施 CRUD
const openCreateFacilityDialog = () => {
  if (!currentArea.value) {
    ElMessage.warning("请先选择区域");
    return;
  }
  isEditingFacility.value = false;
  editingFacilityId.value = null;
  facilityFormData.name = "";
  facilityFormData.quantity = 1;
  facilityFormData.imageUrl = "";
  facilityFormData.showInDetail = 1;
  facilityDialogVisible.value = true;
};

const editFacility = (item: FacilityItem) => {
  isEditingFacility.value = true;
  editingFacilityId.value = item.id;
  facilityFormData.name = item.equipmentName || item.facilityName || "";
  facilityFormData.quantity = item.equipmentNums ?? item.quantity ?? 1;
  facilityFormData.imageUrl = item.equipmentImage || item.imgUrl || "";
  facilityFormData.showInDetail = item.displayInStoreDetail ?? 1;
  facilityDialogVisible.value = true;
};

const submitFacilityForm = async () => {
  if (!facilityFormRef.value) return;
  try {
    await facilityFormRef.value.validate();
  } catch {
    return;
  }
  if (!storeId.value || !currentArea.value) {
    ElMessage.error("未找到店铺或区域");
    return;
  }
  saving.value = true;
  try {
    const params: any = {
      storeId: storeId.value,
      areaId: currentArea.value.id,
      equipmentName: facilityFormData.name.trim(),
      equipmentNums: facilityFormData.quantity,
      equipmentImage: facilityFormData.imageUrl,
      displayInStoreDetail: facilityFormData.showInDetail
    };
    let res: any;
    if (isEditingFacility.value && editingFacilityId.value) {
      params.equipmentId = editingFacilityId.value;
      res = await updateSportsEquipmentFacility(params);
    } else {
      res = await saveSportsEquipmentFacility(params);
    }
    if (res?.code === 200) {
      ElMessage.success(isEditingFacility.value ? "编辑成功" : "添加成功");
      facilityDialogVisible.value = false;
      await fetchFacilityList();
    } else {
      ElMessage.error(res?.msg || "操作失败");
    }
  } catch (e) {
    console.error("提交设施失败:", e);
    ElMessage.error("操作失败");
  } finally {
    saving.value = false;
  }
};

const deleteFacility = async (item: FacilityItem) => {
  try {
    await ElMessageBox.confirm("确定删除该设施？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });
  } catch {
    return;
  }
  try {
    const res: any = await deleteSportsEquipmentFacility({ equipmentId: item.id });
    if (res?.code === 200) {
      ElMessage.success("删除成功");
      await fetchFacilityList();
    } else {
      ElMessage.error(res?.msg || "删除失败");
    }
  } catch (e) {
    console.error("删除设施失败:", e);
    ElMessage.error("删除失败");
  }
};

const resetAreaForm = () => {
  areaFormData.name = "";
  areaFormRef.value?.clearValidate();
};
const resetFacilityForm = () => {
  facilityFormData.name = "";
  facilityFormData.quantity = 1;
  facilityFormData.imageUrl = "";
  facilityFormData.showInDetail = 1;
  facilityFormRef.value?.clearValidate();
};

onMounted(async () => {
  const userInfo: any = localGet("geeker-user")?.userInfo || {};
  storeId.value = userInfo.storeId ? Number(userInfo.storeId) : null;
  if (!storeId.value) {
    ElMessage.warning("未找到店铺ID");
    return;
  }
  await fetchFacilityAreas();
  if (facilityAreas.value.length > 0) {
    await fetchFacilityList();
    fetchPanoramaImages();
  }
});
</script>

<style scoped lang="scss">
.facility-management-container {
  .empty-page-state {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 60px 0;
  }
  .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .area-tabs {
      display: flex;
      gap: 8px;
      align-items: center;
      .area-tab-item {
        position: relative;
        padding: 8px 12px;
        cursor: pointer;
        .tab-text {
          font-size: 16px;
          font-weight: 500;
          color: #334154;
        }
        &.active .tab-text {
          font-weight: 600;
          color: #334154;
        }
        .tab-underline {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 24px;
          height: 4px;
          background: var(--el-color-primary);
          border-radius: 2px;
          transform: translateX(-50%);
        }
      }
      .area-dropdown {
        margin-left: 4px;
        .dropdown-trigger {
          display: inline-flex;
          align-items: center;
          padding: 4px;
          color: #909399;
          cursor: pointer;
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
  .image-upload-section {
    padding: 20px;
    margin-bottom: 20px;
    background: var(--el-bg-color-page);
    border-radius: 8px;
    .section-header {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
      .section-title {
        font-size: 16px;
        font-weight: 500;
      }
    }
    .panorama-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      .panorama-images {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      .panorama-item {
        width: 120px;
        height: 90px;
        overflow: hidden;
        cursor: pointer;
        border-radius: 8px;
        .panorama-img {
          width: 100%;
          height: 100%;
        }
      }
      .upload-trigger {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 90px;
        color: var(--el-text-color-placeholder);
        cursor: pointer;
        border: 2px dashed var(--el-border-color);
        border-radius: 8px;
        &:hover {
          color: var(--el-color-primary);
          border-color: var(--el-color-primary);
        }
      }
    }
    .image-actions {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }
  }
  .facility-list-section {
    .section-header {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
      .section-title {
        font-size: 16px;
        font-weight: 500;
      }
      .add-hint {
        display: flex;
        gap: 8px;
        align-items: center;
        .hint-text {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
    .facility-thumb {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }
    .image-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      color: var(--el-text-color-placeholder);
      background: var(--el-fill-color-light);
      border-radius: 4px;
    }
  }
  .delete-item {
    padding: 8px 0;
  }
}
.panorama-upload-dialog {
  .upload-tip {
    margin-top: 8px;
    font-size: 12px;
    color: var(--el-text-color-secondary);
    text-align: center;
  }
  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 120px;
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 120px;
    height: 120px;
  }
}
</style>
