<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmartCabinetDetailApi, type SmartCabinetDTO, getBalanceEnableText, deleteSmartCabinet } from "@/api/cabinet/smart-cabinet";
import { CabinetCellQuery, changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { CabinetImgMap } from "@/utils/cabinetImgMap";
import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal.vue";
import ShopConfigModal from "@/views/cabinet/smart-cabinet/ShopConfigModal.vue";
import MainCabinetConfigModal from "@/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue";
import CabinetGoodsConfigModal from "@/views/shop/cabinet-goods/cabinet-goods-config-modal.vue";
import ConfiguredGoodsModal from "./configured-goods-modal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
import EditPen from "@iconify-icons/ep/edit-pen";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import CellFormModal from "@/views/cabinet/cabinet-cell/cell-form-modal.vue";
import CellEditModal from "@/views/cabinet/cabinet-cell/cell-edit-modal.vue";
import { getGoodsInfo } from "@/api/shop/goods";
import EditCabinetDrawer from "./edit-cabinet-drawer.vue";
import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard } from "@/api/cabinet/mainboards";
import { getShopById, ShopDTO, getModeText } from "@/api/shop/shop";
import { useBtnPermissionStore } from "@/store/modules/btnPermission";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { modeToPaymentMethodMap, paymentMethodOptions } from "@/utils/maps/payment";

defineOptions({
  name: "SmartCabinetDetail"
});

const router = useRouter();
const route = useRoute();
const { hasPermission } = useBtnPermissionStore();
const currentCell = ref<CabinetCellDTO>();
const cabinetInfo = ref<SmartCabinetDTO>({
  cabinetName: "",
  cabinetType: 0,
  templateNo: "",
  lockControlNo: 0,
  location: 0
});
const shopInfo = ref<ShopDTO>({
  shopId: 0,
  shopName: "",
  corpid: '',
  /** 封面图URL */
  coverImg: '',
  /** 归属类型（0-借还柜 1-固资通） */
  belongType: 0,
  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
  mode: -1,
  /** 借呗支付（1-正常使用 0-禁止使用） */
  balanceEnable: 1,
});
const loading = ref(false);
const activeTab = ref('cells');
const mainboardList = ref<CabinetMainboardDTO[]>([]);
const mainboardPagination = ref({
  pageSize: 5,
  currentPage: 1,
  total: 0
});
const cabinetId = ref<number>(0);
const gatewayConfigVisible = ref(false);
const shopConfigVisible = ref(false);
const mainCabinetConfigVisible = ref(false);
const editCabinetDrawerVisible = ref(false);
const cellList = ref<CabinetCellDTO[]>([]);
const searchCellParams = ref<CabinetCellQuery>({
  goodsName: null
});
const cellPagination = ref({
  pageSize: 18,
  currentPage: 1,
  total: 0
});
const goodsConfigVisible = ref(false);
const configuredGoodsVisible = ref(false);
const currentCellId = ref<number>();
const cellFormVisible = ref(false);
const cellEditVisible = ref(false);

const currentPaymentMethods = computed(() => {
  if (typeof shopInfo.value.mode !== 'number') return [];
  const methodValues = modeToPaymentMethodMap[shopInfo.value.mode] || [];
  return methodValues.map(value => {
    const option = paymentMethodOptions.find(item => item.value === value);
    return option ? { label: option.label, type: option.type } : null;
  }).filter(Boolean);
});

function handleConfigure(row: CabinetCellDTO) {
  if (row.goodsId) {
    currentCell.value = row;
    configuredGoodsVisible.value = true;
  } else {
    if (shopInfo.value && shopInfo.value.shopId) {
      currentCellId.value = row.cellId;
      goodsConfigVisible.value = true;
    } else {
      ElMessage.error('请先配置机柜所属地址！');
    }
  }
}

