<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <NavBar :title="t('moldOperate.tabDown')">
      <template #right>
        <view class="nav-right-btn" @click="goToHistory">
          <uni-icons type="calendar" size="22" color="#22486e"></uni-icons>
        </view>
      </template>
    </NavBar>

    <!-- 操作按钮区 -->
    <view class="action-row">
      <view class="scan-input-row">
        <input
          class="scan-input"
          v-model="scanCodeInput"
          placeholder="红外扫码或输入设备码"
          confirm-type="done"
          :focus="true"
          @confirm="onScanInputConfirm"
        />
      </view>
      <view class="action-btn select-btn" @click="openDevicePicker">
        <text class="btn-text">{{ t('moldOperate.selectDevice') }}</text>
      </view>
    </view>

    <!-- 设备信息卡片 -->
    <view class="section-card">
      <view class="section-title-bar">
        <view class="section-bar-line"></view>
        <text class="section-title">{{ t('moldOperate.deviceInfo') }}</text>
      </view>
      <view class="card-body-grid">
        <view class="grid-row">
          <view class="grid-cell">
            <text class="grid-label">{{ t('moldOperate.deviceName') }}</text>
            <text class="grid-value">{{ textValue(selectedDevice.deviceName) }}</text>
          </view>
          <view class="grid-cell">
            <text class="grid-label">{{ t('moldOperate.deviceCode') }}</text>
            <text class="grid-value">{{ textValue(selectedDevice.deviceCode) }}</text>
          </view>
        </view>
        <view class="grid-row">
          <view class="grid-cell">
            <text class="grid-label">{{ t('moldOperate.productionLine') }}</text>
            <text class="grid-value">{{ getTopLineName(selectedDevice.deviceLine) }}</text>
          </view>
          <view class="grid-cell">
            <text class="grid-label">{{ t('moldOperate.deviceStatus') }}</text>
            <view class="status-tag" :class="deviceStatusClass">{{ deviceStatusLabel }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 当前在机模具 -->
    <view class="section-card">
      <view class="section-title-bar">
        <view class="section-bar-line"></view>
        <text class="section-title">{{ t('moldOperate.currentMoldInfo') }}</text>
      </view>

      <template v-if="selectedMold && selectedMold.id">
        <view class="card-body-grid">
          <view class="grid-row">
            <view class="grid-cell">
              <text class="grid-label">{{ t('moldOperate.moldName') }}</text>
              <text class="grid-value highlight">{{ textValue(selectedMold.moldName) }}</text>
            </view>
            <view class="grid-cell">
              <text class="grid-label">{{ t('moldOperate.moldCode') }}</text>
              <text class="grid-value">{{ textValue(selectedMold.moldCode) }}</text>
            </view>
          </view>
          <view class="grid-row">
            <view class="grid-cell">
              <text class="grid-label">{{ t('moldOperate.product') }}</text>
              <text class="grid-value">{{ textValue(selectedMold.productName) }}</text>
            </view>
          </view>
        </view>

        <!-- 更换下模对象按钮 -->
        <view class="change-target-btn" @click="openLowerMoldPicker">
          <text class="change-icon">&#8644;</text>
          <text class="change-text">{{ t('moldOperate.changeTarget') }}</text>
        </view>
      </template>

      <!-- 已选设备但无在机模具 -->
      <view v-else-if="selectedDevice.id && moldsLoaded" class="empty-mold-hint">
        <text class="empty-mold-text empty-gray">{{ t('moldOperate.noMoldOnDevice') }}</text>
      </view>

      <!-- 未选设备 -->
      <view v-else class="empty-mold-hint">
        <text class="empty-mold-text empty-gray">{{ t('moldOperate.clickSelectDeviceFirst') }}</text>
      </view>
    </view>

    <!-- 操作人与备注 -->
    <view class="section-card">
      <view class="section-title-bar">
        <view class="section-bar-line"></view>
        <text class="section-title">{{ t('moldOperate.operator') + ' & ' + t('moldOperate.remark') }}</text>
      </view>
        <view class="card-body-grid">
          <view class="form-row">
            <view class="form-cell">
              <text class="form-label"><text class="required">*</text>{{ t('moldOperate.operator') }}</text>
              <view class="dropdown-input readonly-input">
                <text class="dropdown-value">{{ currentUserName }}</text>
              </view>
            </view>
          </view>
        <view class="form-row">
          <view class="form-cell">
            <text class="form-label">{{ t('moldOperate.remark') }}</text>
            <input
              class="form-input"
              v-model="remarkText"
              :placeholder="t('moldOperate.placeholderRemark')"
              :maxlength="200"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="bottom-btn cancel-btn" @click="handleCancel">{{ t('functionCommon.cancel') }}</view>
      <view class="bottom-btn confirm-btn" @click="handleConfirm">{{ t('moldOperate.confirmDismount') }}</view>
    </view>

    <!-- 在机模具选择弹框（更换下模对象） -->
    <uni-popup ref="lowerMoldPickerRef" type="bottom">
      <view class="picker-popup">
        <view class="picker-header">
          <text class="picker-close-left" @click="closeLowerMoldPicker">{{ t('functionCommon.cancel') }}</text>
          <text class="picker-title">{{ t('moldOperate.currentMoldInfo') }}</text>
          <text class="picker-close-right" @click="confirmLowerMoldSelection">{{ t('functionCommon.confirm') }}</text>
        </view>
        <scroll-view scroll-y class="picker-scroll">
          <view v-for="m in lowerMoldOptions" :key="m.id || m.moldId"
                class="picker-item" :class="{ active: tempSelectedMoldId === String(m.id || m.moldId) }"
                @click="tempSelectedMoldId = String(m.id || m.moldId)">
            <view class="picker-item-content">
              <text class="picker-item-name">{{ textValue(m.moldName || m.name) }}</text>
              <text class="picker-item-code">{{ textValue(m.moldCode || m.code) }}</text>
            </view>
            <text class="picker-check-icon" v-if="tempSelectedMoldId === String(m.id || m.moldId)">&#10003;</text>
          </view>
          <view v-if="lowerMoldLoading" class="picker-hint">{{ t('functionCommon.loading') }}</view>
          <view v-else-if="!lowerMoldOptions.length" class="picker-empty">{{ t('moldOperate.noMoldOnDevice') }}</view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import { getDeviceLedgerList, createMoldOperate } from '@/api/mes/moldoperate'
import { getMoldBrandPage } from '@/api/mes/mold'
import useUserStore from '@/store/modules/user'
import { getDeviceLineTree } from '@/api/mes/deviceLine'

const { t } = useI18n()
const userStore = useUserStore()

// 当前登录用户
const currentUserName = computed(() => userStore.name || '未知用户')
const currentUserId = computed(() => userStore.userId)

const lineInfoMap = ref(new Map())   // deviceLine id → { name, parentId, parentChain }

// 递归拍平产线树（保存完整节点信息用于向上追溯）
function flattenLineTree(nodes, parentId) {
  if (!Array.isArray(nodes)) return
  for (const node of nodes) {
    if (node.id != null && node.name != null) {
      lineInfoMap.value.set(String(node.id), {
        id: node.id,
        name: node.name,
        parentId: node.parentId != null ? node.parentId : (parentId || null),
        parentChain: node.parentChain || ''
      })
    }
    if (Array.isArray(node.children)) {
      flattenLineTree(node.children, node.id)
    }
  }
}

// 根据设备产线节点，向上追溯顶层产线名称（参考后端 fillTopCategoryInfo 逻辑）
function getTopLineName(deviceLineId) {
  if (deviceLineId == null) return '-'
  const node = lineInfoMap.value.get(String(deviceLineId))
  if (!node) return String(deviceLineId)

  // 策略1：通过 parentChain 取第一个 ID（最顶层）
  if (node.parentChain) {
    const firstId = node.parentChain.split(',')[0]?.trim()
    if (firstId) {
      const topNode = lineInfoMap.value.get(firstId)
      if (topNode) return topNode.name
    }
  }

  // 策略2：通过 parentId 向上遍历直到根节点
  let current = node
  const visited = new Set()
  while (current.parentId != null && current.parentId > 0 && !visited.has(current.id)) {
    visited.add(current.id)
    const parent = lineInfoMap.value.get(String(current.parentId))
    if (!parent) break
    current = parent
  }
  return current.name || String(deviceLineId)
}

// 加载产线树
async function loadLineTree() {
  if (lineInfoMap.value.size > 0) return
  try {
    const res = await getDeviceLineTree()
    const tree = (res && res.data !== undefined) ? res.data : res
    const nodes = Array.isArray(tree) ? tree : (tree?.list || tree?.children || [])
    flattenLineTree(nodes)
  } catch (e) {
    console.error('load line tree error', e)
  }
}

// ---- 设备相关 ----
const selectedDevice = ref({})
const deviceOptions = ref([])

// ---- 模具相关 ----
const selectedMold = ref({})
const lowerMoldPickerRef = ref(null)
const lowerMoldOptions = ref([])
const lowerMoldLoading = ref(false)
const moldsLoaded = ref(false)
const tempSelectedMoldId = ref(null)

// ---- 操作人与备注 ----
const remarkText = ref('')
const selectedOperator = ref(null)
const scanCodeInput = ref('')

// ---- 工具函数 ----
function textValue(v) {
  if (v === 0) return '0'
  if (v == null) return '-'
  const s = String(v).trim()
  return s || '-'
}



function formatTime(time) {
  if (!time) return '-'
  if (typeof time === 'string') {
    if (time.includes('-') || time.includes('T')) {
      return time.replace(/T/, ' ').substring(0, 19)
    }
    const ts = Number(time)
    if (!isNaN(ts) && ts > 1e10) return new Date(ts).toLocaleString()
    else if (!isNaN(ts) && ts > 1e7) return new Date(ts * 1000).toLocaleString()
    return time
  }
  if (typeof time === 'number') {
    if (time > 1e10) return new Date(time).toLocaleString()
    if (time > 1e7) return new Date(time * 1000).toLocaleString()
    return String(time)
  }
  return '-'
}

const deviceStatusClass = computed(() => {
  const status = Number(selectedDevice.value?.deviceStatus)
  if (status === 0) return 'running-tag'
  if (status === 1) return 'stop-tag'
  if (status >= 2) return 'fault-tag'
  return ''
})

const deviceStatusLabel = computed(() => {
  const status = Number(selectedDevice.value?.deviceStatus)
  const map = {
    0: t('moldOperate.statusRunning'),
    1: t('moldOperate.statusStop'),
    2: t('moldOperate.statusFault'),
    3: t('moldOperate.statusFault')
  }
  return map[status] || textValue(selectedDevice.value?.deviceStatus) || '-'
})

// ---- 数据加载 ----
async function loadDevices() {
  try {
    const res = await getDeviceLedgerList({ pageNo: 1, pageSize: 100 })
    const root = res && res.data !== undefined ? res.data : res
    const data = Array.isArray(root)
      ? root
      : Array.isArray(root?.list) ? root.list
      : Array.isArray(root?.rows) ? root.rows
      : []
    deviceOptions.value = data.map((d) => ({
      value: d.id,
      label: `${d.deviceCode || ''} ${d.deviceName || ''}`.trim(),
      raw: d
    }))
  } catch (e) {
    console.error('loadDevices error', e)
  }
}

// 通用递归数组提取
function findArr(obj, d = 0) {
  if (!obj || typeof obj !== 'object' || d > 3) return []
  if (Array.isArray(obj)) return obj
  for (const k of ['list', 'rows', 'records', 'items', 'data']) {
    if (Array.isArray(obj[k])) return obj[k]
  }
  for (const v of Object.values(obj)) {
    const found = findArr(v, d + 1)
    if (found.length) return found
  }
  return []
}

async function loadLowerMolds(deviceName) {
  lowerMoldLoading.value = true
  try {
    const res = await getMoldBrandPage({ deviceName, pageSize: 100 })
    const root = (res && res.data !== undefined) ? res.data : res
    const pageData = root?.pageResult || root
    const list = Array.isArray(pageData) ? pageData : (Array.isArray(pageData?.list) ? pageData.list : [])
    lowerMoldOptions.value = list.map(m => ({
      id: m.id,
      moldId: m.id,
      moldName: m.name || '-',
      moldCode: m.code || '-',
      productName: m.productName || '-'
    }))
  } catch (e) {
    console.error('loadLowerMolds error', e)
  } finally {
    lowerMoldLoading.value = false
  }
}

// ---- 扫描/输入设备码 ----
function matchDeviceByCode(code) {
  if (!code) return null
  let matched = null
  if (code.toUpperCase().startsWith('EQUIPMENT-')) {
    const idFromQr = code.replace(/EQUIPMENT-/i, '')
    matched = deviceOptions.value.find((d) => String(d.raw.id) === idFromQr)
  }
  if (!matched) {
    matched = deviceOptions.value.find((d) =>
      Object.values(d.raw).some((v) =>
        typeof v === 'string' && v.trim().toUpperCase() === code.toUpperCase()
      ) || d.label.toUpperCase().includes(code.toUpperCase())
    )
  }
  if (!matched) {
    const idMatch = code.match(/(\d+)$/)
    if (idMatch) {
      matched = deviceOptions.value.find((d) => String(d.raw.id) === idMatch[1])
    }
  }
  return matched
}

function handleScan() {
  uni.scanCode({
    onlyFromCamera: false,
    scanType: ['qrCode', 'barCode'],
    success(res) {
      const code = (res.result || '').trim()
      if (!code) return
      scanCodeInput.value = code
      const matched = matchDeviceByCode(code)
      if (matched) {
        selectDevice(matched.raw)
      } else {
        uni.showToast({ title: t('moldOperate.deviceNotFound'), icon: 'none' })
      }
    },
    fail(err) {
      if (err.errMsg && !err.errMsg.includes('cancel')) {
        console.warn('scan failed:', err)
      }
    }
  })
}

function onScanInputConfirm() {
  const code = scanCodeInput.value.trim()
  if (!code) return
  const matched = matchDeviceByCode(code)
  if (matched) {
    selectDevice(matched.raw)
  } else {
    uni.showToast({ title: t('moldOperate.deviceNotFound'), icon: 'none' })
  }
}

// ---- 设备选择 ----
function selectDevice(device) {
  selectedDevice.value = device || {}
  moldsLoaded.value = false
  selectedMold.value = {}
  if (device?.deviceName) {
    loadLowerMolds(device.deviceName).then(() => {
      moldsLoaded.value = true
      if (lowerMoldOptions.value.length > 0) {
        const first = lowerMoldOptions.value[0]
        selectedMold.value = {
          id: first.id || first.moldId,
          moldName: first.moldName || first.name,
          moldCode: first.moldCode || first.code,
          productName: first.productName || '-'
        }
      }
    })
  }
}
function openDevicePicker() {
  uni.navigateTo({ url: '/pages_function/pages/moldoperate/deviceSelect' })
}



// ---- 在机模具选择（更换下模对象）----
function openLowerMoldPicker() {
  if (!selectedDevice.value?.deviceName) {
    uni.showToast({ title: t('moldOperate.validatorDeviceRequired'), icon: 'none' })
    return
  }
  tempSelectedMoldId.value = selectedMold.value ? String(selectedMold.value.id || selectedMold.value.moldId) : null
  loadLowerMolds(selectedDevice.value.deviceName).then(() => {
    lowerMoldPickerRef.value?.open()
  })
}

function confirmLowerMoldSelection() {
  const mold = lowerMoldOptions.value.find(
    (m) => String(m.id || m.moldId) === tempSelectedMoldId.value
  )
  if (mold) {
    selectedMold.value = {
      id: mold.id || mold.moldId,
      moldName: mold.moldName || mold.name,
      moldCode: mold.moldCode || mold.code,
      productName: mold.productName || '-'
    }
  }
  lowerMoldPickerRef.value?.close()
}

function closeLowerMoldPicker() { lowerMoldPickerRef.value?.close() }

// ---- 操作人自动设置为当前登录用户 ----
function autoSetOperator() {
  if (currentUserId.value && currentUserName.value) {
    selectedOperator.value = {
      value: currentUserId.value,
      label: currentUserName.value
    }
  }
}

function goToHistory() {
  uni.navigateTo({ url: '/pages_function/pages/moldoperate/history?type=down' })
}

function goBack() {
  uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
}

// ---- 提交 ----
function validForm() {
  if (!selectedDevice.value?.id) {
    uni.showToast({ title: t('moldOperate.validatorDeviceRequired'), icon: 'none' })
    return false
  }
  if (!selectedMold.value?.id) {
    uni.showToast({ title: t('moldOperate.validatorLowerMoldRequired'), icon: 'none' })
    return false
  }
  if (!selectedOperator.value) {
    uni.showToast({ title: t('moldOperate.validatorOperatorRequired'), icon: 'none' })
    return false
  }
  return true
}

async function handleConfirm() {
  if (!validForm()) return
  try {
    const device = selectedDevice.value
    const payload = {
      operateType: '2',
      deviceId: String(device.id),
      moldId: String(selectedMold.value.id),
      lineId: device.deviceLine != null ? String(device.deviceLine) : undefined,
      lineName: device.deviceLine != null ? getTopLineName(device.deviceLine) : (device.lineName || undefined)
    }
    // 添加操作人和备注
    if (selectedOperator.value) {
      payload.operatorId = selectedOperator.value.value
    }
    if (remarkText.value.trim()) {
      payload.remark = remarkText.value.trim()
    }
    console.log('[下模] 提交参数 =', JSON.stringify(payload))
    await createMoldOperate(payload)
    uni.showToast({ title: t('functionCommon.createSuccess'), icon: 'success' })
    // 重置表单
    selectedDevice.value = {}
    selectedMold.value = {}
    lowerMoldOptions.value = []
    remarkText.value = ''
  } catch (e) {
    console.error('[下模] 保存失败 =', e)
    const errMsg = e?.msg || (typeof e === 'string' ? e : e?.message) || '系统异常'
    uni.showToast({ title: t('functionCommon.saveFailed') + ': ' + errMsg, icon: 'none', duration: 3000 })
  }
}

function handleCancel() {
  // 返回上一页（管理页面）
  uni.navigateBack({
    fail: () => uni.switchTab({ url: '/pages/work' })
  })
}

onShow(async () => {
  autoSetOperator()
  await Promise.allSettled([loadDevices(), loadLineTree()])
  // 从 globalData 读取设备选择页回传的设备
  const device = getApp().globalData._deviceSelectResult
  if (device) {
    getApp().globalData._deviceSelectResult = null
    selectDevice(device)
  }
})
</script>

<style lang="scss" scoped>
/* ====== 导航栏右侧按钮 ====== */
.nav-right-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}

