tjy-uniapp/src/pages/equipment/detail/components/ContainerEquipmentInfo.vue

<template>
  <view class="equipment-info-container">
    <!-- 容器设计制造安装信息 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">容器设计制造安装信息</text>
        <!-- 编辑按钮栏 -->
        <view v-if="canEdit" class="edit-bar">
          <button v-if="useOnline === '1'" class="ocr-btn" @click="handleOcr">
            <text class="operate-btn-text">拍照录入</text>
          </button>
          <button class="edit-btn" @click="handleEdit">
            <text class="operate-btn-text">
              {{ isEdit ? (useOnline === '1' ? '保存' : '暂存') : '编辑' }}
            </text>
          </button>
          <button v-if="isEdit && useOnline !== '1'" class="upload-btn" @click="handleUpload">
            <text class="operate-btn-text">上传</text>
          </button>
        </view>
      </view>
      <view class="table">
        <!-- 设备名称 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">设备名称</text>
            <text v-if="isEdit" class="must">*</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipName"
              class="edit-input-text"
              placeholder="请输入设备名称"
            />
            <text v-else class="cell-text">{{ equipment.equipName || '--' }}</text>
          </view>
        </view>

        <!-- 设备种类 + 设备类别 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">设备种类</text>
            <text v-if="isEdit" class="must">*</text>
          </view>
          <view class="table-cell content">
            <view v-if="isEdit" class="edit-input" @click="handlePicker('equipmentType')">
              <text>
                {{ getDictLabel('equipmentType', tempData.equipmentType) || '请选择' }}
              </text>
              <image class="arrow-icon" src="/static/images/arrow-right.png" />
            </view>
            <text v-else class="cell-text">{{ equipment.equipmentType || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">设备类别</text>
            <text v-if="isEdit" class="must">*</text>
          </view>
          <view class="table-cell content">
            <view v-if="isEdit" class="edit-input" @click="handlePicker('type')">
              <text>{{ getDictLabel('type', tempData.type) || '请选择' }}</text>
              <image class="arrow-icon" src="/static/images/arrow-right.png" />
            </view>
            <text v-else class="cell-text">{{ equipment.type || '--' }}</text>
          </view>
        </view>

        <!-- 设备品种 + 容器归类 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">设备品种</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipCategory"
              class="edit-input-text"
              placeholder="请输入设备品种"
            />
            <text v-else class="cell-text">{{ equipment.equipCategory || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">容器归类</text>
            <text v-if="isEdit" class="must">*</text>
          </view>
          <view class="table-cell content">
            <view v-if="isEdit" class="edit-input" @click="handlePicker('equipType')">
              <text>{{ getDictLabel('equipType', tempData.equipType) || '请选择' }}</text>
              <image class="arrow-icon" src="/static/images/arrow-right.png" />
            </view>
            <text v-else class="cell-text">{{ equipment.equipTypeName || '--' }}</text>
          </view>
        </view>

        <!-- 设备注册代码 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">设备注册代码</text>
            <text v-if="isEdit" class="must">*</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipCode"
              class="edit-input-text"
              placeholder="请输入设备注册代码"
            />
            <text v-else class="cell-text">{{ equipment.equipCode || '--' }}</text>
          </view>
        </view>

        <!-- 产品编号 + 使用登记证编号 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">产品编号</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.productNo"
              class="edit-input-text"
              placeholder="请输入产品编号"
            />
            <text v-else class="cell-text">{{ equipment.productNo || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">使用登记证编号</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.useRegisterNo"
              class="edit-input-text"
              placeholder="请输入使用登记证编号"
            />
            <text v-else class="cell-text">{{ equipment.useRegisterNo || '--' }}</text>
          </view>
        </view>

        <!-- 单位内编号 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">单位内编号</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.unitInnerNo"
              class="edit-input-text"
              placeholder="请输入单位内编号"
            />
            <text v-else class="cell-text">{{ equipment.unitInnerNo || '--' }}</text>
          </view>
        </view>

        <!-- 设计单位 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">设计单位</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.designUnit"
              class="edit-input-text"
              placeholder="请输入设计单位"
            />
            <text v-else class="cell-text">{{ equipment.designUnit || '--' }}</text>
          </view>
        </view>

        <!-- 设计日期 + 产品标准 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">设计日期</text>
          </view>
          <view class="table-cell content">
            <picker
              v-if="isEdit"
              mode="date"
              :value="tempData.designDate"
              @change="onDesignDateChange"
            >
              <view class="edit-input">
                <text>{{ tempData.designDate || '请选择' }}</text>
                <image class="arrow-icon" src="/static/images/arrow-right.png" />
              </view>
            </picker>
            <text v-else class="cell-text">{{ equipment.designDate || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">产品标准</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.productStandard"
              class="edit-input-text"
              placeholder="请输入产品标准"
            />
            <text v-else class="cell-text">{{ equipment.productStandard || '--' }}</text>
          </view>
        </view>

        <!-- 容器图号 + 设计使用年限 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">容器图号</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipMapNo"
              class="edit-input-text"
              placeholder="请输入容器图号"
            />
            <text v-else class="cell-text">{{ equipment.equipMapNo || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">设计使用年限</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.designUseYears"
              class="edit-input-text"
              placeholder="请输入设计使用年限"
            />
            <text v-else class="cell-text">{{ equipment.designUseYears || '--' }}</text>
          </view>
        </view>

        <!-- 制造单位 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">制造单位</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.makeUnit"
              class="edit-input-text"
              placeholder="请输入制造单位"
            />
            <text v-else class="cell-text">{{ equipment.makeUnit || '--' }}</text>
          </view>
        </view>

        <!-- 制造日期 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">制造日期</text>
          </view>
          <view class="table-cell content">
            <picker v-if="isEdit" mode="date" :value="tempData.makeDate" @change="onMakeDateChange">
              <view class="edit-input">
                <text>{{ tempData.makeDate || '请选择' }}</text>
                <image class="arrow-icon" src="/static/images/arrow-right.png" />
              </view>
            </picker>
            <text v-else class="cell-text">{{ equipment.makeDate || '--' }}</text>
          </view>
        </view>

        <!-- 安装单位 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">安装单位</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.installUnit"
              class="edit-input-text"
              placeholder="请输入安装单位"
            />
            <text v-else class="cell-text">{{ equipment.installUnit || '--' }}</text>
          </view>
        </view>

        <!-- 投入使用日期 + 主体结构型式 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">投入使用日期</text>
          </view>
          <view class="table-cell content">
            <picker
              v-if="isEdit"
              mode="date"
              :value="tempData.useDate"
              @change="onUseDateChange"
            >
              <view class="edit-input">
                <text>{{ tempData.useDate || '请选择' }}</text>
                <image class="arrow-icon" src="/static/images/arrow-right.png" />
              </view>
            </picker>
            <text v-else class="cell-text">{{ equipment.useDate || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">主体结构型式</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.mainStructure"
              class="edit-input-text"
              placeholder="请输入主体结构型式"
            />
            <text v-else class="cell-text">{{ equipment.mainStructure || '--' }}</text>
          </view>
        </view>

        <!-- 安装型式 + 支座型式 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">安装型式</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.installType"
              class="edit-input-text"
              placeholder="请输入安装型式"
            />
            <text v-else class="cell-text">{{ equipment.installType || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">支座型式</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.supportType"
              class="edit-input-text"
              placeholder="请输入支座型式"
            />
            <text v-else class="cell-text">{{ equipment.supportType || '--' }}</text>
          </view>
        </view>

        <!-- 保温绝热方式 + 容积 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">保温绝热方式</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.insulationType"
              class="edit-input-text"
              placeholder="请输入保温绝热方式"
            />
            <text v-else class="cell-text">{{ equipment.insulationType || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">容积</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipVolume"
              class="edit-input-text"
              placeholder="请输入容积"
            />
            <text v-else class="cell-text">{{ equipment.equipVolume || '--' }}</text>
          </view>
        </view>

        <!-- 容器内径 + 容器高（长） -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">容器内径</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipInnerDiameter"
              class="edit-input-text"
              placeholder="请输入容器内径"
            />
            <text v-else class="cell-text">{{ equipment.equipInnerDiameter || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">容器高（长）</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.equipHeight"
              class="edit-input-text"
              placeholder="请输入容器高（长）"
            />
            <text v-else class="cell-text">{{ equipment.equipHeight || '--' }}</text>
          </view>
        </view>

        <!-- 最大允许充装量 + 腔体结构 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">最大允许充装量</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.maxAllowFill"
              class="edit-input-text"
              placeholder="请输入最大允许充装量"
            />
            <text v-else class="cell-text">{{ equipment.maxAllowFill || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">腔体结构</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.cavityStructure"
              class="edit-input-text"
              placeholder="请输入腔体结构"
            />
            <text v-else class="cell-text">{{ equipment.cavityStructure || '--' }}</text>
          </view>
        </view>

        <!-- 设计压力 + 工作压力 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">设计压力</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.designPressure"
              class="edit-input-text"
              placeholder="请输入设计压力"
            />
            <text v-else class="cell-text">{{ equipment.designPressure || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">工作压力</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.workPressure"
              class="edit-input-text"
              placeholder="请输入工作压力"
            />
            <text v-else class="cell-text">{{ equipment.workPressure || '--' }}</text>
          </view>
        </view>

        <!-- 设计温度 + 工作介质 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">设计温度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.designTemperature"
              class="edit-input-text"
              placeholder="请输入设计温度"
            />
            <text v-else class="cell-text">{{ equipment.designTemperature || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">工作介质</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.workMedium"
              class="edit-input-text"
              placeholder="请输入工作介质"
            />
            <text v-else class="cell-text">{{ equipment.workMedium || '--' }}</text>
          </view>
        </view>

        <!-- 筒体腐蚀裕度 + 封头腐蚀裕度 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">筒体腐蚀裕度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.corrosionAllowance"
              class="edit-input-text"
              placeholder="请输入筒体腐蚀裕度"
            />
            <text v-else class="cell-text">{{ equipment.corrosionAllowance || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">封头腐蚀裕度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.headCorrosionAllowance"
              class="edit-input-text"
              placeholder="请输入封头腐蚀裕度"
            />
            <text v-else class="cell-text">{{ equipment.headCorrosionAllowance || '--' }}</text>
          </view>
        </view>

        <!-- 筒体材质 + 封头材质 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">筒体材质</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.canisterMaterial"
              class="edit-input-text"
              placeholder="请输入筒体材质"
            />
            <text v-else class="cell-text">{{ equipment.canisterMaterial || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">封头材质</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.headMaterial"
              class="edit-input-text"
              placeholder="请输入封头材质"
            />
            <text v-else class="cell-text">{{ equipment.headMaterial || '--' }}</text>
          </view>
        </view>

        <!-- 夹套材质 + 衬里材料 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">夹套材质</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.sleeveMaterial"
              class="edit-input-text"
              placeholder="请输入夹套材质"
            />
            <text v-else class="cell-text">{{ equipment.sleeveMaterial || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">衬里材料</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.linerMaterial"
              class="edit-input-text"
              placeholder="请输入衬里材料"
            />
            <text v-else class="cell-text">{{ equipment.linerMaterial || '--' }}</text>
          </view>
        </view>

        <!-- 筒体厚度 + 封头厚度 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">筒体厚度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.canisterPly"
              class="edit-input-text"
              placeholder="请输入筒体厚度"
            />
            <text v-else class="cell-text">{{ equipment.canisterPly || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">封头厚度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.headPly"
              class="edit-input-text"
              placeholder="请输入封头厚度"
            />
            <text v-else class="cell-text">{{ equipment.headPly || '--' }}</text>
          </view>
        </view>

        <!-- 夹套厚度 + 衬里厚度 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">夹套厚度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.sleevePly"
              class="edit-input-text"
              placeholder="请输入夹套厚度"
            />
            <text v-else class="cell-text">{{ equipment.sleevePly || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">衬里厚度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.linerPly"
              class="edit-input-text"
              placeholder="请输入衬里厚度"
            />
            <text v-else class="cell-text">{{ equipment.linerPly || '--' }}</text>
          </view>
        </view>

        <!-- 工作温度 + 设计介质 -->
        <view class="table-row-split">
          <view class="table-cell title">
            <text class="cell-title">工作温度</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.workTemperature"
              class="edit-input-text"
              placeholder="请输入工作温度"
            />
            <text v-else class="cell-text">{{ equipment.workTemperature || '--' }}</text>
          </view>
          <view class="table-cell title">
            <text class="cell-title">设计介质</text>
          </view>
          <view class="table-cell content">
            <input
              v-if="isEdit"
              v-model="tempData.designMedium"
              class="edit-input-text"
              placeholder="请输入设计介质"
            />
            <text v-else class="cell-text">{{ equipment.designMedium || '--' }}</text>
          </view>
        </view>

        <!-- 主体材质 -->
        <view class="table-row">
          <view class="table-cell title">
            <text class="cell-title">主体材质</text>
          </view>
                              <view class="table-cell content">
            <input
              v-if="isEdit && tempData"
              v-model="tempData.mainMaterial"
              class="edit-input-text"
              placeholder="请输入主体材质"
            />
            <text v-else class="cell-text">{{ equipment.mainMaterial || '--' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 选择器弹窗 -->
    <view v-if="showPicker" class="popup-overlay" @click="closePicker">
      <view class="picker-popup" @click.stop>
        <view class="picker-header">
          <text class="picker-cancel" @click="closePicker">取消</text>
          <text class="picker-title">{{ pickerTitle }}</text>
          <text class="picker-confirm" @click="confirmPicker">确定</text>
        </view>
        <picker-view class="picker-view" :value="pickerIndex" @change="onPickerChange">
          <picker-view-column>
            <view v-for="item in pickerList" :key="item.value" class="picker-item">
              <text>{{ item.label }}</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { updateEquipApi } from '@/api/task'
import { useUserStore } from '@/store/user'

interface Props {
  equipmentData: any
  useOnline?: string
  canEdit?: boolean
  orderId?: string
  orderItemId?: string
  equipId?: string
  uploadVerify?: () => Promise<{ code: number; msg: string } | undefined>
}

const props = defineProps<Props>()

const emit = defineEmits<{
  update: [data: any]
}>()

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

defineExpose({
  equipment,
  equipmentParams: cacheData,
})

const isEdit = ref(false)
const equipment = ref<any>({})
const tempData = ref<any>({})
const cacheData = ref<any>({})

const safeTempData = computed(() => tempData.value || {})

const STORAGE_KEY = `equipment-info-cache-${userInfo.value?.id}-${props.orderId}-${props.equipId}`

const showPicker = ref(false)
const pickerType = ref('')
const pickerTitle = ref('')
const pickerList = ref<any[]>([])
const pickerIndex = ref([0])

const dictType: Record<string, any[]> = {
  equipmentType: [
    { label: '固定式压力容器', value: '固定式压力容器' },
    { label: '移动式压力容器', value: '移动式压力容器' },
    { label: '气瓶', value: '气瓶' },
    { label: '锅炉', value: '锅炉' },
  ],
  type: [
    { label: '第一类压力容器', value: '第一类压力容器' },
    { label: '第二类压力容器', value: '第二类压力容器' },
    { label: '第三类压力容器', value: '第三类压力容器' },
  ],
  equipType: [
    { label: '反应压力容器', value: '反应压力容器' },
    { label: '分离压力容器', value: '分离压力容器' },
    { label: '储存压力容器', value: '储存压力容器' },
    { label: '换热压力容器', value: '换热压力容器' },
    { label: '移动式压力容器', value: '移动式压力容器' },
    { label: '气瓶', value: '气瓶' },
  ],
}

const getDictLabel = (type: string, value: string): string => {
  if (!dictType[type]) return value
  const item = dictType[type].find((i) => i.value === value)
  return item?.label || value || ''
}

const hasChanges = (): boolean => {
  const keys = Object.keys(tempData.value)
  return keys.some((key) => {
    const original = equipment.value[key]
    const current = tempData.value[key]
    return current !== original && current !== '' && current !== undefined
  })
}

const handleEdit = async () => {
  if (isEdit.value) {
    if (!hasChanges()) {
      uni.showToast({ title: '没有修改任何信息', icon: 'error' })
      return
    }
    await handleSave()
  } else {
    tempData.value = { ...equipment.value }
    isEdit.value = true
  }
}

const handleSave = async () => {
  try {
    uni.showLoading({ title: props.useOnline === '1' ? '保存中...' : '暂存中...' })

    const params = {
      id: props.equipId,
      orderId: props.orderId,
      ...tempData.value,
    }

    const result: any = await updateEquipApi(params)

    if (result?.code === 0) {
      uni.showToast({ title: props.useOnline === '1' ? '保存成功' : '暂存成功', icon: 'success' })
      equipment.value = { ...equipment.value, ...tempData.value }
      cacheData.value = {}
      uni.setStorageSync(STORAGE_KEY, {})

      if (props.useOnline === '1') {
        emit('update', tempData.value)
      }
      isEdit.value = false
    } else {
      uni.showToast({ title: result?.msg || '保存失败', icon: 'error' })
    }
  } catch (error: any) {
    console.error('保存失败:', error)
    uni.showToast({ title: error?.msg || '保存失败', icon: 'error' })
  } finally {
    uni.hideLoading()
  }
}

const handleUpload = async () => {
  const result = await props.uploadVerify?.()
  if (!result) return

  if (result?.code === 0) {
    if (props.useOnline === '1') {
      equipment.value = { ...equipment.value, ...cacheData.value }
    } else {
      await handleEdit()
      await new Promise((resolve) => setTimeout(resolve, 100))
      await handleSave()
    }
    uni.showToast({ title: '上传成功', icon: 'success' })
  } else {
    uni.showToast({ title: result?.msg || '上传失败', icon: 'error' })
  }
}

const handleOcr = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      uni.navigateTo({
        url: `/pages/equipment/detail/ocrInput?equipId=${props.equipId}&imagePath=${tempFilePath}&source=equipmentInfo`,
      })
    },
  })
}

const handlePicker = (type: string) => {
  pickerType.value = type
  pickerList.value = dictType[type] || []

  const currentValue = tempData.value[type]
  const index = pickerList.value.findIndex((item) => item.value === currentValue)
  pickerIndex.value = [index >= 0 ? index : 0]

  const titles: Record<string, string> = {
    equipmentType: '设备种类',
    type: '设备类别',
    equipType: '容器归类',
  }
  pickerTitle.value = titles[type] || '请选择'
  showPicker.value = true
}

const closePicker = () => {
  showPicker.value = false
}

const confirmPicker = () => {
  const selected = pickerList.value[pickerIndex.value[0]]
  if (selected) {
    tempData.value[pickerType.value] = selected.value
  }
  closePicker()
}

const onPickerChange = (e: any) => {
  pickerIndex.value = e.detail.value
}

const onDesignDateChange = (e: any) => {
  tempData.value.designDate = e.detail.value
}

const onMakeDateChange = (e: any) => {
  tempData.value.makeDate = e.detail.value
}

const onUseDateChange = (e: any) => {
  tempData.value.useDate = e.detail.value
}

const loadCacheData = () => {
  if (!props.canEdit || props.useOnline === '1') return

  try {
    const cached = uni.getStorageSync(STORAGE_KEY)
    if (cached && Object.keys(cached).length > 0) {
      cacheData.value = cached
      tempData.value = { ...equipment.value, ...cached }
    }
  } catch (error) {
    console.log('加载缓存失败:', error)
  }
}

const saveCacheData = () => {
  if (!props.canEdit || props.useOnline === '1' || !hasChanges()) return

  const changes: Record<string, any> = {}
  Object.keys(tempData.value).forEach((key) => {
    const original = equipment.value[key]
    const current = tempData.value[key]
    if (current !== original && current !== '' && current !== undefined) {
      changes[key] = current
    }
  })

  if (Object.keys(changes).length > 0) {
    cacheData.value = { ...cacheData.value, ...changes }
    uni.setStorageSync(STORAGE_KEY, cacheData.value)
  }
}

watch(isEdit, (newVal) => {
  if (!newVal && hasChanges()) {
    saveCacheData()
  }
})

watch(
  () => props.equipmentData,
  (newData) => {
    if (newData) {
      equipment.value = newData
      loadCacheData()
    }
  },
  { immediate: true, deep: true },
)

watch(isEdit, (newIsEdit) => {
  if (newIsEdit && !tempData.value) {
    tempData.value = {}
  }
})

onMounted(() => {
  if (props.equipmentData) {
    equipment.value = props.equipmentData
    loadCacheData()
  }
})
</script>

<style lang="scss" scoped>
.equipment-info-container {
  padding: 10px;
}

.edit-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 0;
}

.edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 28px;
  padding: 0 12px;
  margin-left: 10px;
  font-size: 13px;
  color: #fff;
  background-color: #2f8eff;
  border: none;
  border-radius: 3px;
}
.operate-btn-text {
  font-size: 14px;
  color: #fff;
}

.ocr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
  color: #fff;
  background-color: #2f8eff;
  border: none;
  border-radius: 3px;
}

.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 28px;
  padding: 0 12px;
  margin-left: 10px;
  font-size: 13px;
  color: #fff;
  background-color: #e6a23c;
  border: none;
  border-radius: 3px;
}

.section {
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 5px;
}

.section-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.table {
  width: 100%;
  border: 1px solid rgb(225, 228, 233);
}

.table-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-right: 1px solid rgb(225, 228, 233);
  border-bottom: 1px solid rgb(225, 228, 233);

  .table-cell {
    &.title {
      width: 25%;
    }

    &.content {
      width: 75%;
    }
  }
}

.table-row-split {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-right: 1px solid rgb(235, 238, 245);
  border-bottom: 1px solid rgb(235, 238, 245);

  .table-cell {
    &.title {
      width: 50%;
    }

    &.content {
      width: 50%;
    }
  }
}

.table-cell {
  padding: 10px;

  &.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgb(245, 247, 250);
    border-right: 1px solid rgb(235, 238, 245);

    .cell-title {
      font-size: 14px;
      color: rgb(51, 51, 51);
    }

    .must {
      margin-left: 2px;
      color: #f84a23;
    }
  }

  &.content {
    display: flex;
    align-items: center;
    min-height: 40px;

    .cell-text {
      font-size: 14px;
      color: rgb(106, 106, 106);
    }

    .edit-input {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      border: 1px solid #ddd;
      border-radius: 5px;

      text {
        font-size: 14px;
        color: rgb(51, 51, 51);
      }

      .arrow-icon {
        width: 15px;
        height: 15px;
        margin-left: 5px;
      }
    }

    .edit-input-text {
      flex: 1;
      height: 30px;
      padding: 0 10px;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .edit-textarea {
      flex: 1;
      min-height: 60px;
      padding: 5px 10px;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
  }
}

.popup-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.5);
}

.picker-popup {
  width: 100%;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}

.picker-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.picker-cancel {
  font-size: 14px;
  color: #999;
}

.picker-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.picker-confirm {
  font-size: 14px;
  color: #2f8eff;
}

.picker-view {
  height: 200px;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
}
</style>