wms-ui/src/views/weightManage/index.vue

<template>
  <div class="gi_page">
    <div class="container">
      <!-- 步骤导航 -->
      <div class="step-nav">
        <div class="step-item" :class="{ active: activeStep >= 1, completed: activeStep > 1 }">
          <div class="step-circle">1</div>
          <div class="step-title">扫码核验</div>
        </div>
        <div class="step-line"></div>
        <div class="step-item" :class="{ active: activeStep >= 2, completed: activeStep > 2 }">
          <div class="step-circle">2</div>
          <div class="step-title">称重登记</div>
        </div>
        <div class="step-line"></div>
        <div class="step-item" :class="{ active: activeStep >= 3, completed: activeStep > 3 }">
          <div class="step-circle">3</div>
          <div class="step-title">完成创建</div>
        </div>
      </div>

      <!-- 步骤内容 -->
      <!-- 扫码核验页面 -->
      <div v-if="activeStep === 1" class="step-content">
        <div class="main-content">
          <!-- 左侧表单 -->
          <div class="left-section">
            <a-image v-if="!formData.photoUrl" :src="formData.photoUrl" />
            <img v-else :src="formData.photoUrl" class="sample-image square-image" alt="样图">

            <a-form :model="formData" layout="vertical">
              <div class="form-row">
                <div class="form-item">
                  <a-form-item label="物料名称">
                    <a-input v-model="formData.materialName" placeholder="物料名称" disabled />
                  </a-form-item>
                </div>
                <div class="form-item">
                  <a-form-item label="物料规格">
                    <a-input v-model="formData.materialSpec" placeholder="物料规格" disabled />
                  </a-form-item>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <a-form-item label="物料编码">
                    <a-input v-model="formData.encoding" placeholder="物料编码" disabled />
                  </a-form-item>
                </div>
                <div class="form-item">
                  <a-form-item label="重量(g)">
                    <a-input v-model="formData.unitWeight" placeholder="Kg" disabled />
                  </a-form-item>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <a-form-item label="物料编码">
                    <a-input
                        ref="materialCodeInput"
                        v-model="formData.inputMaterialCode"
                        placeholder="请点击此处确保光标闪烁，且输入法为英文状态，使用扫码枪扫描物料编码"
                        @keydown="handleKeyDown"
                        @input="handleMaterialCodeChange"
                    />
                  </a-form-item>
                </div>
              </div>
            </a-form>
          </div>

          <!-- 右侧信息 -->
          <div class="right-section">
            <div class="camera-section">
              <!-- 图片展示 -->
              <div class="image-placeholder square-image">
                <img
                  :src="imgData.imgUrl"
                  alt="图片展示"
                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
                />
              </div>
            </div>

            <div class="info-section">
              <div class="info-card">
                <h4>识别信息</h4>
                <div class="info-item">
                  <span class="label">物料名称:</span>
                  <span class="value">{{ formData.materialName || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">物料编码:</span>
                  <span class="value">{{ formData.encoding || '-' }}</span>
                </div>
              </div>

              <div class="info-card">
                <h4>比对结果</h4>
                <div class="info-item">
                  <span class="label">比对结果:</span>
                  <span
                      class="value match-result" :class="{
                      'match-success': compareMatchResult === 'success',
                      'match-failed': compareMatchResult === 'failed',
                      'match-pending': !compareMatchResult,
                    }"
                  >
                    <icon-check-circle-fill v-if="compareMatchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;" />
                    <icon-close-circle-fill v-else-if="compareMatchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;" />
                    {{ compareMatchResult === 'success' ? '成功' : compareMatchResult === 'failed' ? '失败' : '请放置需比对的物料到扫描区域！' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 称重登记页面 - 这里放FLV播放器 -->
      <div v-else-if="activeStep === 2" class="step-content">
        <div class="weighing-content">
          <!-- 左侧输入区域 -->
          <div class="left-weighing-section">
            <div class="form-row">
              <div class="form-item">
                <label>物料名称:</label>
                <a-input v-model="formData.materialName" placeholder="物料名称" disabled />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>输入数量:</label>
                <a-input-number  :min="1" mode="button" v-model="inputQuantity" placeholder="请输入数量" @change="calculateWeight" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>标准重量(g):</label>
                <a-input v-model="calculatedWeight" placeholder="-" disabled />
              </div>
              <div class="form-item">
                <label>称重重量(g):</label>
                <a-input v-model="ahDeviceWeight" placeholder="-" disabled />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>该物料重量范围:</label>
                <a-input v-model="formData.weightRange" placeholder="该物料重量范围" disabled />
              </div>
            </div>

            <!-- 图片展示 -->
            <div class="image-placeholder square-image">
              <img
                :src="weighingImgData.imgUrl"
                alt="称重图片"
                style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
              />
              <!-- 错误状态 -->
              <div v-if="weighingPageStatus === 'error'" class="video-overlay error">
                <icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
                <span>连接异常</span>
                <a-button size="small" type="primary" @click="enterWeighPage">重试</a-button>
              </div>
              <!-- 加载状态 -->
              <div v-if="weighingPageStatus === 'entering'" class="video-overlay">
                <a-spin />
                <span style="margin-left: 8px;">加载中...</span>
              </div>
            </div>

            <div class="weighing-actions">
              <a-button type="primary" @click="handleConfirm">确定</a-button>
              <a-button style="margin-left: 12px;" @click="handleReset">重置</a-button>
            </div>
          </div>

          <!-- 右侧表格区域 -->
          <div class="right-weighing-section">
            <div class="weighing-section">
              <div class="section-header">
                <h4>称重列表</h4>
              </div>
              <a-table :columns="columns" :data="weighingList" bordered>
                <template #image="{ record }">
                  <a-image width="60" :src="record.image"/>
                </template>

                <template #action="{ record }">
                  <a-button type="text" status="danger" @click="handleDelete(record.key)">
                    删除
                  </a-button>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </div>

      <!-- 完成创建页面 -->
      <div v-else-if="activeStep === 3" class="step-content">
        <div class="completion-content">
          <div class="completion-icon">
            <a-icon type="check-circle" :size="64" style="color: #52c41a;" />
          </div>
          <h2>{{ workOrderResp.matchResult === 'success' ? '创建成功' : '创建失败' }}</h2>
          <p>{{ workOrderResp.matchResult === 'success' ? '任务创建成功' : '任务创建失败' }}，以下是任务详情：</p>
          <div class="completion-info">
            <div class="info-item">
              <span class="label">任务工单号:</span>
              <span class="value">{{ workOrderResp.orderNo }}</span>
            </div>
            <div class="info-item">
              <span class="label">物料名称:</span>
              <span class="value">{{ formData.materialName }}</span>
            </div>
            <div class="info-item">
              <span class="label">物料编码:</span>
              <span class="value">{{ formData.encoding }}</span>
            </div>
            <div class="info-item">
              <span class="label">物料总个数:</span>
              <span class="value">{{ workOrderResp.totalCount }}</span>
            </div>
            <div class="info-item">
              <span class="label">标准总重量(g):</span>
              <span class="value">{{ workOrderResp.totalCalculatedWeight }}</span>
            </div>
            <div class="info-item">
              <span class="label">实际总重量(g):</span>
              <span class="value">{{ workOrderResp.totalWeight }}</span>
            </div>
          </div>
          <div class="completion-actions">
            <a-button type="primary" @click="onPrint">打印</a-button>
            <a-button type="primary" @click="handleBackToFirst">返回首页</a-button>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <a-button
            v-if="activeStep > 1 && activeStep < 3"
            class="previous-button"
            @click="handlePrevious"
        >
          上一步
        </a-button>
        <a-button
            v-if="activeStep < 3"
            type="primary"
            class="next-button"
            @click="handleNext"
        >
          {{ activeStep === 2 ? '完成' : (compareMatchResult === 'success' ? '下一步' : '开始比对') }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { Message, Modal, Notification } from '@arco-design/web-vue'
import { getMaterialDetail, validateWeighing, vmSend } from '@/apis/weightManage/weightManage'
import {type WorkOrderResp, addWorkOrder} from '@/apis/workOrder/workOrder'
import {getCaptureImage, getCheckStatus, getEnterWeighPage, getLeaveWeighPage} from "@/apis/weightManage/ys";
import {brightness, connect, disconnect} from "@/apis/weightManage/light";

import router from "@/router";
import type {TableInstanceColumns} from "@/components/GiTable/type";

defineOptions({ name: 'WeightManage' })

// 当前步骤
const activeStep = ref(1)

// 表单数据
const formData = reactive({
  inputMaterialCode: '', // 输入的物料编码
  id: '', // 物料ID
  encoding: '', // 物料编码
  materialName: '', // 物料名称
  materialSpec: '', // 物料规格
  unitWeight: 0, // 重量
  photoUrl: '', // 样图URL
  weightRange: '', // 物料重量范围
})

const imgData = reactive({
  imgUrl: 'http://localhost:6609/file/001.bmp', // 样图URL
  baseUrl: 'http://localhost:6609/file/001.bmp' // 基础URL
})

const weighingImgData = reactive({
  imgUrl: 'http://localhost:6609/file/ys/carousel.jpg', // 称重页面图片URL
  baseUrl: 'http://localhost:6609/file/ys/carousel.jpg' // 基础URL
})

// 比对结果
const compareMatchResult = ref('')

// 物料编码输入框引用
const materialCodeInput = ref<any>(null)

// 称重页面状态
const weighingPageStatus = ref<'idle' | 'entering' | 'entered' | 'error'>('idle')

// 检查状态定时器
let statusCheckTimer: any = null


// 图片刷新定时器
let imageRefreshTimer: any = null

// 进入称重页面
const enterWeighPage = async () => {
  weighingPageStatus.value = 'entering'
  try {
    const res = await getEnterWeighPage();
    if (res.code === '0') {
      weighingPageStatus.value = 'entered'
      // 启动状态检查
      startStatusCheck()
    } else {
      weighingPageStatus.value = 'error'
      Message.error(res.msg)
    }
  } catch (error) {
    weighingPageStatus.value = 'error'
    Message.error("摄像头连接失败")
  }
}

// 离开称重页面
const leaveWeighPage = async () => {
  try {
    await getLeaveWeighPage();
  } catch (error) {
    console.error('离开称重页面失败:', error)
  }
  // 停止状态检查
  stopStatusCheck()
  weighingPageStatus.value = 'idle'
}

// 手动抓图
const captureImage = async (imgName) => {
  try {
    const response = await getCaptureImage(imgName);
    if (response.code === '0') {
      return response.data
    }
    return null
  } catch (error) {
    console.error('抓图失败:', error)
    return null
  }
}

// 检查状态
const checkStatus = async () => {
  try {
    const response = await getCheckStatus();
    if (response.code !== '0') {
      weighingPageStatus.value = 'error'
    }
  } catch (error) {
    weighingPageStatus.value = 'error'
  }
}

// 启动状态检查
const startStatusCheck = () => {
  // 每30秒检查一次状态
  statusCheckTimer = setInterval(checkStatus, 30000)
}

// 停止状态检查
const stopStatusCheck = () => {
  if (statusCheckTimer) {
    clearInterval(statusCheckTimer)
    statusCheckTimer = null
  }
}

// 组件挂载时
onMounted(() => {
  // 启动图片自动刷新，每秒更新一次
  imageRefreshTimer = setInterval(() => {
    // 添加时间戳参数，避免浏览器缓存
    imgData.imgUrl = `${imgData.baseUrl}?t=${Date.now()}`
    weighingImgData.imgUrl = `${weighingImgData.baseUrl}?t=${Date.now()}`
  }, 1500)

  // 页面加载后自动聚焦到物料编码输入框
  nextTick(() => {
    if (materialCodeInput.value) {
      materialCodeInput.value.focus()
    }
  })

  // 初始进入扫码验证页面，连接灯光
  if (activeStep.value === 1) {
    connect().catch(error => {
      console.error('连接灯光失败:', error)
    })
  }

  // 监听步骤变化
  watch(activeStep, (newVal) => {
    if (newVal === 1) {
      // 进入扫码验证页面，连接灯光
      connect().catch(error => {
        console.error('连接灯光失败:', error)
      })
    } else if (newVal === 2) {
      // 进入称重登记页面，断开灯光
      disconnect().catch(error => {
        console.error('断开灯光失败:', error)
      })
      nextTick(() => {
        enterWeighPage()
      })
    } else {
      // 离开称重页面，断开灯光
      leaveWeighPage()
      disconnect().catch(error => {
        console.error('断开灯光失败:', error)
      })
    }
  })
})

// 组件卸载时
onBeforeUnmount(() => {
  // 清除图片刷新定时器
  if (imageRefreshTimer) {
    clearInterval(imageRefreshTimer)
    imageRefreshTimer = null
  }
  // 停止状态检查
  stopStatusCheck()
  // 离开称重页面
  if (activeStep.value === 2) {
    leaveWeighPage()
  }
  // 断开灯光连接
  disconnect().catch(error => {
    console.error('断开灯光失败:', error)
  })
})

const workOrderResp = ref<WorkOrderResp>({
  id: '',
  title: '',
  orderNo: '',
  materialName: '',
  encoding: '',
  unitWeight: '',
  materialSpec: '',
  photoUrl: '',
  totalWeight: '',
  totalCount: '',
  createUserString: '',
  updateUserString: '',
  totalCalculatedWeight: '',
  workOrderInfos: [],
  matchResult: 'failed',
  qrCodeData: '',
})

// 称重登记页面数据
const inputQuantity = ref()
// todo
const ahDeviceWeight = ref('')
const calculatedWeight = ref('')
const weighingCount = ref(1)

// WebSocket连接
const ws = ref<WebSocket | null>(null)
const wsConnected = ref(false)

// 称重列表数据
const weighingList = ref([
  // 初始数据可以在这里添加
])

// 称重表格列
const columns = ref<TableInstanceColumns[]>([
  { title: '序号', dataIndex: 'weightTime', key: 'weightTime',},
  { title: '数量', dataIndex: 'quantity', key: 'quantity', className: 'green-bg',},
  { title: '称重重量(g)', dataIndex: 'weight', key: 'weight', className: 'green-bg',},
  { title: '标准重量(g)', dataIndex: 'calculatedWeight', key: 'calculatedWeight',},
  { title: '抓图', dataIndex: 'image', key: 'image',slotName: 'image',},
  { title: '操作', dataIndex: 'action', key: 'action', slotName: 'action',},
])

// 防抖函数
const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
  let timer: ReturnType<typeof setTimeout> | null = null
  return function (...args: Parameters<T>) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, delay)
  }
}

// 原始的物料编码变化处理函数
const originalHandleMaterialCodeChange = async () => {
  // 确保输入框内容是完整的物料编码
  const materialCode = formData.inputMaterialCode?.trim()

  // 无论是否有输入，先重置所有物料相关字段，确保新数据能完全覆盖旧数据
  formData.encoding = ''
  formData.materialName = ''
  formData.materialSpec = ''
  formData.unitWeight = 0
  formData.photoUrl = ''
  formData.weightRange = ''
  compareMatchResult.value = '';

  // 如果有物料编码输入，获取物料数据
  if (materialCode) {
    try {
      await fetchMaterialData(materialCode)
    } catch (error) {
      console.error('获取物料数据失败:', error)
      // 即使获取失败，也保持字段为空，避免显示旧数据
    }
  }
}

// 记录上次输入时间，用于判断是否是扫码枪输入
let lastInputTime = 0
// 记录是否正在接收扫码输入
let isScanning = false

// 处理键盘按下事件
const handleKeyDown = (event: KeyboardEvent) => {
  // 获取当前时间
  const currentTime = Date.now()

  // 计算时间差
  const timeDiff = currentTime - lastInputTime
  // 检查是否是回车键（扫码枪通常以回车键结束）
  if (event.key === 'Enter') {
    // 扫码结束，标记为不在扫描中
    isScanning = false
    // 不阻止默认行为，让表单可以正常提交
  }
  // 检查是否是新的扫码开始
  // 当时间间隔大于300ms，且不是修饰键，且不是功能键时，认为是新的扫码开始
  else if (timeDiff > 300 && !event.ctrlKey && !event.altKey && !event.metaKey) {
      // 清空输入框，准备接收新的扫码数据
      formData.inputMaterialCode = ''
      // 标记为开始扫描
      isScanning = true
    // }
  }

  // 更新上次输入时间
  lastInputTime = currentTime
}

// 带防抖的物料编码变化处理函数
const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500) // 500ms防抖延迟

