client-wms-board/src/agv-process/ReturnManagement.vue

<!-- 还料区管理 - 深色科技风格 -->
<template>
  <div class="return-page">
    <!-- 背景层 -->
    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />

    <!-- 顶部标题区域 -->
    <div class="header-section">
      <button class="back-btn" @click="$router.push('/home')">
        <i class="fas fa-arrow-left" />
        <span>返回</span>
      </button>
      <h1 class="page-title">还料区管理</h1>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="stations-grid">
        <div
          v-for="station in stations" :key="station.positionNo" class="station-card"
          :class="getStationClass(station)" @click="openStation(station)"
        >
          <div class="card-header">
            <div class="card-title">{{ station.positionName }}</div>
            <span class="status-badge" :class="getStatusClass(station.positionStatus)">
              {{ station.positionStatus }}
            </span>
          </div>

          <!-- 卡片内容 -->
          <div class="card-content">
            <!-- 占用状态 - 显示物料图片 -->
            <div v-if="station.positionStatus === '已占用'" class="material-display">
              <div class="material-image">
                <i class="fas fa-car" style="font-size: 60px; color: #fff;" />
              </div>
            </div>

            <!-- 空闲状态 -->
            <div v-else class="empty-state">
              <i class="fas fa-inbox" />
              <span>暂无物料车</span>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 确认还料弹窗 -->
    <van-dialog
      v-model:show="visible" title="确认还料" show-cancel-button class-name="large-dialog"
      confirm-button-text="确认" cancel-button-text="取消" :before-close="handleDialogClose"
    >
      <div class="large-dialog-content">
        <p>请确认您已经把待归还的料车推到【{{ positionName }}】上，请输入料车编号：</p>
        <div class="dialog-form-item">
          <v-select
            v-model="truckNo" :options="truckNos" :reduce="item => item.value" label="label"
            placeholder="请输入料车编号搜索" :clearable="true" :filterable="true" class="dialog-select" @search="handleSearch"
          >
            <template #no-options>
              <span>{{ hasSearched ? '无该编号相关数据' : '请输入料车编号进行搜索' }}</span>
            </template>
          </v-select>
        </div>

        <!-- 接驳车工装设备选择 -->
        <transition name="fade-slide">
          <div v-if="isTransferTruck" class="tooling-section">
            <div class="section-title">
              <van-icon name="cluster-o" />
              <span>工装设备选择</span>
              <van-tag type="primary" size="small">接驳车</van-tag>
            </div>

            <!-- 工装设备搜索 + 已选标签 -->
            <div class="tooling-header-row">
              <van-field
                v-model="toolingSearchKeyword" placeholder="请输入名称..." left-icon="search" class="tooling-input"
                @update:model-value="handleToolingSearch"
              />
              <div v-if="selectedToolings.length > 0" class="selected-count">
                <van-tag type="primary" size="small">已选 {{ selectedToolings.length }}</van-tag>
              </div>
            </div>

            <!-- 已选工装设备（可点击切换位置） -->
            <div v-if="selectedToolings.length > 0" class="selected-toolings">
              <div
                v-for="id in selectedToolings" :key="id" class="selected-chip"
                :class="toolingPositions[id] === 'top' ? 'chip-top' : 'chip-bottom'" @click="toggleToolingPosition(id)"
              >
                <span class="chip-text">{{ getToolingById(id)?.no }}</span>
                <span class="chip-pos">{{ toolingPositions[id] === 'top' ? '上' : '下' }}</span>
                <van-icon name="cross" class="chip-close" @click.stop="removeTooling(id)" />
              </div>
            </div>

            <!-- 工装设备列表 -->
            <div class="tooling-list">
              <div
                v-for="tooling in toolingDevices" :key="tooling.id" class="tooling-item"
                :class="{ 'tooling-selected': selectedToolings.includes(tooling.id) }"
              >
                <div class="tooling-header" @click="toggleTooling(tooling.id)">
                  <van-checkbox
                    :model-value="selectedToolings.includes(tooling.id)"
                    @click.stop="toggleTooling(tooling.id)"
                  >
                    <div class="tooling-info">
                      <span class="tooling-no">{{ tooling.no }}</span>
                      <span class="tooling-name">{{ tooling.name }}</span>
                    </div>
                  </van-checkbox>
                </div>

                <!-- 位置选择 -->
                <transition name="expand">
                  <div v-if="selectedToolings.includes(tooling.id)" class="position-selector">
                    <div class="position-label">选择位置：</div>
                    <van-radio-group
                      :model-value="toolingPositions[tooling.id] || 'top'" direction="horizontal"
                      @update:model-value="(val) => updatePosition(tooling.id, val)"
                    >
                      <van-radio name="top" icon-size="18px">
                        <template #icon="props">
                          <van-icon :name="props.checked ? 'success' : 'circle'" />
                        </template>
                        <span class="position-text">上层</span>
                      </van-radio>
                      <van-radio name="bottom" icon-size="18px">
                        <template #icon="props">
                          <van-icon :name="props.checked ? 'success' : 'circle'" />
                        </template>
                        <span class="position-text">下层</span>
                      </van-radio>
                    </van-radio-group>
                  </div>
                </transition>
              </div>
            </div>

            <!-- 选择汇总 -->
            <div v-if="selectedToolings.length > 0" class="tooling-summary">
              <span class="summary-text">上层: <b>{{ topToolings.length }}</b></span>
              <span class="summary-divider">|</span>
              <span class="summary-text">下层: <b>{{ bottomToolings.length }}</b></span>
            </div>

            <!-- 无数据提示 -->
            <div v-if="toolingDevices.length === 0 && !loading" class="tooling-empty">
              <van-icon name="search" size="24" color="#9ca3af" />
              <span>输入名称关键词</span>
            </div>
          </div>
        </transition>
      </div>
    </van-dialog>

    <!-- Loading -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-dots">
        <div class="dot" />
        <div class="dot" />
        <div class="dot" />
      </div>
      <span class="loading-text">加载中...</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { showNotify } from 'vant';