.page-container {
  min-height: 100vh;
  background: #f5f6f8;
  padding-bottom: 140rpx;
}

/* ====== 操作按钮区 ====== */
.action-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx 24rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72rpx;
  padding: 0 24rpx;
  border-radius: 10rpx;
  background: #1f4b79;
  color: #fff;
  font-size: 26rpx;
  font-weight: 600;
  white-space: nowrap;

  .btn-text {
    font-size: 26rpx;
    line-height: 1;
  }
}

.scan-input-row {
  flex: 1;
  display: flex;
  align-items: center;
  height: 72rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.scan-input {
  flex: 1;
  height: 72rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  color: #333;
  background: #fff;
  border: 1rpx solid #d0d5dd;
  border-radius: 10rpx;
}

/* ====== 卡片通用样式 ====== */
.section-card {
  margin: 16rpx 24rpx;
  background: #ffffff;
  border-radius: 14rpx;
}

.section-title-bar {
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 22rpx 24rpx 0;
}

.section-bar-line {
  width: 6rpx;
  height: 32rpx;
  border-radius: 3rpx;
  background: #1f4b79;
}

.section-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.card-body-grid {
  padding: 20rpx 24rpx 28rpx;
}

/* ====== 网格布局 ====== */
.grid-row {
  display: flex;
  gap: 20rpx;
  margin-top: 18rpx;

  &:first-child {
    margin-top: 0;
  }
}

.grid-cell {
  flex: 1;
  min-width: 0;

  &.full-width {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 12rpx;
  }
}

.grid-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.grid-value {
  display: block;
  font-size: 27rpx;
  color: #333;
  word-break: break-all;

  &.highlight {
    color: #2563eb;
    font-weight: 600;
  }
}

/* ====== 状态标签 ====== */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 6rpx 18rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  font-weight: 500;

  &.running-tag {
    color: #059669;
    background: #ecfdf5;
    border: 1rpx solid #a7f3d0;
  }

  &.stop-tag {
    color: #d97706;
    background: #fffbeb;
    border: 1rpx solid #fde68a;
  }

  &.fault-tag {
    color: #dc2626;
    background: #fef2f2;
    border: 1rpx solid #fecaca;
  }

  &.pending-tag {
    color: #2563eb;
    background: #eff6ff;
    border: 1rpx solid #bfdbfe;
  }
}