// 扫码核验获取物料信息
const fetchMaterialData = async (code: string) => {
  const res = await getMaterialDetail(code);
    if (res.code === '0') {
      // 更新表单数据
      formData.id = res.data?.id || ''
      formData.encoding = res.data?.encoding || ''
      formData.materialName = res.data?.materialName || ''
      formData.materialSpec = res.data?.materialSpec || ''
      formData.unitWeight = res.data?.unitWeight || 0
      formData.photoUrl = res.data?.photoUrl || ''
      formData.weightRange = (res.data?.downFloatRatio || '-') + '% ~ ' + (res.data?.upFloatRatio || '-') + '%'
    }
    if(res.data && res.data.id) {
      await brightness(res.data.id);
    }
}

// 处理下一步
const handleNext = async () => {
  if (activeStep.value < 3) {
    if (activeStep.value === 2) {
      // 当在称重登记页面点击完成时，显示确认弹框
      Modal.confirm({
        title: '确认完成',
        content: '确定要完成称重登记吗？',
        onOk: async () => {
          try {
            // 准备工作订单数据
            const workOrderData = {
              materialId: formData.id,
              workOrderInfos: weighingList.value,
            }
            // 调用后端接口
            addWorkOrder(workOrderData).then((res) => {
              if (res.code === '0') {
                Notification.success({
                  title: '操作成功',
                  content: `工单创建成功！`,
                })
                workOrderResp.value.id = res.data?.id || ''
                workOrderResp.value.matchResult = 'success'
                workOrderResp.value.title = res.data?.title || ''
                workOrderResp.value.orderNo = res.data?.orderNo || ''
                workOrderResp.value.totalWeight = res.data?.totalWeight || ''
                workOrderResp.value.totalCalculatedWeight = res.data?.totalCalculatedWeight || ''
                workOrderResp.value.totalCount = res.data?.totalCount || ''

                // 关闭WebSocket连接
                closeWebSocket()
                // 跳转到完成页面
                activeStep.value++
                return true
              }
            })
          } catch (error) {
            console.error('创建工作订单失败:', error)
            Message.error('创建工作订单失败')
          }
        },
      })
    } else if (activeStep.value === 1 && compareMatchResult.value !== 'success') {
      // 当在扫码核验页面点击开始比对时，调用后端接口获取比对结果
      try {
        // 这里应该调用后端的比对接口，暂时使用fetchMaterialData模拟
        // 实际项目中应该替换为专门的比对接口
        const materialCode = formData.inputMaterialCode?.trim()
        if (!materialCode) {
          Message.error('请先扫描物料编码')
          return
        }

        // 调用后端接口获取比对结果 // todo
        const res = await vmSend(materialCode);
        if (res.data && res.data == materialCode) {
          compareMatchResult.value === 'success';
          Message.success('比对成功')
        } else {
          // 比对失败，提示错误
          Message.error('比对失败')
        }
      } catch (error) {
        console.error('比对失败:', error)
        Message.error('比对失败，请重试')
      }
    } else {
      activeStep.value++
      // 进入称重页面时建立WebSocket连接
      if (activeStep.value === 2) {
        establishWebSocket()
      }
    }
  }
}



