<template>
  <el-drawer
    v-model="dialogVisible"
    :title="dialogTitle"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :append-to-body="true"
    class="mobile-form-drawer"
  >
    <div class="mobile-form" v-loading="formLoading">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-position="top"
      >
        <!-- 基本信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">基本信息</div>
          <el-form-item label="工单编号" prop="orderCode">
            <el-input
              v-model="formData.orderCode"
              placeholder="请点击选择工单编号"
              readonly
              style="width: 100%"
              @click="handleSelectWorkOrder"
            >
              <template #suffix>
                <Icon icon="ep:search" class="cursor-pointer" @click="handleSelectWorkOrder" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="领料单号" prop="code">
            <el-input v-model="formData.code" placeholder="请输入领料单号" />
          </el-form-item>
          <el-form-item label="领料时间" prop="requisitionTime">
            <el-date-picker
              v-model="formData.requisitionTime"
              type="datetime"
              placeholder="请选择领料时间"
              value-format="YYYY-MM-DDTHH:mm:ss.SSSZ"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="申请人" prop="applicantName">
            <el-input
              v-model="formData.applicantName"
              placeholder="系统自动设置"
              readonly
            />
          </el-form-item>
          <el-form-item label="选择BOM">
            <el-select
              v-model="selectedBomId"
              placeholder="请选择BOM带出物料"
              filterable
              clearable
              style="width: 100%"
              @change="handleBomChange"
            >
              <el-option
                v-for="bom in bomOptions"
                :key="bom.id"
                :label="bom.bomName + (bom.version ? ' (V' + bom.version + ')' : '') + ' - ' + (bom.productName || '')"
                :value="bom.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="请输入备注" />
          </el-form-item>
        </div>

        <!-- 领料明细 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">领料明细</div>
          <el-button type="primary" plain style="width: 100%; margin-bottom: 12px" @click="handleAddItem">
            <Icon icon="ep:plus" class="mr-5px" />添加明细
          </el-button>

          <div class="mobile-item-list">
            <div
              v-for="(item, $index) in formData.items"
              :key="$index"
              class="mobile-item-card"
            >
              <div class="mobile-item-card__header">
                <span class="mobile-item-card__index">#{{ $index + 1 }}</span>
                <span class="mobile-item-card__name">{{ item.materialName || '未选择产品' }}</span>
                <el-button link type="danger" size="small" @click="handleDeleteItem($index)">删除</el-button>
              </div>
              <div class="mobile-item-card__body">
                <el-form-item
                  label="产品"
                  :prop="'items.' + $index + '.materialId'"
                  :rules="[{ required: true, message: '请选择产品', trigger: 'change' }]"
                >
                  <el-select
                    v-model="item.materialId"
                    placeholder="请选择或输入产品"
                    filterable
                    allow-create
                    default-first-option
                    style="width: 100%"
                    @change="handleProductChange($index)"
                  >
                    <el-option
                      v-for="p in productOptions"
                      :key="p.id"
                      :label="p.barCode ? p.name + '（' + p.barCode + '）' : p.name"
                      :value="p.id"
                    />
                  </el-select>
                </el-form-item>
                <div class="mobile-item-card__info-row">
                  <span class="mobile-item-card__info-label">物料编码</span>
                  <span class="mobile-item-card__info-value">{{ item.materialCode || '-' }}</span>
                </div>
                <div class="mobile-item-card__info-row">
                  <span class="mobile-item-card__info-label">单位</span>
                  <span class="mobile-item-card__info-value">{{ item.unit || '-' }}</span>
                </div>
                <div class="mobile-item-card__input-group">
                  <el-form-item
                    label="计划数量"
                    :prop="'items.' + $index + '.planQuantity'"
                    :rules="[{ required: true, message: '计划数量不能为空', trigger: 'blur' }]"
                  >
                    <el-input-number
                      v-model="item.planQuantity"
                      :min="0"
                      :precision="2"
                      :step="1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </div>
                <el-form-item
                  label="仓库"
                  :prop="'items.' + $index + '.warehouseId'"
                  :rules="[{ required: true, message: '仓库不能为空', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="item.warehouseId"
                    placeholder="请选择仓库"
                    style="width: 100%"
                    @change="handleWarehouseChange($index)"
                  >
                    <el-option
                      v-for="w in warehouseOptions"
                      :key="w.id"
                      :label="w.name"
                      :value="w.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="过磅单号" :prop="'items.' + $index + '.no'">
                  <el-input
                    v-model="item.no"
                    placeholder="请点击选择过磅单"
                    readonly
                    @click="handleSelectWeigh($index)"
                  >
                    <template #suffix>
                      <Icon icon="ep:search" class="cursor-pointer" @click="handleSelectWeigh($index)" />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="item.remark" placeholder="请输入备注" />
                </el-form-item>
                <div class="mobile-item-card__actions" v-if="item.purchaseId">
                  <el-button size="small" @click="handleViewWeigh($index)">查看过磅详情</el-button>
                </div>
              </div>
            </div>
            <div v-if="formData.items.length === 0" class="mobile-empty-tip">
              暂无领料明细，请点击上方按钮添加
            </div>
          </div>
        </div>
      </el-form>

      <!-- 底部操作按钮 -->
      <div class="mobile-form__footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- 确认领料弹窗 -->
  <el-drawer
    v-model="completeDialogVisible"
    title="确认领料"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :append-to-body="true"
    class="mobile-form-drawer"
  >
    <div class="mobile-form" v-loading="formLoading">
      <el-form
        ref="completeFormRef"
        :model="completeFormData"
        :rules="completeFormRules"
        label-position="top"
      >
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">领料明细确认</div>
          <div class="mobile-item-list">
            <div
              v-for="(item, $index) in completeFormData.items"
              :key="$index"
              class="mobile-item-card"
            >
              <div class="mobile-item-card__header">
                <span class="mobile-item-card__index">#{{ $index + 1 }}</span>
                <span class="mobile-item-card__name">{{ item.materialName || '未知物料' }}</span>
              </div>
              <div class="mobile-item-card__body">
                <div class="mobile-item-card__info-row">
                  <span class="mobile-item-card__info-label">物料编码</span>
                  <span class="mobile-item-card__info-value">{{ item.materialCode || '-' }}</span>
                </div>
                <div class="mobile-item-card__info-row">
                  <span class="mobile-item-card__info-label">单位</span>
                  <span class="mobile-item-card__info-value">{{ item.unit || '-' }}</span>
                </div>
                <el-form-item
                  label="仓库"
                  :prop="'items.' + $index + '.warehouseId'"
                  :rules="[{ required: true, message: '仓库不能为空', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="item.warehouseId"
                    placeholder="请选择仓库"
                    style="width: 100%"
                    @change="handleCompleteWarehouseChange($index)"
                  >
                    <el-option
                      v-for="w in warehouseOptions"
                      :key="w.id"
                      :label="w.name"
                      :value="w.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="过磅单号" :prop="'items.' + $index + '.no'">
                  <el-input
                    v-model="item.no"
                    placeholder="请点击选择过磅单"
                    readonly
                    @click="handleCompleteSelectWeigh($index)"
                  >
                    <template #suffix>
                      <Icon icon="ep:search" class="cursor-pointer" @click="handleCompleteSelectWeigh($index)" />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="实际数量"
                  :prop="'items.' + $index + '.actualQuantity'"
                  :rules="[{ required: true, message: '实际数量不能为空', trigger: 'blur' }]"
                >
                  <el-input-number
                    v-model="item.actualQuantity"
                    :min="0"
                    :precision="2"
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="item.remark" placeholder="请输入备注" />
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div class="mobile-form__footer">
        <el-button @click="completeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCompleteForm" :loading="formLoading">确 认</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- 工单选择弹窗 -->
  <el-drawer
    v-model="workOrderSelectDialogVisible"
    title="选择工单"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :append-to-body="true"
    class="mobile-form-drawer"
  >
    <div class="mobile-form">
      <!-- 搜索区域 -->
      <div class="mobile-form__section">
        <div class="mobile-form__section-title">搜索条件</div>
        <el-form label-position="top">
          <el-form-item label="工单编号">
            <el-input v-model="workOrderSearchForm.code" placeholder="请输入工单编号" clearable @keyup.enter="handleWorkOrderSearch" />
          </el-form-item>
          <el-form-item label="工单名称">
            <el-input v-model="workOrderSearchForm.name" placeholder="请输入工单名称" clearable @keyup.enter="handleWorkOrderSearch" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="workOrderSearchForm.status" placeholder="请选择状态" multiple clearable style="width: 100%">
              <el-option label="草稿" :value="0" />
              <el-option label="待审核" :value="1" />
              <el-option label="已审核" :value="2" />
              <el-option label="生产中" :value="3" />
              <el-option label="已完成" :value="4" />
              <el-option label="已关闭" :value="5" />
              <el-option label="已取消" :value="6" />
              <el-option label="已入库" :value="7" />
            </el-select>
          </el-form-item>
          <div style="display: flex; gap: 8px;">
            <el-button type="primary" style="flex: 1" @click="handleWorkOrderSearch">搜索</el-button>
            <el-button style="flex: 1" @click="handleWorkOrderReset">重置</el-button>
          </div>
        </el-form>
      </div>

      <!-- 工单列表 -->
      <div class="mobile-form__section">
        <div class="mobile-form__section-title">工单列表</div>
        <div class="mobile-item-list">
          <div
            v-for="row in workOrderSelectList"
            :key="row.id"
            class="mobile-item-card mobile-item-card--clickable"
            @click="handleWorkOrderSelect(row)"
          >
            <div class="mobile-item-card__header">
              <span class="mobile-item-card__name">{{ row.code }}</span>
              <el-tag :type="getWorkOrderStatusType(row.status)" size="small">
                {{ getWorkOrderStatusText(row.status) }}
              </el-tag>
            </div>
            <div class="mobile-item-card__body">
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">工单名称</span>
                <span class="mobile-item-card__info-value">{{ row.name || '-' }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">产品名称</span>
                <span class="mobile-item-card__info-value">{{ row.productName || '-' }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">计划数量</span>
                <span class="mobile-item-card__info-value">{{ row.planQuantity }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">已完成</span>
                <span class="mobile-item-card__info-value">{{ row.producedQuantity || 0 }}</span>
              </div>
            </div>
          </div>
          <div v-if="workOrderSelectList.length === 0" class="mobile-empty-tip">暂无工单数据</div>
        </div>
        <div class="mobile-pagination" v-if="workOrderPagination.total > 0">
          <el-pagination
            v-model:current-page="workOrderPagination.pageNo"
            v-model:page-size="workOrderPagination.pageSize"
            :total="workOrderPagination.total"
            :page-sizes="[10, 20]"
            layout="total, prev, pager, next"
            :pager-count="5"
            @size-change="handleWorkOrderPageSizeChange"
            @current-change="handleWorkOrderPageChange"
          />
        </div>
      </div>

      <div class="mobile-form__footer">
        <el-button @click="workOrderSelectDialogVisible = false" style="width: 100%">取 消</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- 过磅单选择弹窗 -->
  <el-drawer
    v-model="weighSelectDialogVisible"
    title="选择过磅单"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :append-to-body="true"
    class="mobile-form-drawer"
  >
    <div class="mobile-form">
      <!-- 搜索区域 -->
      <div class="mobile-form__section">
        <div class="mobile-form__section-title">搜索条件</div>
        <el-form label-position="top">
          <el-form-item label="过磅单号">
            <el-input v-model="weighSearchForm.no" placeholder="请输入过磅单号" clearable @keyup.enter="handleWeighSearch" />
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="weighSearchForm.productName" placeholder="请输入产品名称" clearable @keyup.enter="handleWeighSearch" />
          </el-form-item>
          <div style="display: flex; gap: 8px;">
            <el-button type="primary" style="flex: 1" @click="handleWeighSearch">搜索</el-button>
            <el-button style="flex: 1" @click="handleWeighReset">重置</el-button>
          </div>
        </el-form>
      </div>

      <!-- 过磅单列表 -->
      <div class="mobile-form__section">
        <div class="mobile-form__section-title">过磅单列表</div>
        <div class="mobile-item-list">
          <div
            v-for="row in weighSelectList"
            :key="row.id"
            class="mobile-item-card mobile-item-card--clickable"
            @click="handleWeighSelect(row)"
          >
            <div class="mobile-item-card__header">
              <span class="mobile-item-card__name">{{ row.no }}</span>
              <el-tag :type="row.inStatus === 1 ? 'success' : 'warning'" size="small">
                {{ row.inStatus === 1 ? '已入库' : '未入库' }}
              </el-tag>
            </div>
            <div class="mobile-item-card__body">
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">产品名称</span>
                <span class="mobile-item-card__info-value">{{ row.productName || '-' }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">车牌号</span>
                <span class="mobile-item-card__info-value">{{ row.vehicleNumber || '-' }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">净重</span>
                <span class="mobile-item-card__info-value">{{ row.netWeight != null ? row.netWeight + ' kg' : '-' }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">剩余重量</span>
                <span class="mobile-item-card__info-value">{{ row.remainingWeight != null ? row.remainingWeight + ' kg' : '-' }}</span>
              </div>
              <div class="mobile-item-card__info-row">
                <span class="mobile-item-card__info-label">供应商</span>
                <span class="mobile-item-card__info-value">{{ row.supplierName || row.supplierName2 || '-' }}</span>
              </div>
            </div>
          </div>
          <div v-if="weighSelectList.length === 0" class="mobile-empty-tip">暂无过磅单数据</div>
        </div>
        <div class="mobile-pagination" v-if="weighPagination.total > 0">
          <el-pagination
            v-model:current-page="weighPagination.pageNo"
            v-model:page-size="weighPagination.pageSize"
            :total="weighPagination.total"
            :page-sizes="[10, 20]"
            layout="total, prev, pager, next"
            :pager-count="5"
            @size-change="handleWeighPageSizeChange"
            @current-change="handleWeighPageChange"
          />
        </div>
      </div>

      <div class="mobile-form__footer">
        <el-button @click="weighSelectDialogVisible = false" style="width: 100%">取 消</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- 过磅单详情弹窗 -->
  <el-drawer
    v-model="weighDialogVisible"
    title="过磅单详情"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :append-to-body="true"
    class="mobile-form-drawer"
  >
    <div class="mobile-form">
      <!-- 基本信息 -->
      <div class="mobile-form__section">
        <div class="mobile-form__section-title">基本信息</div>
        <div class="mobile-info-list">
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">过磅单号</span>
            <span class="mobile-info-row__value">{{ weighDetail?.no || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">入库状态</span>
            <span class="mobile-info-row__value">
              <el-tag :type="weighDetail?.inStatus === 1 ? 'success' : 'warning'" size="small">
                {{ weighDetail?.inStatus === 1 ? '已入库' : '未入库' }}
              </el-tag>
            </span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">产品</span>
            <span class="mobile-info-row__value">{{ weighDetail?.productName || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">车牌</span>
            <span class="mobile-info-row__value">{{ weighDetail?.vehicleNumber || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">毛重</span>
            <span class="mobile-info-row__value">{{ weighDetail?.grossWeight != null ? weighDetail.grossWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">皮重</span>
            <span class="mobile-info-row__value">{{ weighDetail?.tareWeight != null ? weighDetail.tareWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">净重</span>
            <span class="mobile-info-row__value">{{ weighDetail?.netWeight != null ? weighDetail.netWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">计划重量</span>
            <span class="mobile-info-row__value">{{ weighDetail?.plannedWeight != null ? weighDetail.plannedWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">剩余重量</span>
            <span class="mobile-info-row__value">{{ weighDetail?.remainingWeight != null ? weighDetail.remainingWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">杂质率</span>
            <span class="mobile-info-row__value">{{ weighDetail?.impurityRate != null ? (weighDetail.impurityRate * 100).toFixed(2) + '%' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">供应商</span>
            <span class="mobile-info-row__value">{{ weighDetail?.supplierName || weighDetail?.supplierName2 || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">司机</span>
            <span class="mobile-info-row__value">{{ weighDetail?.driver || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">管理员</span>
            <span class="mobile-info-row__value">{{ weighDetail?.administrator || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">过磅员</span>
            <span class="mobile-info-row__value">{{ weighDetail?.weigher || '-' }}</span>
          </div>
          <div class="mobile-info-row" v-if="weighDetail?.fileUrl">
            <span class="mobile-info-row__label">附件</span>
            <span class="mobile-info-row__value"><a :href="weighDetail.fileUrl" target="_blank">查看附件</a></span>
          </div>
          <div class="mobile-info-row" v-if="weighDetail?.remark">
            <span class="mobile-info-row__label">备注</span>
            <span class="mobile-info-row__value">{{ weighDetail.remark }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">创建时间</span>
            <span class="mobile-info-row__value">{{ weighDetail?.createTime ? formatDate(weighDetail.createTime) : '-' }}</span>
          </div>
        </div>
      </div>

      <!-- 检验信息部分 - 仅当有检验数据时显示 -->
      <div class="mobile-form__section" v-if="hasInspectionData">
        <div class="mobile-form__section-title">检验信息</div>
        <div class="mobile-info-list">
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">取样日期</span>
            <span class="mobile-info-row__value">{{ weighDetail?.sampleDate ? formatDate(weighDetail.sampleDate) : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">取样地点</span>
            <span class="mobile-info-row__value">{{ weighDetail?.sampleLocation || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">代表重量</span>
            <span class="mobile-info-row__value">{{ weighDetail?.representativeWeight != null ? weighDetail.representativeWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">样品重量</span>
            <span class="mobile-info-row__value">{{ weighDetail?.sampleWeight != null ? weighDetail.sampleWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">杂质重量</span>
            <span class="mobile-info-row__value">{{ weighDetail?.impurityWeight != null ? weighDetail.impurityWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">沙土重量</span>
            <span class="mobile-info-row__value">{{ weighDetail?.sandWeight != null ? weighDetail.sandWeight + ' kg' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">感官</span>
            <span class="mobile-info-row__value">{{ weighDetail?.sensoryEvaluation || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">合格率</span>
            <span class="mobile-info-row__value">{{ weighDetail?.qualificationRate ? weighDetail.qualificationRate + '%' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">水分</span>
            <span class="mobile-info-row__value">{{ weighDetail?.moistureContent ? weighDetail.moistureContent + '%' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">含糖</span>
            <span class="mobile-info-row__value">{{ weighDetail?.sugarContent ? weighDetail.sugarContent + '%' : '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">RA值</span>
            <span class="mobile-info-row__value">{{ weighDetail?.raValue || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">STV值</span>
            <span class="mobile-info-row__value">{{ weighDetail?.stvValue || '-' }}</span>
          </div>
          <div class="mobile-info-row">
            <span class="mobile-info-row__label">化验员</span>
            <span class="mobile-info-row__value">{{ weighDetail?.labTechnician || '-' }}</span>
          </div>
          <div class="mobile-info-row" v-if="weighDetail?.inspectionRemark">
            <span class="mobile-info-row__label">检验备注</span>
            <span class="mobile-info-row__value">{{ weighDetail.inspectionRemark }}</span>
          </div>
        </div>
      </div>

      <div class="mobile-form__footer">
        <el-button @click="weighDialogVisible = false" style="width: 100%">关 闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Icon } from '@/components/Icon'
import * as MaterialRequisitionApi from '@/api/mes/production/material-requisition'
import { formatDate } from '@/utils/formatTime'
import { ProductApi } from '@/api/erp/product/product'
import { WarehouseApi } from '@/api/erp/stock/warehouse'
import { WeighApi } from '@/api/erp/purchase/weigh'
import { YVHgetWorkOrderPage } from '@/api/mes/production/workorder'
import { getProductBomPage, getProductBom, ProductBomVO, ProductBomItemVO } from '@/api/mes/product/bom'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

const emit = defineEmits(['success'])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref<'create' | 'update'>('create')
const productOptions = ref<any[]>([])
const warehouseOptions = ref<any[]>([])
const bomOptions = ref<ProductBomVO[]>([])
const selectedBomId = ref<number | undefined>(undefined)

const weighDialogVisible = ref(false)
const weighDetail = ref<any>(null)

// 判断是否有检验数据
const hasInspectionData = computed(() => {
  if (!weighDetail.value) return false
  return !!(
    weighDetail.value.sampleDate ||
    weighDetail.value.sampleLocation ||
    weighDetail.value.representativeWeight ||
    weighDetail.value.sampleWeight ||
    weighDetail.value.impurityWeight ||
    weighDetail.value.sandWeight ||
    weighDetail.value.sensoryEvaluation ||
    weighDetail.value.qualificationRate ||
    weighDetail.value.moistureContent ||
    weighDetail.value.sugarContent ||
    weighDetail.value.raValue ||
    weighDetail.value.stvValue ||
    weighDetail.value.labTechnician ||
    weighDetail.value.inspectionRemark
  )
})

// 工单选择弹窗相关
const workOrderSelectDialogVisible = ref(false)
const workOrderSelectList = ref<any[]>([])
const workOrderSearchForm = reactive({
  code: '',
  name: '',
  status: [] as number[]
})
const workOrderPagination = reactive({
  pageNo: 1,
  pageSize: 20,
  total: 0
})

// 过磅单选择弹窗相关
const weighSelectDialogVisible = ref(false)
const currentSelectIndex = ref<number>(-1)
const weighSelectList = ref<any[]>([])
const weighSearchForm = reactive({
  no: '',
  productName: ''
})
const weighPagination = reactive({
  pageNo: 1,
  pageSize: 20,
  total: 0
})

interface MaterialRequisitionItem {
  id?: number
  materialId: number | string
  materialCode: string
  materialName: string
  unit: string
  planQuantity: number
  actualQuantity?: number
  warehouseId: number
  warehouseName: string
  no?: string
  purchaseId?: number
  weighRemainingWeight?: number
  remark?: string
  matched?: boolean
}

interface MaterialRequisitionForm {
  id?: number
  code: string
  orderCode: string
  orderId?: number
  requisitionTime: string
  status: number
  applicantId?: number
  applicantName?: string
  remark?: string
  items: MaterialRequisitionItem[]
}

// 初始化默认值
const defaultFormData: MaterialRequisitionForm = {
  code: '',
  orderCode: '',
  orderId: undefined,
  requisitionTime: new Date().toISOString(),
  status: 0,
  applicantId: undefined,
  applicantName: '',
  remark: '',
  items: []
}

const formData = ref<MaterialRequisitionForm>({
  ...defaultFormData
})

const formRef = ref()
const formRules = reactive({
  code: [{ required: true, message: '请输入领料单号', trigger: 'blur' }],
  orderCode: [{ required: true, message: '请输入工单编号', trigger: 'blur' }],
  requisitionTime: [{ required: true, message: '请选择领料时间', trigger: 'change' }]
})

interface CompleteFormData {
  id: number
  items: Array<{
    id: number
    materialId: number
    materialCode: string
    materialName: string
    unit: string
    warehouseId: number
    warehouseName: string
    actualQuantity: number
    no?: string
    purchaseId?: number
    weighRemainingWeight?: number
    remark?: string
  }>
}

const completeDialogVisible = ref(false)
const completeFormData = ref<CompleteFormData>({
  id: 0,
  items: []
})
const completeFormRef = ref()
const completeFormRules = {}

const loadProductOptions = async () => {
  try {
    const list = await ProductApi.getProductSimpleList()
    productOptions.value = Array.isArray(list) ? list : list?.data || []
  } catch (e) {
    console.error('加载产品列表失败', e)
  }
}

const loadWarehouseOptions = async () => {
  try {
    const list = await WarehouseApi.getWarehouseSimpleList()
    warehouseOptions.value = Array.isArray(list) ? list : list?.data || []
    // 为已存在但未选择仓库的明细设置默认仓库（列表第一个）
    if (warehouseOptions.value.length > 0) {
      const first = warehouseOptions.value[0]
      formData.value.items.forEach((it: any) => {
        if (it.warehouseId == null || it.warehouseId === 0) {
          it.warehouseId = first.id
          it.warehouseName = first.name
        }
      })
    }
  } catch (e) {
    console.error('加载仓库列表失败', e)
  }
}

// 加载BOM列表
const loadBomOptions = async () => {
  try {
    const res: any = await getProductBomPage({ pageNo: 1, pageSize: 100, status: 1 })
    bomOptions.value = res?.list || res?.data?.list || []
  } catch (e) {
    console.error('加载BOM列表失败', e)
  }
}

// 选择BOM后带出物料
const handleBomChange = async (bomId: number | undefined) => {
  if (!bomId) return
  try {
    formLoading.value = true
    const bom: any = await getProductBom(bomId)
    const bomData = bom?.data || bom
    if (bomData && Array.isArray(bomData.items) && bomData.items.length > 0) {
      // 获取默认仓库
      let defaultWarehouseId = 0
      let defaultWarehouseName = ''
      if (warehouseOptions.value.length > 0) {
        defaultWarehouseId = warehouseOptions.value[0].id
        defaultWarehouseName = warehouseOptions.value[0].name
      }

      // 将BOM物料转换为领料明细
      const newItems: MaterialRequisitionItem[] = bomData.items.map((item: ProductBomItemVO) => ({
        materialId: item.materialId,
        materialCode: item.materialCode || '',
        materialName: item.materialName || '',
        unit: item.unit || '',
        planQuantity: item.unitQuantity || 0,
        warehouseId: defaultWarehouseId,
        warehouseName: defaultWarehouseName,
        remark: item.remark || '',
        matched: true,
        no: '',
        purchaseId: undefined
      }))

      // 追加到现有明细中
      formData.value.items.push(...newItems)
      ElMessage.success(`已从BOM带出 ${newItems.length} 条物料明细`)
    } else {
      ElMessage.warning('该BOM没有物料明细')
    }
  } catch (e) {
    console.error('获取BOM详情失败', e)
    ElMessage.error('获取BOM详情失败')
  } finally {
    formLoading.value = false
    // 重置选择，允许再次选择同一BOM
    selectedBomId.value = undefined
  }
}





const handleWarehouseChange = (index: number) => {
  const item = formData.value.items[index]
  if (!item) return
  const w = warehouseOptions.value.find((x: any) => x.id === item.warehouseId)
  item.warehouseName = w ? w.name : ''
}

const handleCompleteWarehouseChange = (index: number) => {
  const item = completeFormData.value.items[index]
  if (!item) return
  const w = warehouseOptions.value.find((x: any) => x.id === item.warehouseId)
  item.warehouseName = w ? w.name : ''
}

const handleProductChange = async (index: number) => {
  const item = formData.value.items[index]
  if (!item) return
  try {
    let prod: any = null
    const raw = (item.materialId ?? '').toString().trim()
    if (!raw) {
      item.matched = false
      item.materialCode = ''
      item.materialName = ''
      item.unit = ''
      return
    }

    const asNumber = Number(raw)
    if (Number.isInteger(asNumber) && asNumber > 0) {
      // 数字：按 ID 匹配
      prod = productOptions.value.find((p: any) => p.id === asNumber)
      if (!prod) {
        prod = await ProductApi.getProduct(asNumber)
      }
      if (prod) {
        item.materialId = asNumber
        item.matched = true
        item.materialCode = prod?.barCode || ''
        item.materialName = prod?.name || ''
        item.unit = prod?.unitName || ''
        return
      }
    }

    // 非纯数字：尝试按条码或名称匹配
    prod = productOptions.value.find(
      (p: any) => p.barCode === raw || p.name === raw || (p.barCode && p.barCode.includes(raw))
    )
    if (prod) {
      item.materialId = prod.id
      item.matched = true
      item.materialCode = prod?.barCode || ''
      item.materialName = prod?.name || ''
      item.unit = prod?.unitName || ''
    } else {
      // 未匹配：使用用户输入作为物料编码，清空名称与单位，允许手动填写
      item.matched = false
      item.materialId = raw
      item.materialCode = raw
      item.materialName = ''
      item.unit = ''
    }
  } catch (e) {
    console.error('获取产品详情失败', e)
  }
}



// 打开过磅单选择弹窗
const handleSelectWeigh = (index: number) => {
  currentSelectIndex.value = index
  weighSelectDialogVisible.value = true
  // 重置搜索条件并加载数据
  weighSearchForm.no = ''
  weighSearchForm.productName = ''
  weighPagination.pageNo = 1
  loadWeighSelectList()
}

// 加载过磅单选择列表
const loadWeighSelectList = async () => {
  try {
    formLoading.value = true
    const params = {
      pageNo: weighPagination.pageNo,
      pageSize: weighPagination.pageSize,
      inStatus: 1, // 只显示已入库的过磅单
      ...(weighSearchForm.no && { no: weighSearchForm.no }),
      ...(weighSearchForm.productName && { productName: weighSearchForm.productName })
    }

    const res: any = await WeighApi.getWeighPage(params)
    // 兼容不同返回结构
    weighSelectList.value = res?.list || res?.data?.list || []
    weighPagination.total = res?.total || res?.data?.total || 0
  } catch (e) {
    console.error('加载过磅单列表失败', e)
    ElMessage.error('加载过磅单列表失败')
  } finally {
    formLoading.value = false
  }
}

// 搜索过磅单
const handleWeighSearch = () => {
  weighPagination.pageNo = 1
  loadWeighSelectList()
}

// 重置搜索条件
const handleWeighReset = () => {
  weighSearchForm.no = ''
  weighSearchForm.productName = ''
  weighPagination.pageNo = 1
  loadWeighSelectList()
}

// 分页变化
const handleWeighPageChange = (page: number) => {
  weighPagination.pageNo = page
  loadWeighSelectList()
}

const handleWeighPageSizeChange = (size: number) => {
  weighPagination.pageSize = size
  weighPagination.pageNo = 1
  loadWeighSelectList()
}

// 行点击选择
const handleWeighRowSelect = (row: any) => {
  handleWeighSelect(row)
}

// 选择过磅单
const handleWeighSelect = (row: any) => {
  if (currentSelectIndex.value >= 0) {
    // 判断是在主表单还是确认领料弹窗中
    if (formData.value.items.length > currentSelectIndex.value) {
      const item = formData.value.items[currentSelectIndex.value]
      item.no = row.no
      item.purchaseId = row.id
      // 保存过磅单的剩余重量信息，用于后续扣减
      item.weighRemainingWeight = row.remainingWeight

      // 可选：同时填充相关信息，如产品信息
      if (row.productName && !item.materialName) {
        item.materialName = row.productName
      }
    } else if (completeFormData.value.items.length > currentSelectIndex.value) {
      const item = completeFormData.value.items[currentSelectIndex.value]
      item.no = row.no
      item.purchaseId = row.id
      // 保存过磅单的剩余重量信息，用于后续扣减
      item.weighRemainingWeight = row.remainingWeight
    }
  }

  weighSelectDialogVisible.value = false
  ElMessage.success('选择过磅单成功')
}

// 确认领料弹窗中选择过磅单
const handleCompleteSelectWeigh = (index: number) => {
  currentSelectIndex.value = index
  weighSelectDialogVisible.value = true
  // 重置搜索条件并加载数据
  weighSearchForm.no = ''
  weighSearchForm.productName = ''
  weighPagination.pageNo = 1
  loadWeighSelectList()
}

const handleViewWeigh = async ($index: number) => {
  const item = formData.value.items[$index]
  if (!item?.purchaseId) {
    ElMessage.warning('未关联过磅单')
    return
  }
  try {
    formLoading.value = true
    const res: any = await WeighApi.getWeigh(item.purchaseId)
    weighDetail.value = res?.data || res
    weighDialogVisible.value = true
  } catch (e) {
    console.error('获取过磅单详情失败', e)
    ElMessage.error('获取过磅单详情失败')
  } finally {
    formLoading.value = false
  }
}

// 打开工单选择弹窗
const handleSelectWorkOrder = () => {
  workOrderSelectDialogVisible.value = true
  // 重置搜索条件并加载数据
  workOrderSearchForm.code = ''
  workOrderSearchForm.name = ''
  workOrderSearchForm.status = [2,3]
  workOrderPagination.pageNo = 1
  loadWorkOrderSelectList()
}

// 加载工单选择列表
const loadWorkOrderSelectList = async () => {
  try {
    formLoading.value = true
    const params = {
      pageNo: workOrderPagination.pageNo,
      pageSize: workOrderPagination.pageSize,
      ...(workOrderSearchForm.code && { code: workOrderSearchForm.code }),
      ...(workOrderSearchForm.name && { name: workOrderSearchForm.name }),
      ...(workOrderSearchForm.status && { status: workOrderSearchForm.status })
    }

    const res: any = await YVHgetWorkOrderPage(params)
    // 兼容不同返回结构
    workOrderSelectList.value = res?.list || res?.data?.list || []
    workOrderPagination.total = res?.total || res?.data?.total || 0
  } catch (e) {
    console.error('加载工单列表失败', e)
    ElMessage.error('加载工单列表失败')
  } finally {
    formLoading.value = false
  }
}

// 搜索工单
const handleWorkOrderSearch = () => {
  workOrderPagination.pageNo = 1
  loadWorkOrderSelectList()
}

// 重置搜索条件
const handleWorkOrderReset = () => {
  workOrderSearchForm.code = ''
  workOrderSearchForm.name = ''
  workOrderSearchForm.status = [] as number[]
  workOrderPagination.pageNo = 1
  loadWorkOrderSelectList()
}

// 分页变化
const handleWorkOrderPageChange = (page: number) => {
  workOrderPagination.pageNo = page
  loadWorkOrderSelectList()
}

const handleWorkOrderPageSizeChange = (size: number) => {
  workOrderPagination.pageSize = size
  workOrderPagination.pageNo = 1
  loadWorkOrderSelectList()
}

// 行点击选择
const handleWorkOrderRowSelect = (row: any) => {
  handleWorkOrderSelect(row)
}

// 选择工单
const handleWorkOrderSelect = (row: any) => {
  formData.value.orderCode = row.code || String(row.id)
  formData.value.orderId = row.id
  // 自动设置领料编号与工单号相同
  formData.value.code = formData.value.orderCode

  workOrderSelectDialogVisible.value = false
  ElMessage.success('选择工单成功')
}

// 工单状态相关函数
const getWorkOrderStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '草稿',
    1: '待审核',
    2: '已审核',
    3: '生产中',
    4: '已完成',
    5: '已关闭',
    6: '已取消',
    7: '已入库'
  }
  return statusMap[status] || '未知'
}

const getWorkOrderStatusType = (status: number) => {
  const typeMap: Record<number, 'info' | 'warning' | 'primary' | 'success' | 'danger'> = {
    0: 'info',      // 草稿 - 灰色
    1: 'warning',   // 待审核 - 黄色
    2: 'primary',   // 已审核 - 蓝色
    3: 'primary',   // 生产中 - 蓝色
    4: 'success',   // 已完成 - 绿色
    5: 'info',      // 已关闭 - 灰色
    6: 'danger',    // 已取消 - 红色
    7: 'success'    // 已入库 - 绿色
  }
  return typeMap[status] || 'info'
}



const open = async (type: 'create' | 'update', id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'create' ? '新增领料单' : '修改领料单'
  formType.value = type

  // 重置表单数据
  formData.value = JSON.parse(JSON.stringify(defaultFormData))

  // 加载产品下拉
  if (!productOptions.value.length) await loadProductOptions()
  // 加载仓库下拉
  if (!warehouseOptions.value.length) await loadWarehouseOptions()
  // 加载BOM下拉
  if (!bomOptions.value.length) await loadBomOptions()
  // 重置BOM选择
  selectedBomId.value = undefined


  // 修改时获取详情
  if (type === 'update' && id) {
    formLoading.value = true
    try {
      const result = await MaterialRequisitionApi.getMaterialRequisition(id)
      console.log('获取到的详情数据:', result)

      // 直接使用返回的数据，不需要 .data
      if (result) {
        // 确保所有必要字段都存在
        formData.value = {
          id: result.id,
          code: result.code || '',
          orderCode: result.orderCode || '',
          orderId: result.orderId,
          requisitionTime: result.requisitionTime || '',
          status: result.status || 0,
          applicantId: result.applicantId,
          applicantName: result.applicantName || '',
          remark: result.remark || '',
          items: Array.isArray(result.items)
            ? result.items.map((item) => ({
              id: item.id,
              materialId: item.materialId,
              materialCode: item.materialCode || '',
              materialName: item.materialName || '',
              unit: item.unit || '',
              planQuantity: item.planQuantity || 0,
              warehouseId: item.warehouseId,
              warehouseName: item.warehouseName || '',
              no: item.no || '',
              purchaseId: item.purchaseId,
              remark: item.remark || ''
            }))
            : []
        }
      }
    } catch (error) {
      console.error('获取领料单详情失败:', error)
      ElMessage.error('获取领料单详情失败')
    } finally {
      formLoading.value = false
    }
  }
}

const openComplete = async (id: number) => {
  completeDialogVisible.value = true
  completeFormData.value = {
    id,
    items: []
  }

  // 确保仓库选项已加载
  if (!warehouseOptions.value.length) await loadWarehouseOptions()

  formLoading.value = true
  try {
    const result = await MaterialRequisitionApi.getMaterialRequisition(id)
    console.log('获取到的确认领料数据:', result)

    // 直接使用返回的数据，不需要 .data
    if (result && Array.isArray(result.items)) {
      completeFormData.value = {
        id,
        items: result.items.map((item: any) => {
          // 确保仓库名称正确回显
          let warehouseName = item.warehouseName || ''
          if (!warehouseName && item.warehouseId && warehouseOptions.value.length > 0) {
            const warehouse = warehouseOptions.value.find((w: any) => w.id === item.warehouseId)
            warehouseName = warehouse ? warehouse.name : ''
          }

          return {
            id: item.id,
            materialId: item.materialId,
            materialCode: item.materialCode,
            materialName: item.materialName,
            unit: item.unit,
            warehouseId: item.warehouseId,
            warehouseName: warehouseName,
            actualQuantity: item.planQuantity || 0,
            no: item.no || '',
            purchaseId: item.purchaseId,
            weighRemainingWeight: item.weighRemainingWeight,
            remark: item.remark || ''
          }
        })
      }
    }
  } catch (error) {
    console.error('获取领料单详情失败:', error)
    ElMessage.error('获取领料单详情失败')
    completeDialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

const handleAddItem = () => {
  const newItem: MaterialRequisitionItem = {
    materialId: '',
    materialCode: '',
    materialName: '',
    unit: '',
    planQuantity: 0,
    warehouseId: 0,
    warehouseName: '',
    remark: '',
    matched: false,
    no: '',
    purchaseId: undefined
  }
  // 默认设置为仓库列表第一个
  if (warehouseOptions.value.length > 0) {
    const first = warehouseOptions.value[0]
    newItem.warehouseId = first.id
    newItem.warehouseName = first.name
  }
  formData.value.items.push(newItem)
}

const handleDeleteItem = (index: number) => {
  formData.value.items.splice(index, 1)
}



const submitForm = async () => {
  if (!formRef.value) return

  try {
    // 表单验证
    await formRef.value.validate()

    formLoading.value = true

    // 提交数据
    const func =
      formType.value === 'create'
        ? MaterialRequisitionApi.createMaterialRequisition
        : MaterialRequisitionApi.updateMaterialRequisition

    // 检查表单数据
    console.log('提交的表单数据:', formData.value)

    const result = await func(formData.value)
    console.log('提交结果:', result)

    dialogVisible.value = false
    emit('success')
    ElMessage.success(formType.value === 'create' ? '新增成功' : '修改成功')
  } catch (error) {
    console.error('表单提交失败:', error)
    ElMessage.error('表单验证失败，请检查输入')
  } finally {
    formLoading.value = false
  }
}

const submitCompleteForm = async () => {
  if (!completeFormRef.value) return

  try {
    // 表单验证
    await completeFormRef.value.validate()

    formLoading.value = true

    // 检查表单数据
    console.log('提交的确认领料数据:', completeFormData.value)

    // 确保发送的数据格式正确
    const result = await MaterialRequisitionApi.completeMaterialRequisition({
      id: completeFormData.value.id,
      items: completeFormData.value.items.map((item) => ({
        id: item.id,
        materialCode: item.materialCode,
        warehouseId: item.warehouseId,
        actualQuantity: item.actualQuantity,
        purchaseId: item.purchaseId,
        no: item.no,
        weighRemainingWeight: item.weighRemainingWeight,
        remark: item.remark
      }))
    })
    console.log('确认领料结果:', result)

    completeDialogVisible.value = false
    emit('success')
    ElMessage.success('确认领料成功')
  } catch (error) {
    console.error('确认领料失败:', error)
    ElMessage.error('表单验证失败，请检查输入')
  } finally {
    formLoading.value = false
  }
}

defineExpose({
  open,
  openComplete
})
</script>

<style lang="scss" scoped>
.mobile-form {
  padding: 0 4px;
}
.mobile-form__section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.mobile-form__section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-form__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 12px 16px;
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  z-index: 10;
  margin: 0 -4px;

  .el-button {
    flex: 1;
    height: 40px;
    font-size: 15px;
  }
}
.mobile-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-item-card {
  background: #f9f9fb;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #ebeef5;
  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  &__index {
    font-size: 12px;
    color: #909399;
    font-weight: 600;
  }
  &__name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__body {
    font-size: 13px;
  }
  &__info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
  }
  &__info-label {
    color: #909399;
    flex-shrink: 0;
  }
  &__info-value {
    color: #606266;
    text-align: right;
  }
  &__input-group {
    margin-top: 6px;
    :deep(.el-form-item) {
      margin-bottom: 10px;
    }
  }
  &__actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
  }
}
.mobile-empty-tip {
  text-align: center;
  color: #909399;
  padding: 20px 0;
  font-size: 14px;
}
.mobile-item-card--clickable {
  cursor: pointer;
  transition: all 0.2s;
  &:active {
    background: #f0f0f0;
  }
}
.mobile-info-list {
  font-size: 13px;
}
.mobile-info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
  &:last-child { border-bottom: none; }
  &__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
  &__value { color: #303133; text-align: right; }
}
.mobile-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>