/* ====== 更换下模对象按钮 ====== */
.change-target-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  margin: 0 24rpx 24rpx;
  padding: 20rpx 0;
  border: 1rpx dashed #ccc;
  border-radius: 10rpx;

  .change-icon {
    font-size: 28rpx;
    color: #666;
  }

  .change-text {
    font-size: 26rpx;
    color: #666;
  }

  &:active {
    background: #fafafa;
  }
}

/* ====== 表单行（操作人/备注） ====== */
.form-row {
  margin-top: 18rpx;

  &:first-child {
    margin-top: 0;
  }
}

.form-cell {
  width: 100%;

  .form-label {
    display: block;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;

    .required {
      color: #dc2626;
      margin-right: 4rpx;
    }
  }
}

/* ====== 下拉选择器（操作人） ====== */
.select-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-input {
  display: flex;
  align-items: center;
  height: 72rpx;
  padding: 0 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 27rpx;
  color: #333;
  background: #f9fafb;

  &.readonly-input {
    background: #f8fafc;
    border-color: #f0f0f0;
  }
}

.dropdown-value {
  flex: 1;

  &.placeholder {
    color: #bbb;
  }
}

.dropdown-arrow {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ====== 下拉面板（在输入框下方展开） ====== */
.dropdown-panel {
  position: absolute;
  top: 76rpx;
  left: 0;
  right: 0;
  z-index: 99;
  background: #ffffff;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.dropdown-scroll {
  max-height: 400rpx;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22rpx 28rpx;
  font-size: 27rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: #f5f7fa;
  }

  &.active {
    color: #1f7cff;
    background: #f0f7ff;
  }
}