// 处理上一步
const handlePrevious = () => {
  if (activeStep.value > 1) {
    activeStep.value--
    // 离开称重页面时关闭WebSocket连接
    if (activeStep.value !== 2) {
      closeWebSocket()
    }
  }
}

// 打印
const onPrint = () => {
  // 跳转到标签打印页面，并传递数据
  router.push({
    path: '/print',
    query: {
      workerOrderId: workOrderResp.value.id,
    }
  })
}

// 返回第一步
const handleBackToFirst = () => {
  // 重置所有数据
  activeStep.value = 1

  // 重置表单数据
  formData.inputMaterialCode = ''
  formData.id = ''
  formData.encoding = ''
  formData.materialName = ''
  formData.materialSpec = ''
  formData.unitWeight = 0
  formData.photoUrl = ''

  compareMatchResult.value = ''

  // 重置称重登记页面数据
  inputQuantity.value = ''
  // todo
  ahDeviceWeight.value = ''
  calculatedWeight.value = ''
  weighingCount.value = 1
  // 清空称重列表
  weighingList.value = []

  // 重置工作订单响应数据
  workOrderResp.value = {}

  // 离开称重页面时关闭WebSocket连接
  closeWebSocket()

  // 回到第一步后自动聚焦到物料编码输入框
  nextTick(() => {
    if (materialCodeInput.value) {
      materialCodeInput.value.focus()
    }
  })
}