import { getLocatorStatus, getNoInStorageTruck, generateTaskByBlankNo, findDeviceByCondition } from '../api/agv.js';
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';

// 图片资源
import bgImg from '../assets/images/bj.png';

// 加载状态
const loading = ref(false);

// 获取卡片样式类
const getStationClass = station => {
    if (station.positionStatus === '已占用') return 'station-occupied';
    if (station.positionStatus === '空闲中') return 'station-idle';
    return '';
};

// 获取状态徽章类
const getStatusClass = status => {
    if (status === '已占用') return 'status-danger';
    if (status === '空闲中') return 'status-success';
    return '';
};

// 还料位数据
const stations = ref([]);

const visible = ref(false);

const positionName = ref('');
const positionNo = ref('');

const truckNo = ref('');

const truckNos = ref([]);
const hasSearched = ref(false);
let searchTimeout = null;

// 料车完整数据
const truckData = ref([]);
const selectedTruck = ref(null);

// 是否为接驳车
const isTransferTruck = ref(false);

// 工装设备数据（从接口获取）
const toolingDevices = ref([]);

// 工装设备搜索关键词
const toolingSearchKeyword = ref('');
let toolingSearchTimeout = null;

// 选中的工装设备ID列表
const selectedToolings = ref([]);

// 工装设备位置映射 { toolingId: 'top' | 'bottom' }
const toolingPositions = ref({});

// 已选工装设备信息缓存 { toolingId: { id, no, name } }
const selectedToolingCache = ref({});

// 远程搜索料车（带防抖）
const handleSearch = value => {
    if (!value || value.trim() === '') {
        truckNos.value = [];
        truckData.value = [];
        hasSearched.value = false;
        return;
    }

    // 清除之前的定时器
    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }

    // 设置新的定时器，500ms 后执行搜索
    searchTimeout = setTimeout(async () => {
        try {
            const res = await getNoInStorageTruck(value);
            hasSearched.value = true;
            if (res.errorCode === 0) {
                if (res.datas && res.datas.length > 0) {
                    // 保存完整的料车数据
                    truckData.value = res.datas;
                    // 将数据转换为 v-select 需要的格式
                    truckNos.value = res.datas.map(item => ({
                        label: item.truckNo + ' - ' + item.truckType,
                        value: item.truckNo,
                    }));
                } else {
                    truckNos.value = [];
                    truckData.value = [];
                }
            } else {
                showNotify({ type: 'danger', message: res.errorMessage || '搜索料车失败' });
                truckNos.value = [];
                truckData.value = [];
            }
        } catch (error) {
            console.error('搜索料车失败:', error);
            truckNos.value = [];
            truckData.value = [];
        }
    }, 500);
};