async function handleStockConfig(row: CabinetCellDTO) {
  try {
    const { data } = await getGoodsInfo(row.goodsId!);
    const remainingStock = data.stock - data.totalStock + row.stock;

    const { value } = await ElMessageBox.prompt(
      `请输入${row.goodsName || '未配置商品'}的库存数量（本次最多可分配：${remainingStock}）。\n      若可分配数量不足，请先调整商品列表中的库存。`,
      '配置库存',
      {
        inputPattern: /^0$|^[1-9]\d*$/,
        inputValue: row.stock?.toString(),
        inputErrorMessage: '请输入有效的非负整数',
        inputValidator: (inputValue: string) => {
          const num = Number(inputValue);
          if (num > remainingStock) {
            return '分配数量不能超过剩余库存';
          }
          return true;
        }
      }
    );

    if (Number(value) > remainingStock) {
      ElMessage.warning('分配数量不能超过剩余库存');
      return;
    }

    await changeGoodsCellsStock(row.cellId!, Number(value));
    ElMessage.success('库存更新成功');
    fetchCellList();
  } catch (error) {
    console.error('库存配置取消或失败', error);
  }
}

async function handleClearGoods(row: CabinetCellDTO) {
  try {
    await ElMessageBox.confirm(
      `确认要下架${row.goodsName || '未配置商品'}吗？`,
      '警告',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
    );
    await clearGoodsCells(row.cellId!);
    ElMessage.success('商品下架成功');
    fetchCellList();
  } catch (error) {
    console.error('操作取消或失败', error);
  }
}

function handleEditCell(row: CabinetCellDTO) {
  currentCell.value = row;
  cellEditVisible.value = true;
}

async function fetchCabinetDetail() {
  try {
    loading.value = true;
    const { data } = await getSmartCabinetDetailApi(cabinetId.value);
    cabinetInfo.value = data;
    // 获取关联商店信息
    if (cabinetInfo.value.shopId) {
      const { data: shopData } = await getShopById(cabinetInfo.value.shopId);
      shopInfo.value = shopData;
    }
  } finally {
    loading.value = false;
  }
}

function switchCellType(cellType: number) {
  switch (cellType) {
    case 1: return '小格';
    case 2: return '中格';
    case 3: return '大格';
    case 4: return '超大格';
    default: return '未知';
  }
}

function resetCellSearch() {
  searchCellParams.value.cellNo = null;
  fetchCellList();
}

async function fetchCellList() {
  try {
    loading.value = true;
    const { data } = await getCabinetCellList({
      cabinetId: cabinetId.value,
      goodsName: searchCellParams.value.goodsName,
      pageSize: cellPagination.value.pageSize,
      pageNum: cellPagination.value.currentPage
    });
    cellList.value = data.rows;
    cellPagination.value.total = data.total;
  } finally {
    loading.value = false;
  }
}

function handleCellSizeChange(val: number) {
  cellPagination.value.pageSize = val;
  fetchCellList();
}

function handleCellPageChange(val: number) {
  cellPagination.value.currentPage = val;
  fetchCellList();
}

async function fetchMainboardList() {
  try {
    loading.value = true;
    const { data } = await getMainboardList({
      cabinetId: cabinetId.value,
      pageSize: mainboardPagination.value.pageSize,
      pageNum: mainboardPagination.value.currentPage
    });
    mainboardList.value = data.rows;
    mainboardPagination.value.total = data.total;
  } finally {
    loading.value = false;
  }
}

function handleMainboardSizeChange(val: number) {
  mainboardPagination.value.pageSize = val;
  fetchMainboardList();
}

function handleMainboardPageChange(val: number) {
  mainboardPagination.value.currentPage = val;
  fetchMainboardList();
}

async function handleEditMainboard(row: CabinetMainboardDTO) {
  try {
    const { value } = await ElMessageBox.prompt(
      '请输入锁控板序号',
      '编辑主板',
      {
        inputPattern: /^\d+$/,
        inputValue: row.lockControlNo.toString(),
        inputErrorMessage: '请输入有效的数字'
      }
    );
    await updateMainboard(row.mainboardId!, {
      mainboardId: row.mainboardId,
      lockControlNo: Number(value)
    });
    ElMessage.success('主板更新成功');
    fetchMainboardList();
  } catch (error) {
    console.error('操作取消或失败', error);
  }
}

async function handleDeleteMainboard(row: CabinetMainboardDTO) {
  try {
    await ElMessageBox.confirm(
      '确认要删除该主板吗？',
      '警告',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
    );
    await deleteMainboard(row.mainboardId!.toString());
    ElMessage.success('主板删除成功');
    fetchMainboardList();
  } catch (error) {
    console.error('操作取消或失败', error);
  }
}