// 计算重量
const calculateWeight = () => {
  if (inputQuantity.value && formData.unitWeight) {
    const singleWeight = Number.parseFloat(formData.unitWeight.toString())
    const quantity = Number.parseFloat(inputQuantity.value)
    if (!isNaN(singleWeight) && !isNaN(quantity)) {
      calculatedWeight.value = (singleWeight * quantity).toFixed(2)
    }
  } else {
    calculatedWeight.value = ''
  }
}


//处理确定
const handleConfirm = async () => {
  // 校验输入数量是否为空
  if (!inputQuantity.value || inputQuantity.value <= 0) {
    Message.error('数量需大于0！')
    return
  }
  if (!ahDeviceWeight.value || ahDeviceWeight.value.trim() === '') {
    Message.error('电子秤称重结果为空！')
    return
  }

  const data = {
    calculatedWeight: calculatedWeight.value,
    materialId: formData.id,
    inputQuantity: inputQuantity.value,
    ahDeviceWeight: ahDeviceWeight.value,
  }

  const res = await validateWeighing(data);
  // 然后处理错误信息
  if (!res || !res.code) {
    return;
  }
  if (res.data.code !== '200') {
    if (res.data.code !== '501') {
      playAudio('tooMany')
    }
    if (res.data.code !== '502') {
      playAudio('tooLess')
    }
    Message.error(res.data.msg || '系统异常！');
    return;
  }


  // 立即创建一个新项的基本数据
  const newItem = {
    key: (weighingList.value.length + 1).toString(),
    weightTime: weighingCount.value,
    materialId: formData.id,
    quantity: inputQuantity.value,
    weight: ahDeviceWeight.value,
    calculatedWeight: calculatedWeight.value,
    image: '加载中...', // 先显示加载状态
  }

  // 先添加到列表，让用户能立即看到记录
  weighingList.value.push(newItem)

  // 重置输入（让用户能继续输入）
  inputQuantity.value = ''
  // todo
  ahDeviceWeight.value = ''
  calculatedWeight.value = ''
  weighingCount.value = weighingList.value.length + 1

  // 调用手动抓图接口
  const imageUrl = await captureImage(newItem.key + '_' + newItem.materialId);
  const addedItem = weighingList.value.find((item) => item.key === newItem.key)
  if (addedItem) {
    addedItem.image = imageUrl || '抓图失败'
    // 触发视图更新
    weighingList.value = [...weighingList.value]
  }
  Message.success('添加成功')
}



