<template>
  <div class="running-in-page">
    <!-- 顶部标题栏 -->
    <div class="page-header">
      <h1>磨合转序管理</h1>
      <el-button type="primary" :icon="Refresh" @click="loadData" :loading="loading">刷新</el-button>
    </div>

    <!-- 库区区域 -->
    <div class="process-container">
      <!-- 按库区分组显示 -->
      <div class="process-section" v-for="group in slotGroups" :key="group.库区">
        <div class="process-header">
          <span class="process-title">库区: {{ group.库区 }}</span>
          <span class="process-info">库位数: {{ group.slots.length }}</span>
        </div>
        <div class="slot-grid">
          <div
            v-for="slot in group.slots"
            :key="slot.库位号"
            class="slot-card"
            :class="getSlotClass(slot)"
            @click="handleSlotClick(slot)"
          >
            <div class="slot-header">
              <span class="slot-code">{{ slot.库位号 }}</span>
              <span class="slot-status-tag" :class="getStatusTagClass(slot)">{{ getStatusText(slot) }}</span>
            </div>
            <div class="slot-body">
              <div class="slot-info">
                <span class="label">产品编号:</span>
                <span class="value">{{ slot.产品编号 || '-' }}</span>
              </div>
              <div class="slot-info">
                <span class="label">产品型号:</span>
                <span class="value">{{ slot.产品型号 || '-' }}</span>
              </div>
              <div class="slot-info">
                <span class="label">工序:</span>
                <span class="value">{{ slot.工序名称 || '-' }} <template v-if="slot.工序号">({{ slot.工序号 }})</template></span>
              </div>
              <div class="slot-info-row">
                <div class="slot-info half">
                  <span class="label">有件:</span>
                  <span class="value" :class="slot.是否有件 ? 'has-part' : 'no-part'">{{ slot.是否有件 ? '是' : '否' }}</span>
                </div>
                <div class="slot-info half">
                  <span class="label">呼叫:</span>
                  <span class="value" :class="slot.是否呼叫 ? 'calling' : ''">{{ slot.是否呼叫 ? '是' : '否' }}</span>
                </div>
              </div>
            </div>
            <div class="slot-footer">
              <div class="time-row">
                <span class="time-label">到达时间:</span>
                <span class="time-value">{{ formatTime(slot.到达时间) || '-' }}</span>
              </div>
              <div class="time-row">
                <span class="time-label">操作时间:</span>
                <span class="time-value">{{ formatTime(slot.操作时间) || '-' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="empty-tip" v-if="group.slots.length === 0">
          <span>暂无库位数据</span>
        </div>
      </div>
    </div>

    <!-- 操作弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="'库位操作 - ' + (selectedSlot?.库位号 || '')"
      width="900px"
      :close-on-click-modal="false"
      class="operation-dialog"
    >
      <div class="dialog-content">
        <div class="slot-detail">
          <div class="detail-row">
            <span class="detail-label">库位号:</span>
            <span class="detail-value">{{ selectedSlot?.库位号 }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">库区:</span>
            <span class="detail-value">{{ selectedSlot?.库区 }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">产品编号:</span>
            <span class="detail-value">{{ selectedSlot?.产品编号 || '无' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">产品型号:</span>
            <span class="detail-value">{{ selectedSlot?.产品型号 || '无' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">当前状态:</span>
            <span class="detail-value">{{ getStatusText(selectedSlot) }}</span>
          </div>
        </div>

        <!-- PLC点位状态区域 -->
        <div class="plc-section">
          <div class="section-title">工位信号状态</div>
          <div class="plc-grid">
            <div 
              v-for="tag in plcConfigList" 
              :key="tag.TagCode"
              class="plc-item"
              :class="{ 'clickable': tag.isWrite }"
              @click="handlePLCToggle(tag)"
            >
              <div class="status-indicator">
                <div 
                  class="status-light" 
                  :class="getPLCStatusClass(tag)"
                ></div>
                <span class="status-label">{{ tag.name }}</span>
              </div>
              <span class="write-badge" v-if="tag.isWrite" title="可点击写入">✎</span>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <el-button
            type="primary"
            size="large"
            :disabled="!canTransfer"
            :loading="transferLoading"
            @click="handleTransfer"
          >
            转序
          </el-button>
          <el-button
            type="success"
            size="large"
            :disabled="!canAGVArrive"
            :loading="agvArriveLoading"
            @click="handleAGVArrive"
          >
            AGV到位
          </el-button>
          <el-button
            type="warning"
            size="large"
            :disabled="!canAGVLeave"
            :loading="agvLeaveLoading"
            @click="handleAGVLeave"
          >
            AGV离开
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 转序预览确认弹窗 -->
    <el-dialog
      v-model="transferDialogVisible"
      title="转序确认"
      width="550px"
      :close-on-click-modal="false"
      class="transfer-dialog"
    >
      <div class="transfer-content">
        <div class="transfer-info">
          <div class="transfer-section">
            <h4>当前位置</h4>
            <div class="info-row">
              <span class="info-label">库位号:</span>
              <span class="info-value">{{ selectedSlot?.库位号 }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">产品编号:</span>
              <span class="info-value">{{ selectedSlot?.产品编号 }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">产品型号:</span>
              <span class="info-value">{{ selectedSlot?.产品型号 }}</span>
            </div>
          </div>
          <div class="transfer-arrow">
            <el-icon :size="32"><Right /></el-icon>
          </div>
          <div class="transfer-section">
            <h4>目标位置</h4>
            <div class="info-row">
              <span class="info-label">目标库区:</span>
              <span class="info-value">{{ nextProcessInfo?.目标库区 || '无' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">目标库位:</span>
              <span class="info-value highlight">{{ nextProcessInfo?.目标库位号 || '无可用库位' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">目标工序:</span>
              <span class="info-value">{{ nextProcessInfo?.目标工序 || '无' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">是否自动:</span>
              <span class="info-value">{{ nextProcessInfo?.目标是否自动 == 1 ? '是' : '否' }}</span>
            </div>
          </div>
        </div>
        <div class="transfer-warning" v-if="!nextProcessInfo?.目标库位号">
          <el-alert type="error" :closable="false" show-icon>
            目标库区无可用库位，无法执行转序！
          </el-alert>
        </div>
      </div>
      <template #footer>
        <el-button @click="transferDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="confirmTransferLoading"
          :disabled="!nextProcessInfo?.目标库位号"
          @click="confirmTransfer"
        >
          确认转序
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, getCurrentInstance, inject } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, Right } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()
const ExecHttpRequest = inject('ExecHttpRequest')

// 数据
const loading = ref(false)
const slotList = ref([])         // 库位状态列表
const dialogVisible = ref(false)
const selectedSlot = ref(null)
let refreshTimer = null          // 自动刷新定时器

// 转序相关
const transferLoading = ref(false)
const transferDialogVisible = ref(false)
const nextProcessInfo = ref(null)
const confirmTransferLoading = ref(false)

// AGV操作
const agvArriveLoading = ref(false)
const agvLeaveLoading = ref(false)

// PLC相关
const plcConfigList = window.g.showPosList || []
const plcValues = ref({}) // 存储点位值 Key=TagCode, Value=0/1
let plcRefreshTimer = null // PLC刷新定时器
const plcLoading = ref(false) // PLC加载状态

// 按库区分组
const slotGroups = computed(() => {
  const groups = {}
  slotList.value.forEach(slot => {
    const key = slot.库区 || '未分类'
    if (!groups[key]) {
      groups[key] = { 库区: key, slots: [] }
    }
    groups[key].slots.push(slot)
  })
  // 按库区名排序
  return Object.values(groups).sort((a, b) => a.库区.localeCompare(b.库区))
})

// 是否可以转序（有产品、无取送状态）
const canTransfer = computed(() => {
  if (!selectedSlot.value) return false
  return selectedSlot.value.产品编号 && selectedSlot.value.取送状态 === 0 && selectedSlot.value.是否有件 === 1
})

// 是否可以AGV到位（送料中状态）
const canAGVArrive = computed(() => {
  if (!selectedSlot.value) return false
  return selectedSlot.value.取送状态 === 2
})

// 是否可以AGV离开（取料中或送料中）
const canAGVLeave = computed(() => {
  if (!selectedSlot.value) return false
  return selectedSlot.value.取送状态 === 1 || selectedSlot.value.取送状态 === 2
})

// 加载数据 (showLoading: 是否显示加载动画，自动刷新时不显示)
const loadData = async (showLoading = true) => {
  if (showLoading) loading.value = true
  try {
    const slotData = proxy.CreateData('11', 'XD_磨合_状态_页面查询', [])
    const slotRes = await proxy.ExecDatabase(slotData)
    slotList.value = slotRes.data || []
  } catch (err) {
    console.error('加载数据失败:', err)
    // 只在手动刷新时提示错误
    if (showLoading) ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 启动自动刷新（静默刷新，不显示加载动画）
const startAutoRefresh = () => {
  refreshTimer = setInterval(() => {
    loadData(false)  // 自动刷新不显示加载动画
  }, 10000)
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
  }
}

// 点击库位
const handleSlotClick = (slot) => {
  selectedSlot.value = { ...slot }
  plcValues.value = {} // 重置PLC值
  dialogVisible.value = true
}

// 监听弹窗打开关闭，控制PLC轮询
import { watch } from 'vue'
watch(dialogVisible, (val) => {
  if (val) {
    fetchPLCValues()
    startPLCRefresh()
  } else {
    stopPLCRefresh()
  }
})

// === PLC 相关逻辑 ===

// 获取PLC状态样式
const getPLCStatusClass = (tag) => {
  const code = tag.TagCode
  const val = plcValues.value[code]
  // 1为绿灯(on), 0/undefined为灰灯(off)
  return val === 1 ? 'light-green' : 'light-gray'
}

// 获取PLC值文本（可选显示）
const getPLCValueText = (tag) => {
  /* const val = plcValues.value[tag.TagCode]
  return val === 1 ? 'ON' : 'OFF' */ 
  return '' 
}

// 获取PLC数据
const fetchPLCValues = async () => {
  if (!selectedSlot.value) return
  
  // 首次可能需要loading，后续静默刷新
  // plcLoading.value = true 
  
  try {
    const OpName = selectedSlot.value.库位号
    const TagTypeCodeIDs = plcConfigList.map(item => Number(item.TagCode))
    
    const payload = {
      OpName,
      TagTypeCodeIDs
    }

    const baseUrl = window.g && window.g.API_MES_Controller_URL ? window.g.API_MES_Controller_URL : ''
    // 注意：这里假设API地址是 /web/WEB_ReadPLCValues
    const url = baseUrl + '/web/WEB_ReadPLCValues'
    
    const res = await ExecHttpRequest(url, 'post', payload)
    
    if (res && res.data && res.data.code === 200 && res.data.Data) {
        // 更新本地值
        const newValues = {}
        res.data.Data.forEach(item => {
            if (item.Success) {
                newValues[item.TagTypeCodeID] = item.TagValue
            }
        })
        plcValues.value = newValues
    }
  } catch (err) {
    console.error('获取PLC数据失败:', err)
  } finally {
    // plcLoading.value = false
  }
}

// 写入PLC数据
const handlePLCToggle = async (tag) => {
  if (!tag.isWrite) return
  
  // 获取当前值，默认0
  const currentVal = plcValues.value[tag.TagCode] || 0
  const newVal = currentVal === 1 ? 0 : 1
  
  const OpName = selectedSlot.value.库位号
  
  // 乐观更新UI? 还是等返回？建议等返回，或者 loading
  // 这里做一个简单的 loading 提示或者直接调用
  
  try {
    const payload = {
        TagTypeCodeID: Number(tag.TagCode),
        OpName: OpName,
        TagValue: newVal
    }
    
    const baseUrl = window.g && window.g.API_MES_Controller_URL ? window.g.API_MES_Controller_URL : ''
    const url = baseUrl + '/web/WEB_WritePLC'
    
    const res = await ExecHttpRequest(url, 'post', payload)
    
    if (res && res.data && res.data.code === 200) {
        ElMessage.success(`写入 ${tag.name} 成功`)
        // 写入成功后立即刷新一次
        fetchPLCValues()
    } else {
        ElMessage.error(res?.data?.message || '写入失败')
    }
  } catch (err) {
    console.error('写入PLC失败:', err)
    ElMessage.error('写入PLC异常')
  }
}

// 启动PLC自动刷新
const startPLCRefresh = () => {
    stopPLCRefresh()
    plcRefreshTimer = setInterval(() => {
        fetchPLCValues()
    }, 1000 * 5)
}

// 停止PLC自动刷新
const stopPLCRefresh = () => {
    if (plcRefreshTimer) {
        clearInterval(plcRefreshTimer)
        plcRefreshTimer = null
    }
}

// 获取库位样式类
const getSlotClass = (slot) => {
  if (!slot) return ''
  const classes = []
  if (slot.是否有件) classes.push('has-part')
  if (slot.取送状态 === 1) classes.push('picking')
  if (slot.取送状态 === 2) classes.push('delivering')
  if (slot.是否呼叫) classes.push('calling')
  return classes.join(' ')
}

// 获取状态标签样式
const getStatusTagClass = (slot) => {
  if (!slot) return ''
  if (slot.取送状态 === 1) return 'status-picking'
  if (slot.取送状态 === 2) return 'status-delivering'
  if (slot.是否有件) return 'status-occupied'
  return 'status-empty'
}

// 获取状态文本
const getStatusText = (slot) => {
  if (!slot) return ''
  if (slot.取送状态 === 1) return '取料中'
  if (slot.取送状态 === 2) return '送料中'
  if (slot.是否有件) return '有件'
  return '空闲'
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  return `${month}-${day} ${hour}:${minute}`
}

// 转序操作
const handleTransfer = async () => {
  if (!selectedSlot.value) return

  transferLoading.value = true
  try {
    const param = [
      ['库位号', selectedSlot.value.库位号],
      ['产品编号', selectedSlot.value.产品编号],
      ['产品型号', selectedSlot.value.产品型号]
    ]
    const data = proxy.CreateData('11', 'XD_磨合_获取下一序', param)
    const res = await proxy.ExecDatabase(data)

    if (res.data && res.data.length > 0) {
      nextProcessInfo.value = res.data[0]
      dialogVisible.value = false
      transferDialogVisible.value = true
    } else {
      ElMessage.warning('无法获取下一序信息')
    }
  } catch (err) {
    console.error('获取下一序失败:', err)
    ElMessage.error('获取下一序信息失败')
  } finally {
    transferLoading.value = false
  }
}

// 确认转序 - 调用后端API，后端会调用AGV接口并执行存储过程
const confirmTransfer = async () => {
  if (!selectedSlot.value || !nextProcessInfo.value?.目标库位号) return

  confirmTransferLoading.value = true
  try {
    const payload = {
      startPositionCode: selectedSlot.value.库位号,
      endPositionCode: nextProcessInfo.value.目标库位号,
      productCode: selectedSlot.value.产品编号,
      productModel: selectedSlot.value.产品型号,
      targetProcess: nextProcessInfo.value.目标工序,
      targetProcessNo: nextProcessInfo.value.目标工序号
    }

    const baseUrl = window.g && window.g.API_MES_Controller_URL ? window.g.API_MES_Controller_URL : ''
    const url = baseUrl + '/web/WEB_RunningInTransfer'

    const res = await ExecHttpRequest(url, 'post', payload)
    const data = res && res.data ? res.data : null

    if (data && data.code === 200) {
      ElMessage.success(data.message || '转序操作成功')
      transferDialogVisible.value = false
      loadData()
    } else {
      ElMessage.error(data?.message || '转序操作失败')
    }
  } catch (err) {
    console.error('转序失败:', err)
    ElMessage.error('转序操作异常')
  } finally {
    confirmTransferLoading.value = false
  }
}

// AGV到位
const handleAGVArrive = async () => {
  if (!selectedSlot.value) return

  try {
    await ElMessageBox.confirm('确认AGV已到达该库位？', '确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    })
  } catch {
    return
  }

  agvArriveLoading.value = true
  try {
    const param = [['库位号', selectedSlot.value.库位号]]
    const data = proxy.CreateData('12', 'XD_磨合_AGV到达', param)
    const res = await proxy.ExecDatabase(data)

    if (res.data && res.data[0]?.result === '1') {
      ElMessage.success('AGV到达确认成功')
      dialogVisible.value = false
      loadData()
    } else {
      ElMessage.error('AGV到达确认失败')
    }
  } catch (err) {
    console.error('AGV到达确认失败:', err)
    ElMessage.error('AGV到达确认异常')
  } finally {
    agvArriveLoading.value = false
  }
}

// AGV离开
const handleAGVLeave = async () => {
  if (!selectedSlot.value) return

  try {
    await ElMessageBox.confirm('确认AGV已离开该库位？', '确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    })
  } catch {
    return
  }

  agvLeaveLoading.value = true
  try {
    const param = [['库位号', selectedSlot.value.库位号]]
    const data = proxy.CreateData('12', 'XD_磨合_AGV离开', param)
    const res = await proxy.ExecDatabase(data)

    if (res.data && res.data[0]?.result === '1') {
      ElMessage.success('AGV离开确认成功')
      dialogVisible.value = false
      loadData()
    } else {
      ElMessage.error('AGV离开确认失败')
    }
  } catch (err) {
    console.error('AGV离开确认失败:', err)
    ElMessage.error('AGV离开确认异常')
  } finally {
    agvLeaveLoading.value = false
  }
}

onMounted(() => {
  loadData()
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style lang="scss" scoped>
.running-in-page {
  min-height: 100vh;
  background: #e8eaed;
  color: #1a1a1a;
  padding: 16px;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
  }
}

.process-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-section {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.process-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;

  .process-title {
    font-size: 16px;
    font-weight: 600;
    color: #409eff;
  }

  .process-info {
    font-size: 13px;
    color: #909399;
  }
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
  background: #f0f2f5;
}

.slot-card {
  background: #fff;
  border-radius: 6px;
  border: 2px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;

  &:hover {
    border-color: #409eff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &.has-part {
    border-color: #67c23a;
  }

  &.picking {
    border-color: #e6a23c;
    background: linear-gradient(135deg, #fff 0%, #fef6e6 100%);
  }

  &.delivering {
    border-color: #409eff;
    background: linear-gradient(135deg, #fff 0%, #ecf5ff 100%);
  }
}

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;

  .slot-code {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
  }
}

.slot-status-tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;

  &.status-empty {
    background: #f4f4f5;
    color: #909399;
  }

  &.status-occupied {
    background: #f0f9eb;
    color: #67c23a;
  }

  &.status-picking {
    background: #fdf6ec;
    color: #e6a23c;
  }

  &.status-delivering {
    background: #ecf5ff;
    color: #409eff;
  }
}

.slot-body {
  padding: 12px 14px;
}

.slot-info {
  display: flex;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;

  &:last-child {
    margin-bottom: 0;
  }

  .label {
    color: #606266;
    min-width: 70px;
    flex-shrink: 0;
    font-weight: 500;
  }

  .value {
    color: #1a1a1a;
    word-break: break-all;
    font-weight: 500;

    &.has-part {
      color: #67c23a;
      font-weight: 500;
    }

    &.no-part {
      color: #909399;
    }

    &.calling {
      color: #f56c6c;
      font-weight: 500;
    }
  }
}

.slot-info-row {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;

  &:last-child {
    margin-bottom: 0;
  }

  .slot-info.half {
    flex: 1;
    margin-bottom: 0;
  }
}

.slot-footer {
  padding: 10px 14px;
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  gap: 4px;

  .time-row {
    display: flex;
    font-size: 12px;

    .time-label {
      color: #606266;
      min-width: 60px;
      font-weight: 500;
    }

    .time-value {
      color: #1a1a1a;
    }
  }
}

.empty-tip {
  padding: 40px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

// 操作弹窗样式
.operation-dialog {
  :deep(.el-dialog) {
    background: #fff;
    border-radius: 8px;
  }

  :deep(.el-dialog__header) {
    background: #f8f9fa;
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid #e4e7ed;

    .el-dialog__title {
      color: #303133;
      font-size: 16px;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }
}

.dialog-content {
  .slot-detail {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
  }

  .detail-row {
    display: flex;
    margin-bottom: 10px;
    font-size: 14px;

    &:last-child {
      margin-bottom: 0;
    }

    .detail-label {
      color: #606266;
      min-width: 80px;
      font-weight: 500;
    }

    .detail-value {
      color: #1a1a1a;
      font-weight: 500;
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;

    .el-button {
      flex: 1;
      height: 50px;
      font-size: 15px;
    }
  }
  
  // PLC区域样式
  .plc-section {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;

    .section-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 12px;
        border-left: 4px solid #409eff;
        padding-left: 8px;
    }

    .plc-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); // 4列显示
        gap: 12px;
    }

    .plc-item {
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s;

        &.clickable {
            cursor: pointer;
            &:hover {
                border-color: #409eff;
                background-color: #ecf5ff;
            }
            &:active {
                background-color: #d9ecff;
            }
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-light {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.1);
            position: relative;
            
            &.light-gray {
                background: #dcdfe6; // 灭
                box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
            }
            
            &.light-green {
                background: #67c23a; // 亮
                box-shadow: 0 0 6px #67c23a;
                &::after {
                    content: '';
                    position: absolute;
                    top: 3px;
                    left: 4px;
                    width: 4px;
                    height: 4px;
                    background: rgba(255,255,255,0.6);
                    border-radius: 50%;
                }
            }
        }

        .status-label {
            font-size: 13px;
            color: #606266;
            font-weight: 500;
        }
        
        .write-badge {
            font-size: 12px;
            color: #409eff;
            opacity: 0.5;
            margin-left: auto;
        }
    }
  }
}



// 转序确认弹窗样式
.transfer-dialog {
  :deep(.el-dialog) {
    background: #fff;
    border-radius: 8px;
  }

  :deep(.el-dialog__header) {
    background: #f8f9fa;
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid #e4e7ed;

    .el-dialog__title {
      color: #303133;
      font-size: 16px;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    padding: 16px 20px;
    border-top: 1px solid #e4e7ed;
  }
}

.transfer-content {
  .transfer-info {
    display: flex;
    align-items: stretch;
    gap: 16px;
  }

  .transfer-section {
    flex: 1;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 16px;
    border: 1px solid #e4e7ed;

    h4 {
      margin: 0 0 12px 0;
      font-size: 14px;
      color: #409eff;
      font-weight: 500;
    }

    .info-row {
      display: flex;
      margin-bottom: 8px;
      font-size: 13px;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        color: #606266;
        min-width: 70px;
        font-weight: 500;
      }

      .info-value {
        color: #1a1a1a;
        font-weight: 500;

        &.highlight {
          color: #67c23a;
          font-weight: 600;
        }
      }
    }
  }

  .transfer-arrow {
    display: flex;
    align-items: center;
    color: #409eff;
  }

  .transfer-warning {
    margin-top: 16px;
  }
}
</style>