// 打开弹窗
const openStation = station => {
    if (station.positionStatus === '已占用') {
        showNotify({ type: 'danger', message: '请选择空闲的还料区' });
    } else {
        visible.value = true;
        positionName.value = station.positionName;
        positionNo.value = station.positionNo;
        // 重置选择
        truckNo.value = '';
        truckNos.value = [];
        truckData.value = [];
        selectedTruck.value = null;
        hasSearched.value = false;
        // 重置工装设备选择
        isTransferTruck.value = false;
        selectedToolings.value = [];
        toolingPositions.value = {};
        selectedToolingCache.value = {};
        toolingDevices.value = [];
        toolingSearchKeyword.value = '';
    }
};

// 切换工装设备选择
const toggleTooling = toolingId => {
    const index = selectedToolings.value.indexOf(toolingId);
    if (index > -1) {
    // 取消选择
        selectedToolings.value.splice(index, 1);
        delete toolingPositions.value[toolingId];
        delete selectedToolingCache.value[toolingId];
    } else {
    // 添加选择，默认位置为上层
        selectedToolings.value.push(toolingId);
        toolingPositions.value[toolingId] = 'top';
        // 缓存设备信息
        const device = toolingDevices.value.find(item => item.id === toolingId);
        if (device) {
            selectedToolingCache.value[toolingId] = { ...device };
        }
    }
};

// 更新工装设备位置
const updatePosition = (toolingId, position) => {
    toolingPositions.value[toolingId] = position;
};

// 切换工装设备位置（上层/下层）
const toggleToolingPosition = toolingId => {
    toolingPositions.value[toolingId] = toolingPositions.value[toolingId] === 'top' ? 'bottom' : 'top';
};

// 上层的工装设备ID集合
const topToolings = computed(() => {
    return selectedToolings.value.filter(id => toolingPositions.value[id] === 'top');
});

// 下层的工装设备ID集合
const bottomToolings = computed(() => {
    return selectedToolings.value.filter(id => toolingPositions.value[id] === 'bottom');
});

// 根据ID获取工装设备信息
const getToolingById = id => {
    return selectedToolingCache.value[id] || toolingDevices.value.find(item => item.id === id);
};

// 移除工装设备选择
const removeTooling = toolingId => {
    const index = selectedToolings.value.indexOf(toolingId);
    if (index > -1) {
        selectedToolings.value.splice(index, 1);
        delete toolingPositions.value[toolingId];
        delete selectedToolingCache.value[toolingId];
    }
};

// 搜索工装设备
const searchToolingDevices = async () => {
    loading.value = true;
    try {
        const params = {
            name: toolingSearchKeyword.value.trim(),
            inStock: false,
            start: 0,
            length: 100,
            positionType: 'Stereoscopic',
        };

        const res = await findDeviceByCondition(params);
        if (res.errorCode === 0) {
            if (res.datas && res.datas.length > 0) {
                toolingDevices.value = res.datas.map(item => ({
                    id: item.invId,
                    no: item.no,
                    name: item.name,
                    position: item.position,
                    inStock: item.inStock,
                }));
            } else {
                toolingDevices.value = [];
                showNotify({ type: 'danger', message: '未找到相关工装设备' });
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage || '搜索工装设备失败' });
            toolingDevices.value = [];
        }
    } catch (error) {
        console.error('搜索工装设备失败:', error);
        showNotify({ type: 'danger', message: '搜索工装设备失败' });
        toolingDevices.value = [];
    } finally {
        loading.value = false;
    }
};

// 清空工装设备搜索
const clearToolingSearch = () => {
    toolingSearchKeyword.value = '';
    loadInitialToolings();
};

// 输入时防抖搜索工装设备
const handleToolingSearch = value => {
    // 清除之前的定时器
    if (toolingSearchTimeout) {
        clearTimeout(toolingSearchTimeout);
    }

    // 如果清空了，重新加载全部
    if (!value || value.trim() === '') {
        loadInitialToolings();
        return;
    }

    // 500ms 防抖
    toolingSearchTimeout = setTimeout(() => {
        searchToolingDevices();
    }, 500);
};