// 处理重置
const handleReset = () => {
  inputQuantity.value = ''
  ahDeviceWeight.value = ''
  calculatedWeight.value = ''
}

// 处理删除
const handleDelete = (key) => {
  // 过滤掉要删除的项
  weighingList.value = weighingList.value.filter((item) => item.key !== key)
  // 重新排序称重次数
  weighingList.value.forEach((item, index) => {
    item.weightTime = index + 1
  })
  // 更新当前称重次数
  weighingCount.value = weighingList.value.length + 1
}

// 建立WebSocket连接
const establishWebSocket = () => {
  try {
    // 这里替换为实际的WebSocket服务器地址
    const wsUrl = 'ws://localhost:6609/ws/scale'
    ws.value = new WebSocket(wsUrl)

    ws.value.onopen = () => {
      Message.success('已和电子秤建立连接')
    }

    ws.value.onmessage = (event) => {
      try {
        if (event.data) {
          ahDeviceWeight.value = event.data
        }
      } catch (error) {
        console.error('WebSocket消息解析失败:', error)
      }
    }

    ws.value.onclose = () => {
      wsConnected.value = false
    }

    ws.value.onerror = (error) => {
      console.error('WebSocket错误:', error)
      wsConnected.value = false
      Message.error('称重连接失败')
    }
  } catch (error) {
    console.error('建立WebSocket连接失败:', error)
    Message.error('无法建立称重连接')
  }
}