async function handleDeleteCabinet() {
  try {
    await ElMessageBox.confirm(
      `确认要删除柜体「${cabinetInfo.value.cabinetName}」吗？此操作将不可恢复。`,
      '删除柜体',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
    );
    await deleteSmartCabinet(cabinetId.value.toString());
    ElMessage.success('柜体删除成功');
    // 返回列表页面
    router.push('/cabinet/smart-cabinet-card/index');
  } catch (error) {
    console.error('操作取消或失败', error);
  }
}


const handleAb98ViewDetail = (ab98UserId: number, name: string) => {
  // 保存信息到标签页
  useMultiTagsStoreHook().handleTags("push", {
    path: `/user/ab98/detail`,
    name: "ab98Detail",
    query: { id: ab98UserId },
    meta: {
      title: `${name}`,
      dynamicLevel: 3
    }
  });
  router.push({
    path: '/user/ab98/detail',
    query: {
      id: ab98UserId
    }
  });
};

onMounted(() => {
  cabinetId.value = Number(route.query.id);
  fetchCabinetDetail();
  fetchCellList();
  fetchMainboardList();
});
</script>

<template>
  <div class="detail-container">
    <div class="flex-container">
      <el-card class="cabinet-info-card">
        <div class="cabinet-header">
          <img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[cabinetInfo.templateNo]?.img || 'default.jpg'}`"
            class="cabinet-image" />
          <div class="cabinet-name">{{ cabinetInfo.cabinetName }}</div>
        </div>

        <el-divider />

        <el-descriptions class="cabinet-details" :column="1" border>
          <el-descriptions-item label="名称">{{ cabinetInfo.cabinetName }}</el-descriptions-item>
          <el-descriptions-item label="模式">{{ getModeText(shopInfo.mode) }}</el-descriptions-item>
          <el-descriptions-item label="格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
          }}</el-descriptions-item>
          <el-descriptions-item label="已用">{{ cabinetInfo.usedCells || '0' }}</el-descriptions-item>
          <el-descriptions-item label="未用">{{ cabinetInfo.availableCells || '0' }}</el-descriptions-item>
          <el-descriptions-item label="柜址">{{ cabinetInfo.shopName || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="info-card">
        <div class="tab-header">
          <el-tabs type="card" v-model="activeTab">
            <el-tab-pane label="格口管理" name="cells"></el-tab-pane>
            <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
            <el-tab-pane label="主板管理" name="mainboards"></el-tab-pane>
          </el-tabs>
        </div>

        <div class="info-details" v-if="activeTab === 'basic'">
          <div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
            <el-button v-if="hasPermission('shop:cabinet:write')" type="danger" link :icon="useRenderIcon(Delete)"
              @click="handleDeleteCabinet" style="margin-right: 16px;">
              删除柜体
            </el-button>
            <el-button v-if="hasPermission('shop:cabinet:write')" type="primary" link :icon="useRenderIcon(EditPen)"
              @click="editCabinetDrawerVisible = true">
              编辑柜体
            </el-button>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="柜体名称">{{ cabinetInfo.cabinetName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="运行模式">{{ getModeText(shopInfo.mode) }}</el-descriptions-item>
            <el-descriptions-item label="柜体格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
            }}</el-descriptions-item>
            <el-descriptions-item label="柜体地址">{{ cabinetInfo.shopName || '-' }}
              <el-button v-if="hasPermission('shop:cabinet:write')" type="success" link
                @click="shopConfigVisible = true">
                配置
              </el-button></el-descriptions-item>
            <el-descriptions-item label="柜体网关">{{ cabinetInfo.mqttServerId || '-' }}
              <el-button v-if="hasPermission('shop:cabinet:write')" type="warning" link
                @click="gatewayConfigVisible = true">
                配置
              </el-button></el-descriptions-item>
            <el-descriptions-item label="支付方式">
              <el-tag v-for="method in currentPaymentMethods" :key="method.label" :type="method.type"
                style="margin-right: 5px;">
                {{ method.label }}
              </el-tag>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="商品模式">
              {{ cabinetInfo.belongType === 0 ? '借还模式' : '固资模式' }}
            </el-descriptions-item> -->
            <el-descriptions-item label="归还期限">{{ cabinetInfo.returnDeadline === 0 ? '不限制' : cabinetInfo.returnDeadline
              + '天' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="cell-details" v-if="activeTab === 'cells'">
          <div style="display: flex; justify-content: space-between; margin-bottom: 0px;">
            <el-form :inline="true" :model="searchCellParams" class="search-form">
              <el-form-item>
                <el-input @keydown.enter.prevent="fetchCellList" v-model="searchCellParams.goodsName"
                  placeholder="请输入商品名称" clearable class="!w-[180px]" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="fetchCellList">
                  搜索
                </el-button>
              </el-form-item>
            </el-form>
            <!-- <el-button type="primary" :size="'small'" :icon="useRenderIcon(AddFill)" @click="cellFormVisible = true">
              新增格口
            </el-button> -->
          </div>
          <el-row :gutter="12">
            <el-col v-for="(item, index) in cellList" :key="item.cellId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
              <el-card class="cell-card" :body-style="{ padding: '8px 10px' }">
                <div class="card-content">
                  <el-image v-if="item.coverImg" :src="item.coverImg"
                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']" fit="contain" />
                  <el-image v-if="item.faceImg" :src="item.faceImg"
                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']" fit="contain" />
                  <svg v-if="!item.coverImg && !item.faceImg && item.usageStatus === 2" width="80" height="80"
                    viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']">
                    <defs>
                      <linearGradient id="occupiedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#FFF3E0;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#FFE0B2;stop-opacity:1" />
                      </linearGradient>
                      <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
                        <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.1" />
                      </filter>
                      <filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
                        <feOffset dx="0" dy="0.5" />
                        <feGaussianBlur stdDeviation="0.8" result="blur" />
                        <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k2="-1" k3="1" />
                      </filter>
                    </defs>
                    <!-- 主卡片背景 -->
                    <rect x="5" y="5" width="90" height="90" rx="12" fill="url(#occupiedGradient)" stroke="#FF9800"
                      stroke-width="2.5" filter="url(#shadow)" />
                    <!-- 内阴影效果 -->
                    <rect x="5" y="5" width="90" height="90" rx="12" fill="none" stroke="rgba(255,152,0,0.3)"
                      stroke-width="1" filter="url(#innerShadow)" />

                    <!-- 锁定图标 -->
                    <g transform="translate(35, 12)">
                      <rect x="8" y="12" width="16" height="12" rx="2" fill="#FF6F00" stroke="#E65100"
                        stroke-width="1" />
                      <path d="M 12 12 L 12 8 C 12 5.79 13.79 4 16 4 L 16 4 C 18.21 4 20 5.79 20 8 L 20 12" fill="none"
                        stroke="#FF6F00" stroke-width="2" stroke-linecap="round" />
                    </g>

                    <!-- 状态文字 -->
                    <text x="50" y="54" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#E65100"
                      text-anchor="middle">占用</text>

                    <!-- 装饰性分割线 -->
                    <line x1="20" y1="62" x2="80" y2="62" stroke="#FF9800" stroke-width="1.5" stroke-dasharray="3,2"
                      opacity="0.7" />

                    <!-- 格口类型标签 -->
                    <g transform="translate(50, 78)">
                      <rect x="-18" y="-8" width="36" height="16" rx="8" fill="#FF9800" opacity="0.9" />
                      <text x="0" y="3" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white"
                        text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
                    </g>
                  </svg>
                  <svg v-if="!item.coverImg && !item.faceImg && item.usageStatus !== 2" width="80" height="80"
                    viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']">
                    <defs>
                      <linearGradient id="freeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#E8F5E9;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#C8E6C9;stop-opacity:1" />
                      </linearGradient>
                      <filter id="shadow2" x="-50%" y="-50%" width="200%" height="200%">
                        <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.1" />
                      </filter>
                      <filter id="innerShadow2" x="-50%" y="-50%" width="200%" height="200%">
                        <feOffset dx="0" dy="0.5" />
                        <feGaussianBlur stdDeviation="0.8" result="blur" />
                        <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k2="-1" k3="1" />
                      </filter>
                    </defs>
                    <!-- 主卡片背景 -->
                    <rect x="5" y="5" width="90" height="90" rx="12" fill="url(#freeGradient)" stroke="#4CAF50"
                      stroke-width="2.5" filter="url(#shadow2)" />
                    <!-- 内阴影效果 -->
                    <rect x="5" y="5" width="90" height="90" rx="12" fill="none" stroke="rgba(76,175,80,0.3)"
                      stroke-width="1" filter="url(#innerShadow2)" />

                    <!-- 开锁图标 -->
                    <g transform="translate(35, 12)">
                      <rect x="8" y="12" width="16" height="12" rx="2" fill="#4CAF50" stroke="#388E3C"
                        stroke-width="1" />
                      <path d="M 12 12 L 12 8 C 12 5.79 13.79 4 16 4 L 16 4 C 18.21 4 20 5.79 20 8 L 20 12" fill="none"
                        stroke="#4CAF50" stroke-width="2" stroke-linecap="round" />
                      <!-- 打开的锁舌 -->
                      <circle cx="16" cy="18" r="2" fill="#4CAF50" stroke="#388E3C" stroke-width="1" />
                    </g>

                    <!-- 状态文字 -->
                    <text x="50" y="54" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2E7D32"
                      text-anchor="middle">空闲</text>

                    <!-- 装饰性分割线 -->
                    <line x1="20" y1="62" x2="80" y2="62" stroke="#4CAF50" stroke-width="1.5" stroke-dasharray="3,2"
                      opacity="0.7" />

                    <!-- 格口类型标签 -->
                    <g transform="translate(50, 78)">
                      <rect x="-18" y="-8" width="36" height="16" rx="8" fill="#4CAF50" opacity="0.9" />
                      <text x="0" y="3" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white"
                        text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
                    </g>
                  </svg>
                  <div v-if="shopInfo?.mode !== 5" class="cell-info">
                    <!-- <div class="cell-no">格口号: {{ item.cellNo }}</div> -->
                    <div class="price">价格: {{ shopInfo?.mode == 3 ? item.cellPrice : item.price }}</div>
                    <div class="stock">库存: {{ item.stock }}</div>
                    <!-- <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div> -->
                  </div>
                  <!-- <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div> -->
                </div>
                <div class="line-num">
                  <el-divider direction="horizontal" class="vertical-divider" />
                  <span class="line-number">{{ item.cellNo }}</span>
                </div>
                <div class="action-buttons">
                  <el-button v-if="!item.goodsId && (!shopInfo || (shopInfo.mode !== 3 && shopInfo.mode !== 5))"
                    :disabled="!hasPermission('shop:cabinet:write')" link type="success" @click="handleConfigure(item)"
                    class="cell-btn">
                    商品配置
                  </el-button>
                  <el-button v-if="item.goodsId" :disabled="!hasPermission('shop:cabinet:write')" link type="primary"
                    @click="handleEditCell(item)" class="cell-btn">
                    {{ item.goodsName }}
                  </el-button>
                  <el-button v-if="!item.goodsId && !item.isRented && shopInfo && shopInfo.mode == 3"
                    :disabled="!hasPermission('shop:cabinet:write')" link type="primary" @click="handleEditCell(item)"
                    class="cell-btn">
                    格口配置
                  </el-button>
                  <el-button v-if="!item.goodsId && item.isRented && shopInfo && shopInfo.mode == 3" link type="primary"
                    @click="handleAb98ViewDetail(item.ab98UserId, item.name)" class="cell-btn">
                    {{ item.name }}
                  </el-button>
                  <el-button v-if="!item.goodsId && shopInfo && shopInfo.mode == 5"
                    :disabled="!hasPermission('shop:cabinet:write')" link type="primary" @click="handleEditCell(item)"
                    class="cell-btn">
                    格口配置
                  </el-button>
                  <!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
                    @click="handleStockConfig(item)">
                    库存
                  </el-button>
                  <el-button v-if="item.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
                    @click="handleClearGoods(item)">
                    下架
                  </el-button> -->
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-pagination v-model:current-page="cellPagination.currentPage" v-model:page-size="cellPagination.pageSize"
            :page-sizes="[12, 18, 24, 30, 36, 42]" layout="total, sizes, prev, pager, next, jumper"
            :total="cellPagination.total" @size-change="handleCellSizeChange" @current-change="handleCellPageChange"
            class="pagination" />
        </div>

        <div class="mainboard-details" v-if="activeTab === 'mainboards'">
          <el-table v-loading="loading" :data="mainboardList" border>
            <el-table-column label="主板ID" prop="mainboardId" width="80" />
            <el-table-column label="锁控板序号" prop="lockControlNo" width="120" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button v-if="hasPermission('shop:cabinet:write')" type="primary" link :icon="useRenderIcon(EditPen)"
                  @click="handleEditMainboard(row)">
                  编辑
                </el-button>
                <el-button v-if="hasPermission('shop:cabinet:write')" type="danger" link :icon="useRenderIcon(Delete)"
                  @click="handleDeleteMainboard(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:current-page="mainboardPagination.currentPage"
            v-model:page-size="mainboardPagination.pageSize" :page-sizes="[5, 8, 16, 24, 32]"
            layout="total, sizes, prev, pager, next, jumper" :total="mainboardPagination.total"
            @size-change="handleMainboardSizeChange" @current-change="handleMainboardPageChange" class="pagination" />
        </div>
      </el-card>
      <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
      <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
      <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
        @refresh="fetchCabinetDetail" />
      <el-drawer v-model="editCabinetDrawerVisible" title="编辑柜体" size="30%" direction="rtl">
        <EditCabinetDrawer v-model="editCabinetDrawerVisible" :cabinet-info="cabinetInfo"
          @refresh="fetchCabinetDetail" />
      </el-drawer>
      <el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
        <CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId"
          :belong-type="shopInfo.mode == 4 ? 1 : 0" @refresh="fetchCellList" />
      </el-drawer>
      <el-drawer v-model="configuredGoodsVisible" title="管理商品" size="30%" direction="rtl">
        <ConfiguredGoodsModal v-model="configuredGoodsVisible" :cell-id="currentCell?.cellId"
          :goods-id="currentCell?.goodsId" :goods-name="currentCell?.goodsName" :current-stock="currentCell?.stock"
          :cover-img="currentCell?.coverImg" :price="currentCell?.price" @refresh="fetchCellList" />
      </el-drawer>
      <el-drawer v-model="cellFormVisible" title="新增格口" size="30%" direction="rtl">
        <CellFormModal v-model="cellFormVisible" :initial-cabinet-id="cabinetId" @refresh="fetchCellList" />
      </el-drawer>
      <el-drawer v-model="cellEditVisible" title="编辑格口" size="30%" direction="rtl">
        <CellEditModal v-model="cellEditVisible" :row="currentCell" :mode="shopInfo?.mode" @refresh="fetchCellList" />
      </el-drawer>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cell-card {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;

  /* &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  } */

  .card-content {
    display: flex;
    flex-direction: row;
    margin: 0px;

    .cell-image {
      width: 50%;
      height: 130px;
      object-fit: contain;
      border-radius: 4px;
    }

    .cell-image-full {
      width: 100%;
      height: 130px;
      object-fit: contain;
      border-radius: 4px;
    }

    .cell-info {
      padding: 18px 8px 0 8px;

      div {
        font-size: 13px;
        margin-bottom: 6px;
        color: #606266;

        &.goods-name {
          font-weight: 500;
          color: var(--el-text-color-primary);
        }

        &.price {
          font-weight: 600;
        }
      }
    }
  }

  .line-num {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .vertical-divider {
      margin: 0 0 0 0;
      width: 85%;
    }

    .line-number {
      font-size: 14px;
      color: #606266;
      font-weight: 600;
    }
  }

  .action-buttons {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 0;
    /* border-top: 1px solid var(--el-border-color-light); */

    .cell-btn {
      margin-right: 8px;
      width: 80px;
      height: 30px;
    }
  }
}

:deep(.el-tabs__header) {
  margin-bottom: 8px;
}

:deep(.el-drawer__header) {
  margin: 0;
}

:deep(.el-drawer__body) {
  padding: 4px;
}

.el-form-item {
  margin-bottom: 8px;
}

.detail-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .flex-container {
    display: flex;
    flex: 1;
    gap: 12px;
    min-height: 0;

    .cabinet-info-card {
      width: 20%;
      height: 88vh;
    }

    .info-card {
      width: 80%;
      height: 88vh;
      overflow-y: auto;
    }
  }

  .cabinet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .cabinet-image {
      width: 100%;
      height: 320px;
      object-fit: contain;
      margin-bottom: 15px;
    }

    .cabinet-name {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .tab-header {
    margin-bottom: 0px;
  }
}

.pagination {
  margin-top: 10px;
}
</style>