.dropdown-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-empty {
  padding: 32rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.form-input {
  height: 72rpx;
  padding: 0 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 27rpx;
  color: #333;
  background: #f9fafb;
}

/* ====== 空提示 ====== */
.empty-mold-hint {
  padding: 40rpx 24rpx;
  text-align: center;
}

.empty-mold-text {
  font-size: 28rpx;
  color: #2563eb;
}

.empty-gray {
  color: #9ca3af;
}

/* ====== 底部操作栏 ====== */
.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 18rpx;
  padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
  z-index: 99;
}

.bottom-btn {
  flex: 1;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
}

.confirm-btn {
  background: #1f4b79;
  color: #fff;
}

.cancel-btn {
  background: #eef2f7;
  color: #475569;
}

/* ====== 弹窗通用 ====== */
.picker-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 75vh;
}

.picker-header {
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-close-left,
.picker-close-right {
  font-size: 28rpx;
  color: #2563eb;
  padding: 8rpx 0;
}

.picker-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.picker-scroll {
  max-height: calc(75vh - 96rpx);
  padding: 12rpx 0 32rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 24rpx 12rpx;
  padding: 22rpx 20rpx;
  border-radius: 12rpx;
  background: #f8fafc;

  &.active {
    background: #eff6ff;
    border: 1rpx solid #bfdbfe;
  }
}

.picker-item-content {
  flex: 1;
  min-width: 0;
}

.picker-item-name {
  display: block;
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: 500;
}

.picker-item-code {
  display: block;
  font-size: 23rpx;
  color: #999;
  margin-top: 4rpx;
}

.picker-check-icon {
  font-size: 30rpx;
  color: #2563eb;
  font-weight: 700;
  margin-left: 16rpx;
  flex-shrink: 0;
}

.picker-empty,
.picker-hint {
  text-align: center;
  color: #999;
  padding: 60rpx 0;
  font-size: 26rpx;
}
</style>