// 关闭WebSocket连接
const closeWebSocket = () => {
  if (ws.value) {
    ws.value.close()
    ws.value = null
    wsConnected.value = false
  }
}

// 播放音频文件
const playAudio = (filename: string) => {
    console.log(filename)
  try {
    // 创建音频对象并播放
    const audio = new Audio(`/src/assets/wav/${filename}.wav`)
    audio.play().catch(error => {
      console.error('音频播放失败:', error)
    })
  } catch (error) {
    console.error('播放音频时出错:', error)
  }
}

// 组件卸载时关闭WebSocket连接
onUnmounted(() => {
  closeWebSocket()
})
</script>

<style scoped lang="scss">
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 步骤导航 */
.step-nav {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #e8e8e8;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.step-title {
  font-size: 14px;
  color: #666;
}

.step-line {
  flex: 1;
  height: 2px;
  background-color: #e8e8e8;
  margin: 0 20px;
}

.step-item.active .step-circle {
  background-color: #1677ff;
  color: white;
}

.step-item.active .step-title {
  color: #1677ff;
  font-weight: bold;
}

.step-item.completed .step-circle {
  background-color: #52c41a;
  color: white;
}

.step-item.completed .step-title {
  color: #52c41a;
}

.step-item.completed ~ .step-line {
  background-color: #52c41a;
}