// 初始加载工装设备（选择接驳车后自动查询）
const loadInitialToolings = async () => {
    loading.value = true;
    try {
        const params = {
            name: '',
            inStock: false,
            start: 0,
            length: 100,
            positionType: 'Stereoscopic',
        };

        const res = await findDeviceByCondition(params);
        if (res.errorCode === 0 && res.datas && res.datas.length > 0) {
            toolingDevices.value = res.datas.map(item => ({
                id: item.invId,
                no: item.no,
                name: item.name,
                position: item.position,
                inStock: item.inStock,
            }));
        } else {
            toolingDevices.value = [];
        }
    } catch (error) {
        console.error('加载工装设备失败:', error);
        toolingDevices.value = [];
    } finally {
        loading.value = false;
    }
};

// 弹窗关闭前的回调
const handleDialogClose = async action => {
    if (action === 'cancel') {
        cancelTask();
        return true;
    }

    if (action === 'confirm') {
        return await generateTask();
    }

    return true;
};

// 根据还料货位和料车编号生成归还单和调度任务
const generateTask = async () => {
    if (!truckNo.value) {
        showNotify({ type: 'danger', message: '请输入料车编号' });
        return false; // 返回 false 阻止关闭
    }

    // 如果是接驳车，检查是否选择了工装设备
    if (isTransferTruck.value && selectedToolings.value.length === 0) {
        showNotify({ type: 'danger', message: '接驳车需要至少选择一个工装设备' });
        return false; // 返回 false 阻止关闭
    }

    const params = {
        truckNo: truckNo.value,
        positionNo: positionNo.value,
    };

    // 如果是接驳车，添加工装设备参数
    if (isTransferTruck.value) {
        params.positionOneIds = topToolings.value;
        params.positionTwoIds = bottomToolings.value;
    }

    console.log('生成任务参数:', params);
    loading.value = true;
    try {
        const res = await generateTaskByBlankNo(params);
        if (res.errorCode === 0) {
            showNotify({ type: 'success', message: '绑定成功，等待AGV归还' });
            visible.value = false;
            truckNo.value = '';
            truckNos.value = [];
            truckData.value = [];
            selectedTruck.value = null;
            isTransferTruck.value = false;
            selectedToolings.value = [];
            toolingPositions.value = {};
            selectedToolingCache.value = {};
            toolingDevices.value = [];
            toolingSearchKeyword.value = '';
            await getStations();
            return true; // 成功后关闭弹窗
        } else {
            showNotify({ type: 'danger', message: res.errorMessage || '绑定失败' });
            return false; // 失败不关闭
        }
    } catch (error) {
        console.error('绑定失败:', error);
        showNotify({ type: 'danger', message: '绑定失败' });
        return false; // 异常不关闭
    } finally {
        loading.value = false;
    }
};

// 取消任务
const cancelTask = () => {
    truckNo.value = '';
    truckNos.value = [];
    truckData.value = [];
    selectedTruck.value = null;
    hasSearched.value = false;
    visible.value = false;
    isTransferTruck.value = false;
    selectedToolings.value = [];
    toolingPositions.value = {};
    selectedToolingCache.value = {};
    toolingDevices.value = [];
    toolingSearchKeyword.value = '';
};
// 获取还料位数据
const getStations = async () => {
    loading.value = true;
    try {
        const res = await getLocatorStatus();
        if (res.errorCode === 0) {
            if (res.datas && res.datas.length > 0) {
                stations.value = res.datas;
            } else {
                stations.value = [];
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage });
        }

    } catch (error) {
        console.error('获取还料位数据失败:', error);
        showNotify({ type: 'danger', message: '获取还料位数据失败' });
    } finally {
        loading.value = false;
    }
};

// 监听料车编号变化，判断是否为接驳车
watch(truckNo, newVal => {
    if (newVal) {
    // 从完整数据中找到对应的料车
        const truck = truckData.value.find(item => item.truckNo === newVal);
        if (truck) {
            selectedTruck.value = truck;
            // 判断是否为接驳车
            isTransferTruck.value = truck.truckType === '接驳车';
            // 如果切换料车，重置工装设备选择
            selectedToolings.value = [];
            toolingPositions.value = {};
            selectedToolingCache.value = {};
            toolingDevices.value = [];
            toolingSearchKeyword.value = '';

            // 如果是接驳车，自动查询工装设备
            if (isTransferTruck.value) {
                loadInitialToolings();
            }
        }
    } else {
        selectedTruck.value = null;
        isTransferTruck.value = false;
        selectedToolings.value = [];
        toolingPositions.value = {};
        selectedToolingCache.value = {};
        toolingDevices.value = [];
        toolingSearchKeyword.value = '';
    }
});