/* 步骤内容 */
.step-content {
  margin-bottom: 30px;
}

/* 主内容区域 */
.main-content {
  display: flex;
  margin-bottom: 30px;
}

.left-section {
  flex: 1;
  margin-right: 30px;
}

.right-section {
  flex: 1;
}

/* 称重登记页面 */
.weighing-content {
  display: flex;
  margin-bottom: 30px;
}

.left-weighing-section {
  width: 400px;
  margin-right: 30px;
}

.right-weighing-section {
  flex: 1;
}

.weighing-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}



.input-placeholder {
  width: 100%;
  height: 32px;
  background-color: #e8e8e8;
  border-radius: 4px;
  margin-top: 8px;
}

.weighing-actions {
  margin-top: 20px;
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 绿色背景列 */
:deep(.green-bg) {
  background-color: #f6ffed;
}

/* 完成创建页面 */
.completion-content {
  text-align: center;
  padding: 60px 0;
}

.completion-icon {
  margin-bottom: 20px;
}

.completion-content h2 {
  margin-bottom: 20px;
  color: #52c41a;
}

.completion-content p {
  margin-bottom: 30px;
  font-size: 16px;
}

.completion-info {
  max-width: 400px;
  margin: 0 auto 40px;
  text-align: left;
  background-color: var(--color-bg-2);
  padding: 20px;
  border-radius: 4px;
}

.info-item {
  margin-bottom: 12px;
  display: flex;
}

.info-item .label {
  width: 100px;
  font-weight: bold;
}

.info-item .value {
  flex: 1;
}

.completion-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 图片占位符 */
.image-placeholder {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}

/* 视频覆盖层样式（用于错误和加载状态） */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 10px;
}

.video-overlay.error {
  background: rgba(255, 77, 79, 0.2);
}

/* 正方形图片 */
.square-image {
  width: 200px;
  height: 200px;
}

/* 样图 */
.sample-image {
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: 4px;
}

/* 相机区域 */
.camera-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.camera-section .image-placeholder {
  width: calc(50% - 10px);
}

/* 表单区域 */
.form-section {
  margin-top: 20px;
}

.form-row {
  display: flex;
  margin-bottom: 16px;
}

.form-item {
  flex: 1;
  margin-right: 20px;
}

.form-item.full-width {
  flex: 1;
  margin-right: 0;
}

/* 确保输入框宽度一致 */
:deep(.arco-input-wrapper) {
  width: 100%;
  height: 35px;
}

:deep(.arco-input) {
  font-size: 16px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #666;
}

.form-actions {
  margin-top: 20px;
}

/* 信息区域 */
.info-section {
  margin-top: 20px;
}

.info-card {
  background-color: var(--color-bg-2);
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.info-card h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.info-item .label {
  width: 100px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.info-item .value {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.match-result {
  font-weight: 500;
  display: flex;
  align-items: center;
}

.match-success {
  color: #52c41a;
}

.match-failed {
  color: #ff4d4f;
}

.match-pending {
  color: #d9d9d9;
}

.info-text {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
}

.next-button {
  width: 120px;
  height: 40px;
  font-size: 14px;
}

.previous-button {
  width: 120px;
  height: 40px;
  font-size: 14px;
  margin-right: 12px;
}
</style>