onMounted(() => {
    getStations();
});
</script>

<style scoped>
/* ========== 基础样式 ========== */
.return-page {
  width: 100%;
  height: 100vh;
  position: relative;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 背景层 */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #041c3d;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ========== 顶部标题区域 ========== */
.header-section {
  position: relative;
  width: 100%;
  padding: 20px 30px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.back-btn {
  position: absolute;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
  border: 1px solid #2a7fff;
  border-radius: 8px;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

/* ========== 主内容区域 ========== */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
  position: relative;
  z-index: 10;
}

/* 网格布局 */
.stations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ========== 卡片样式 ========== */
.station-card {
  background: rgba(9, 61, 140, 0.6);
  border: 1px solid #049FD8;
  border-radius: 12px;
  padding: 20px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s;
}

.station-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(4, 159, 216, 0.4);
}

.station-occupied {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.station-idle {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* 状态徽章 */
.status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.status-success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.status-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* 卡片内容 */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 物料显示区域 */
.material-display {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.material-image {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
}

.material-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #7ec8ff;
}

.empty-state i {
  font-size: 48px;
  opacity: 0.5;
}

.empty-state span {
  font-size: 14px;
}

/* ========== 科技感弹窗样式覆盖 ========== */
:deep(.large-dialog) {
  width: 90vw !important;
  max-width: 600px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%) !important;
  border: 1px solid #049FD8 !important;
  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3) !important;
}

:deep(.large-dialog .van-dialog__header) {
  font-size: 22px !important;
  font-weight: bold !important;
  padding: 25px 25px 15px !important;
  color: #fff !important;
}

:deep(.large-dialog .van-dialog__content) {
  padding: 15px 25px 20px !important;
}

:deep(.large-dialog .van-dialog__footer) {
  padding: 15px 25px 25px !important;
  display: flex !important;
  gap: 15px !important;
}

:deep(.large-dialog .van-dialog__cancel),
:deep(.large-dialog .van-dialog__confirm) {
  flex: 1 !important;
  height: 50px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

:deep(.large-dialog .van-dialog__cancel) {
  background: transparent !important;
  border: 1px solid #2a7fff !important;
  color: #7ec8ff !important;
}

:deep(.large-dialog .van-dialog__confirm) {
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%) !important;
  border: none !important;
  color: #fff !important;
}

.large-dialog-content {
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

.large-dialog-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #7ec8ff;
  text-align: center;
}

.dialog-form-item {
  width: 100%;
  margin-top: 15px;
}

/* v-select 深色科技风格样式 */
.dialog-select {
  font-size: 1rem;
}

:deep(.dialog-select .vs__dropdown-toggle) {
  border: 1px solid #2a7fff;
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 44px;
  background: rgba(13, 58, 106, 0.8);
}

:deep(.dialog-select .vs__search) {
  font-size: 1rem;
  padding: 0;
  margin: 0;
  color: #fff;
}

:deep(.dialog-select .vs__search::placeholder) {
  color: #7ec8ff;
  opacity: 0.7;
}

:deep(.dialog-select .vs__selected) {
  margin: 2px;
  padding: 0 4px;
  font-size: 1rem;
  color: #fff;
}

:deep(.dialog-select .vs__actions svg) {
  fill: #7ec8ff;
}

:deep(.dialog-select .vs__clear svg) {
  fill: #7ec8ff;
}

:deep(.dialog-select .vs__dropdown-menu) {
  z-index: 9999 !important;
  border: 1px solid #2a7fff;
  border-radius: 6px;
  background: rgba(13, 58, 106, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  font-size: 1rem;
}

:deep(.dialog-select .vs__dropdown-option) {
  padding: 10px 12px;
  color: #fff;
}

:deep(.dialog-select .vs__dropdown-option--highlight) {
  background: rgba(30, 144, 255, 0.3);
}

/* ========== 工装设备选择区域样式 ========== */
.tooling-section {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(4, 159, 216, 0.7);
  background: radial-gradient(circle at top, rgba(30, 144, 255, 0.15) 0%, rgba(4, 28, 61, 0.95) 55%, rgba(4, 28, 61, 0.98) 100%);
  box-shadow: 0 0 25px rgba(4, 159, 216, 0.35);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #e5f4ff;
}

.section-title .van-icon {
  font-size: 18px;
  color: #38bdf8;
}

/* 搜索行 */
.tooling-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tooling-input {
  flex: 1;
}

:deep(.tooling-input.van-field) {
  padding: 4px 10px;
  background: rgba(5, 40, 80, 0.95);
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.6);
  font-size: 13px;
  color: #e5f4ff;
}

:deep(.tooling-input .van-field__control) {
  color: #e5f4ff;
}

:deep(.tooling-input .van-field__control::placeholder) {
  color: rgba(148, 163, 184, 0.85);
}

:deep(.tooling-input .van-field__left-icon) {
  color: #38bdf8;
  margin-right: 4px;
}

.selected-count {
  flex-shrink: 0;
}

/* 已选工装设备芯片 */
.selected-toolings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));
  border-radius: 8px;
  min-height: 32px;
  max-height: 72px;
  overflow-y: auto;
}

.selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.chip-top {
  background: rgba(16, 185, 129, 0.15);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.8);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}

.chip-top:hover {
  background: rgba(16, 185, 129, 0.25);
}

.chip-bottom {
  background: rgba(245, 158, 11, 0.16);
  color: #fed7aa;
  border: 1px solid rgba(245, 158, 11, 0.85);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.chip-bottom:hover {
  background: rgba(245, 158, 11, 0.24);
}

.chip-text {
  font-weight: 600;
}

.chip-pos {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.chip-top .chip-pos {
  background: #22c55e;
  color: #0b1120;
}

.chip-bottom .chip-pos {
  background: #f97316;
  color: #0b1120;
}

.chip-close {
  font-size: 12px;
  color: #9ca3af;
  margin-left: 2px;
  transition: color 0.15s;
}

.chip-close:hover {
  color: #ef4444;
}

/* 工装设备列表 */
.tooling-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}

/* 工装设备项 */
.tooling-item {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(51, 136, 255, 0.6);
  border-radius: 8px;
  padding: 8px 10px;
  transition: all 0.18s ease;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.8);
}

.tooling-item:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.5);
}

.tooling-item.tooling-selected {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.4) 0%, rgba(15, 23, 42, 0.98) 45%, rgba(15, 23, 42, 1) 100%);
  border-color: #38bdf8;
}

.tooling-header {
  display: flex;
  align-items: center;
}

.tooling-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tooling-no {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(120deg, #22d3ee, #6366f1);
  color: #0b1120;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.tooling-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e5e7eb;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 位置选择器 */
.position-selector {
  margin-top: 6px;
  padding-top: 6px;
  padding-left: 24px;
  border-top: 1px dashed rgba(148, 163, 184, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.position-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #cbd5f5;
  white-space: nowrap;
}

:deep(.position-selector .van-radio-group) {
  display: flex;
  gap: 12px;
}

:deep(.position-selector .van-radio) {
  display: flex;
  align-items: center;
}

.position-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e5e7eb;
}

/* 选择汇总 */
.tooling-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.summary-text {
  font-size: 0.8125rem;
  color: #e5f4ff;
}

.summary-text b {
  color: #38bdf8;
  font-weight: 700;
}

.summary-divider {
  color: #64748b;
}

/* 无数据提示 */
.tooling-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: #9ca3af;
  font-size: 0.8125rem;
}

/* 过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  margin-top: 0;
}

.expand-enter-to,
.expand-leave-from {
  opacity: 1;
  max-height: 100px;
}

@media screen and (orientation: landscape) {

  :deep(.v-select .vs__dropdown-toggle,
    .dark-select .vs__dropdown-toggle,
    .filter-select .vs__dropdown-toggle,
    .dialog-select .vs__dropdown-toggle) {
    padding: 8px 12px !important;
    min-height: 48px !important;
  }
}

/* 工装列表滚动条 - 深色科技风 */
.tooling-list::-webkit-scrollbar {
  width: 6px;
}

.tooling-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 3px;
}

.tooling-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #6366f1);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.tooling-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0ea5e9, #4f46e5);
}
</style>