klp-oa/klp-ui/src/views/wms/coil/do/trace.vue

<template>
  <div class="app-container acid-do-container">
    <div class="search-section">
      <h3 class="page-title">钢卷追踪</h3>
      <el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="search-form">
        <el-form-item label="入场钢卷号" prop="enterCoilNo">
          <el-input v-model="materialQueryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
            @keyup.enter.native="handleMaterialQuery" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="当前钢卷号" prop="currentCoilNo">
          <el-input v-model="materialQueryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
            @keyup.enter.native="handleMaterialQuery" style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleMaterialQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetMaterialQuery">重置</el-button>
        </el-form-item>
        <el-form-item>
          <span class="search-tip">提示：请至少填写其中一个钢卷号进行搜索</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 未搜索状态 -->
    <div v-if="!searched" class="empty-search-state">
      <i class="el-icon-search"></i>
      <p>请先输入钢卷号进行搜索</p>
    </div>

    <!-- 搜索结果区域 -->
    <div v-else>
      <!-- 2×2 钢卷信息 -->
      <div class="two-by-two-layout mb20">
        <!-- 当前钢卷 -->
        <div class="coil-column">
          <div class="column-header column-header--now">
            <h4 class="column-title">当前钢卷</h4>
            <span class="column-count">{{ nowCoilList.length }}</span>
          </div>
          <div v-loading="nowLoading" class="column-body">
            <template v-if="nowCoilList.length > 0">
              <KLPTable :data="nowCoilList" :max-height="280" :float-layer="true"
                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
                  </template>
                </el-table-column>
                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
                  </template>
                </el-table-column>
              </KLPTable>
            </template>
            <div v-else class="column-empty">暂无数据</div>
          </div>
        </div>

        <!-- 已发货钢卷 -->
        <div class="coil-column">
          <div class="column-header column-header--trans">
            <h4 class="column-title">已发货钢卷</h4>
            <span class="column-count">{{ transCoilList.length }}</span>
          </div>
          <div v-loading="transLoading" class="column-body">
            <template v-if="transCoilList.length > 0">
              <KLPTable :data="transCoilList" :max-height="280" :float-layer="true"
                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
                  </template>
                </el-table-column>
                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
                  </template>
                </el-table-column>
              </KLPTable>
            </template>
            <div v-else class="column-empty">暂无数据</div>
          </div>
        </div>

        <!-- 历史钢卷 -->
        <div class="coil-column">
          <div class="column-header column-header--history">
            <h4 class="column-title">历史钢卷</h4>
            <span class="column-count">{{ historyCoilList.length }}</span>
          </div>
          <div v-loading="historyLoading" class="column-body">
            <template v-if="historyCoilList.length > 0">
              <KLPTable :data="historyCoilList" :max-height="280" :float-layer="true"
                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
                  </template>
                </el-table-column>
                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
                  </template>
                </el-table-column>
              </KLPTable>
            </template>
            <div v-else class="column-empty">暂无数据</div>
          </div>
        </div>

        <!-- 未入库钢卷 -->
        <div class="coil-column">
          <div class="column-header column-header--unIn">
            <h4 class="column-title">未入库钢卷</h4>
            <span class="column-count">{{ unInCoilList.length }}</span>
          </div>
          <div v-loading="unInLoading" class="column-body">
            <template v-if="unInCoilList.length > 0">
              <KLPTable :data="unInCoilList" max-height="280" :float-layer="true"
                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
                  </template>
                </el-table-column>
                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
                  </template>
                </el-table-column>
              </KLPTable>
            </template>
            <div v-else class="column-empty">暂无数据</div>
          </div>
        </div>
      </div>

      <!-- 下部：操作记录 -->
      <div class="section-card action-section">
        <div class="section-header">
          <h3 class="section-title">操作记录</h3>
          <div class="section-actions">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
              @click="handleDeleteAction">删除</el-button>
            <el-button type="warning" plain icon="el-icon-refresh" size="mini" @click="handleRefreshAction"
              :disabled="buttonLoading" v-loading="buttonLoading">刷新</el-button>
            <el-checkbox style="margin-left: 10px;" v-model="rubbish" label="1"
              @change="getActionList">查看被删除操作</el-checkbox>
          </div>
        </div>

        <!-- 操作记录搜索 -->
        <el-form :model="actionQueryParams" ref="actionQueryForm" size="small" :inline="true" class="query-form mb10">
          <el-form-item label="操作类型" prop="actionType">
            <el-select v-model="actionQueryParams.actionType" placeholder="请选择操作类型" clearable filterable>
              <el-option v-for="item in dict.type.action_type" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作状态" prop="actionStatus">
            <el-select v-model="actionQueryParams.actionStatus" placeholder="请选择操作状态" clearable>
              <el-option label="待处理" :value="0" />
              <el-option label="处理中" :value="1" />
              <el-option label="已完成" :value="2" />
              <el-option label="已取消" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleActionQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetActionQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 操作记录表格 -->
        <div v-loading="actionLoading" class="action-list-container">
          <el-table :data="actionList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="操作类型" align="center" prop="actionType" width="160">
              <template slot-scope="scope">
                <el-select @change="handleStatusChange(scope.row)" v-model="scope.row.actionType" placeholder="请选择操作类型"
                  clearable filterable>
                  <el-option label="入库/收货操作" :value="401" />
                  <el-option label="发货操作" :value="402" />
                  <el-option label="移库操作" :value="403" />
                  <el-option label="通过库区编辑钢卷" :value="404" />
                  <el-option label="钢卷打包" :value="405" />
                  <el-option v-for="item in dict.type.action_type" :key="item.value" :label="item.label"
                    :value="parseInt(item.value)" />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="操作状态" align="center" prop="actionStatus" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.actionStatus === 0" type="info" size="mini">待处理</el-tag>
                <el-tag v-else-if="scope.row.actionStatus === 1" type="warning" size="mini">处理中</el-tag>
                <el-tag v-else-if="scope.row.actionStatus === 2" type="success" size="mini">已完成</el-tag>
                <el-tag v-else-if="scope.row.actionStatus === 3" type="danger" size="mini">已取消</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="优先级" align="center" prop="priority" width="90">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.priority === 0" type="info" size="mini">普通</el-tag>
                <el-tag v-else-if="scope.row.priority === 1" type="warning" size="mini">重要</el-tag>
                <el-tag v-else-if="scope.row.priority === 2" type="danger" size="mini">紧急</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="来源" align="center" prop="sourceType" width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.sourceType === 'scan'" type="success" size="mini">
                  <i class="el-icon-mobile"></i> 扫码
                </el-tag>
                <el-tag v-else type="info" size="mini">
                  <i class="el-icon-edit-outline"></i> 手动
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="新增时间" align="center" prop="createTime" width="155" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作人" align="center" prop="updateBy" width="100" />
            <el-table-column label="创建人" align="center" prop="createByName" width="140">
              <template slot-scope="scope">
                <el-select @change="handleProcessTimeChange(scope.row)" v-model="scope.row.createBy"
                  placeholder="请选择创建人" filterable>
                  <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
                    :value="item.userName" />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="完成时间" align="center" prop="completeTime" width="220" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-date-picker @change="handleProcessTimeChange(scope.row)" value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px" v-model="scope.row.completeTime" type="datetime" placeholder="选择完成时间" />
              </template>
            </el-table-column>

            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
          </el-table>

          <!-- 分页 -->
          <pagination v-show="actionTotal > 0" :total="actionTotal" :page.sync="actionQueryParams.pageNum"
            :limit.sync="actionQueryParams.pageSize" @pagination="getActionList" />
        </div>
      </div>
    </div>

    <!-- 标签预览弹窗 -->
    <el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
      <label-render :content="labelRender.data" :labelType="labelRender.type" />
    </el-dialog>

    <label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type" />

    <!-- 钢卷修正对话框 -->
    <el-dialog :title="title" :visible.sync="correctVisible" width="1200px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入场钢卷号" prop="enterCoilNo">
              <el-input v-model="form.enterCoilNo" placeholder="请输入入场钢卷号" :disabled="!!form.coilId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前钢卷号" prop="currentCoilNo">
              <el-input v-model.trim="form.currentCoilNo" placeholder="请输入当前钢卷号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="厂家原料卷号" prop="supplierCoilNo">
              <el-input v-model.trim="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在库位" prop="warehouseId">
              <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实际库区" prop="actualWarehouseId">
              <actual-warehouse-select v-model="form.actualWarehouseId" placeholder="请选择实际库区" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班组" prop="team">
              <el-select v-model="form.team" placeholder="请选择班组" style="width: 100%">
                <el-option key="甲" label="甲" value="甲" />
                <el-option key="乙" label="乙" value="乙" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="材料类型" prop="materialType">
              <el-select v-model="form.materialType" placeholder="请选择材料类型" @change="handleMaterialTypeChange">
                <el-option label="成品" value="成品" />
                <el-option label="原料" value="原料" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="getItemLabel" prop="itemId">
              <product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品"
                style="width: 100%;" clearable />
              <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料"
                style="width: 100%;" clearable />
              <div v-else>请先选择材料类型</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="质量状态" prop="qualityStatus">
              <el-select v-model="form.qualityStatus" placeholder="请选择质量状态" style="width: 100%">
                <el-option v-for="item in dict.type.coil_quality_status" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="切边要求" prop="trimmingRequirement">
              <el-select v-model="form.trimmingRequirement" placeholder="请选择切边要求" style="width: 100%">
                <el-option label="净边料" value="净边料" />
                <el-option label="毛边料" value="毛边料" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="原料材质" prop="packingStatus">
              <el-input v-model="form.packingStatus" placeholder="请输入原料材质" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装要求" prop="packagingRequirement">
              <el-select v-model="form.packagingRequirement" placeholder="请选择包装要求" style="width: 100%">
                <el-option label="裸包" value="裸包" />
                <el-option label="普包" value="普包" />
                <el-option label="简包" value="简包" />
                <el-option label="精包" value="精包" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="毛重" prop="grossWeight">
              <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净重" prop="netWeight">
              <el-input v-model="form.netWeight" placeholder="请输入净重" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实测长度(m)" prop="actualLength">
              <el-input-number :controls="false" v-model="form.actualLength" placeholder="请输入实测长度" type="number"
                :step="0.01" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实测宽度(mm)" prop="actualWidth">
              <el-input-number :controls="false" v-model="form.actualWidth" placeholder="请输入实测宽度" type="number"
                :step="0.01" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实测厚度(mm)" prop="actualThickness">
              <el-input-number :controls="false" v-model="form.actualThickness" placeholder="请输入实测厚度" type="number"
                :step="0.01" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务目的" prop="businessPurpose">
              <el-select v-model="form.businessPurpose" placeholder="业务目的" filterable>
                <el-option v-for="item in dict.type.coil_business_purpose" :key="item.value" :value="item.value"
                  :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="调制度" prop="temperGrade">
              <el-input v-model="form.temperGrade" placeholder="请输入调制度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="镀层种类" prop="coatingType">
              <MemoInput storageKey="coatingType" v-model="form.coatingType" placeholder="请输入镀层种类" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="钢卷表面处理" prop="coilSurfaceTreatment">
              <MemoInput storageKey="surfaceTreatmentDesc" v-model="form.coilSurfaceTreatment" placeholder="请输入钢卷表面处理" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排产厚度(mm)" prop="scheduleThickness">
              <el-input-number :controls="false" v-model="form.scheduleThickness" placeholder="请输入排产厚度" type="number"
                :step="0.001" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产开始时间" prop="productionStartTime">
              <TimeInput v-model="form.productionStartTime" @input="calculateProductionDuration" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产结束时间" prop="productionEndTime">
              <TimeInput v-model="form.productionEndTime" @input="calculateProductionDuration" :show-now-button="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产耗时" prop="productionDuration">
              <el-input v-model="form.formattedDuration" placeholder="自动计算" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.coilId">
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择创建时间" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人" prop="createBy">
              <el-select v-model="form.createBy" placeholder="请选择创建人" style="width: 100%;" clearable filterable>
                <el-option v-for="item in userList" :key="item.userName" :label="item.nickName" :value="item.userName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.coilId">
          <el-col :span="24">
            <el-form-item label="绑定合同" prop="contractId">
              <div style="display: flex; gap: 10px; width: 100%;">
                <contract-select v-model="form.contractId" placeholder="请选择合同" style="flex: 1;" clearable mode="all" />
                <el-button type="success" :loading="contractLoading" @click="saveContractRel">保存合同</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 钢卷追溯对话框 -->
    <el-dialog title="钢卷追溯" :visible.sync="traceOpen" width="90%" append-to-body>
      <coil-trace-result v-loading="traceLoading" :trace-result="traceResult"></coil-trace-result>
    </el-dialog>
  </div>
</template>

<script>
import { listMaterialCoil, getMaterialCoilTrace, updateMaterialCoilSimple, checkCoilNo, restoreMaterialCoil } from '@/api/wms/coil'
import { listCoilContractRel, addCoilContractRel, updateCoilContractRel } from '@/api/wms/coilContractRel'
import { listPendingAction, getPendingAction, delPendingAction, addPendingAction, updatePendingAction, startProcess, cancelAction, restorePendingAction } from '@/api/wms/pendingAction'
import { listUser } from '@/api/system/user'
import { parseTime } from '@/utils/klp'
import CoilCard from '@/components/KLPService/Renderer/CoilCard.vue'
import LabelRender from '../panels/LabelRender/index.vue'
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import ProductSelect from "@/components/KLPService/ProductSelect";
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import CoilTraceResult from "../panels/CoilTraceResult.vue";
import TimeInput from "@/components/TimeInput";
import ContractSelect from "@/components/KLPService/ContractSelect";
import CoilSelector from '@/components/CoilSelector';
import CoilNo from '@/components/KLPService/Renderer/CoilNo.vue';
import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint'

export default {
  name: 'CorrentAllPage',
  dicts: ['action_type', 'coil_quality_status', 'coil_business_purpose'],
  components: {
    CoilCard,
    LabelRender,
    WarehouseSelect,
    ActualWarehouseSelect,
    ProductSelect,
    RawMaterialSelect,
    CoilTraceResult,
    TimeInput,
    ContractSelect,
    CoilSelector,
    CoilNo
  },
  data() {
    return {
      // 追溯相关
      traceOpen: false,
      traceLoading: false,
      traceResult: null,

      // 搜索状态
      searched: false,

      // 钢卷类型
      nowCoilList: [],
      transCoilList: [],
      historyCoilList: [],
      unInCoilList: [],
      nowLoading: false,
      transLoading: false,
      historyLoading: false,
      unInLoading: false,
      title: '钢卷信息修正',

      // 物料列表相关
      materialQueryParams: {
        pageNum: 1,
        pageSize: 20,
        enterCoilNo: null,
        currentCoilNo: null,
        warehouseId: null,
      },

      // 标签预览相关
      labelRender: {
        visible: false,
        data: {},
        type: '2'
      },

      // 表单相关
      form: {},
      correctVisible: false,
      buttonLoading: false,
      contractLoading: false,
      contractRelId: null,
      userList: [],

      floatLayerConfig: {
        columns: [
          { label: '入场钢卷号', prop: 'enterCoilNo' },
          { label: '当前钢卷号', prop: 'currentCoilNo' },
          { label: '厂家卷号', prop: 'supplierCoilNo' },
          { label: '逻辑库位', prop: 'warehouseName' },
          { label: '实际库位', prop: 'actualWarehouseName' },
          { label: '物料类型', prop: 'materialType' },
          { label: '班组', prop: 'team' },
          { label: '净重', prop: 'netWeight' },
          { label: '毛重', prop: 'grossWeight' },
          { label: '备注', prop: 'remark' },
          { label: '创建人', prop: 'createBy' },
          { label: '创建时间', prop: 'createTime' },
          { label: '更新人', prop: 'updateBy' },
          { label: '更新时间', prop: 'updateTime' },
          { label: '质量状态', prop: 'qualityStatus' },
          { label: '原料材质', prop: 'packingStatus' },
          { label: '切边要求', prop: 'edgeRequirement' },
          { label: '包装要求', prop: 'packagingRequirement' },
          { label: '物料名称', prop: 'itemName' },
          { label: '材质', prop: 'material' },
          { label: '规格', prop: 'specification' },
          { label: '镀层质量', prop: 'zincLayer' },
          { label: '厂家', prop: 'manufacturer' },
          { label: '调制度', prop: 'temperGrade' },
          { label: '镀层种类', prop: 'coatingType' },
          { label: '实测长度(m)', prop: 'actualLength' },
          { label: '实测宽度(mm)', prop: 'actualWidth' },
          { label: '实测厚度(mm)', prop: 'actualThickness' },
          { label: '钢卷表面处理', prop: 'coilSurfaceTreatment' },
          { label: '排产厚度(mm)', prop: 'scheduleThickness' },
          { label: '生产开始时间', prop: 'productionStartTime' },
          { label: '生产结束时间', prop: 'productionEndTime' },
          { label: '生产耗时', prop: 'formattedDuration' },
        ],
        title: '详细信息'
      },

      // 操作记录相关
      actionDialogVisible: false,
      actionLoading: false,
      actionList: [],
      actionTotal: 0,
      currentCoilId: null,
      actionQueryParams: {
        pageNum: 1,
        pageSize: 20,
        actionType: null,
        actionStatus: null
      },
      // 操作记录表单
      actionForm: {},
      actionOpen: false,
      actionTitle: '',
      // 操作记录选择相关
      ids: [],
      single: true,
      multiple: true,
      rubbish: false,
      // 钢卷选择器可见性
      coilSelectorVisible: false,

      // 表单校验
      rules: {
        enterCoilNo: [
          { required: true, message: "入场钢卷号不能为空", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.form.coilId) {
                callback();
              } else {
                checkCoilNo({ enterCoilNo: value }).then(res => {
                  const { duplicateType } = res.data;
                  if (duplicateType === 'enter' || duplicateType === 'both') {
                    callback(new Error('入场钢卷号重复，请重新输入'));
                  } else {
                    callback();
                  }
                })
              }
            }, trigger: 'blur'
          },
        ],
        currentCoilNo: [
          { required: true, message: "当前钢卷号不能为空", trigger: "blur" },
          {
            // 当前钢卷号必须大于等于11位
            validator: (rule, value, callback) => {
              if (value.length < 11) {
                callback(new Error('当前钢卷号必须大于等于11位'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          },
        ],
        materialType: [
          { required: true, message: "材料类型不能为空", trigger: "change" }
        ],
        itemId: [
          { required: true, message: "物品ID不能为空", trigger: "blur" }
        ],
        itemType: [
          { required: true, message: "物品类型不能为空", trigger: "change" }
        ],
        netWeight: [
          { required: true, message: "净重不能为空", trigger: "blur" }
        ],
        grossWeight: [
          { required: true, message: "毛重不能为空", trigger: "blur" }
        ],
      },
      // 操作记录表单校验
      actionRules: {
        coilId: [
          { required: true, message: '请选择钢卷', trigger: 'blur' }
        ],
        actionType: [
          { required: true, message: '请选择操作类型', trigger: 'change' }
        ]
      },
      coilIds: ''
    }
  },
  computed: {
    // 动态显示标签
    getItemLabel() {
      if (this.form.materialType === '成品') {
        return '产品类型';
      } else if (this.form.materialType === '原料') {
        return '原料类型';
      }
      return '物品类型';
    },
    // 分条操作列表（100-199）
    splitTypes() {
      if (!this.dict.type.action_type) return [];
      return this.dict.type.action_type.filter(item => {
        const value = parseInt(item.value);
        return value >= 100 && value <= 199;
      });
    },
    // 合卷操作列表（200-299）
    mergeTypes() {
      if (!this.dict.type.action_type) return [];
      return this.dict.type.action_type.filter(item => {
        const value = parseInt(item.value);
        return value >= 200 && value <= 299;
      });
    },
    // 其他操作列表（200-299等）
    otherTypes() {
      if (!this.dict.type.action_type) return [];
      return this.dict.type.action_type.filter(item => {
        const value = parseInt(item.value);
        return value < 100 || value > 299;
      });
    }
  },
  created() {
    // 加载用户列表
    this.getUsers()
  },
  methods: {
    parseTime,

    formatDuration(milliseconds) {
      if (!milliseconds || milliseconds < 0) return '';
      const seconds = Math.floor(milliseconds / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);
      const remainingHours = hours % 24;
      const remainingMinutes = minutes % 60;
      let result = '';
      if (days > 0) result += `${days}天`;
      if (remainingHours > 0) result += `${remainingHours}小时`;
      if (remainingMinutes > 0) result += `${remainingMinutes}分钟`;
      return result || '0分钟';
    },
    calculateProductionDuration() {
      const { productionStartTime, productionEndTime } = this.form;
      if (productionStartTime && productionEndTime) {
        const start = new Date(productionStartTime).getTime();
        const end = new Date(productionEndTime).getTime();
        if (end < start) {
          this.form.productionDuration = '';
          this.form.formattedDuration = '';
        } else {
          const durationMs = end - start;
          this.form.productionDuration = Math.round(durationMs / (1000 * 60));
          this.form.formattedDuration = this.formatDuration(durationMs);
        }
      } else {
        this.form.productionDuration = '';
        this.form.formattedDuration = '';
      }
    },

    /** 查询用户列表 */
    getUsers() {
      listUser({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.userList = response.rows || []
      })
    },

    // 打印标签
    handlePrintLabel(row) {
      this.labelRender.data = {
        ...row,
        updateTime: row.updateTime?.split(' ')[0] || '',
      };
      this.$nextTick(() => {
        this.$refs.labelRender.printLabel();
      })
    },

    // 进入数字钢卷页面
    handleNumberCoilClick(row) {
      console.log(row)
      this.$router.push({
        path: '/wms/coil/' + row.coilId,
      });
    },

    // 处理材料类型变化
    handleMaterialTypeChange(value) {
      // 清空物品选择
      this.form.itemId = null;

      // 根据材料类型设置物品类型
      if (value === '成品') {
        this.form.itemType = 'product';
      } else if (value === '原料') {
        this.form.itemType = 'raw_material';
      }
    },

    /** 预览标签 */
    handlePreviewLabel(row) {
      console.log(row)
      this.labelRender.visible = true;
      const type = getCoilTagPrintType(row);
      this.labelRender.type = type;
      this.labelRender.data = {
        ...row,
        updateTime: row.updateTime?.split(' ')[0] || '',
      };
    },

    /** 追溯按钮操作 */
    handleTrace(row) {
      this.traceOpen = true;
      this.traceLoading = true;
      this.traceResult = null; // 清空历史数据
      getMaterialCoilTrace({
        coilId: row.coilId,
        currentCoilNo: row.currentCoilNo,
      }).then(res => {
        this.traceResult = res.data; // 将结果传递给组件
      }).catch(err => {
        console.error('溯源查询失败：', err);
        this.$message.error('溯源查询失败，请重试');
      }).finally(() => {
        this.traceLoading = false;
      });
    },

    /** 查询操作记录 */
    getActionList() {
      this.actionLoading = true;
      const payload = {
        ...this.materialQueryParams,
        ...this.actionQueryParams,
        coilIds: this.coilIds,
        includeDeleted: this.rubbish ? 2 : 0
      };
      listPendingAction(payload).then(response => {
        this.actionList = response.rows || [];
        this.actionTotal = response.total || 0;
        this.actionLoading = false;
      }).catch(() => {
        this.actionLoading = false;
      });
    },

    /** 操作记录搜索 */
    handleActionQuery() {
      this.actionQueryParams.pageNum = 1;
      this.getActionList();
    },

    /** 重置操作记录搜索 */
    resetActionQuery() {
      this.resetForm('actionQueryForm');
      this.actionQueryParams.actionType = null;
      this.actionQueryParams.actionStatus = null;
      this.handleActionQuery();
    },

    // ========== 物料列表相关方法 ==========
    /** 查询物料列表（四栏并行） */
    getMaterialCoil() {
      this.nowLoading = true;
      this.transLoading = true;
      this.historyLoading = true;
      this.unInLoading = true;

      const basePayload = { ...this.materialQueryParams };

      const fetchNow = listMaterialCoil({ ...basePayload, dataType: 1, status: 0 });
      const fetchTrans = listMaterialCoil({ ...basePayload, status: 1 });
      const fetchHistory = listMaterialCoil({ ...basePayload, dataType: 0 });
      const fetchUnIn = listMaterialCoil({ ...basePayload, dataType: 10 });

      Promise.all([fetchNow, fetchTrans, fetchHistory, fetchUnIn]).then(([nowRes, transRes, historyRes, unInRes]) => {
        this.nowCoilList = nowRes.rows || [];
        this.transCoilList = transRes.rows || [];
        this.historyCoilList = historyRes.rows || [];
        this.unInCoilList = unInRes.rows || [];

        // 合并所有钢卷ID用于操作记录查询
        const allIds = [
          ...this.nowCoilList,
          ...this.transCoilList,
          ...this.historyCoilList,
          ...this.unInCoilList,
        ].map(item => item.coilId);
        this.coilIds = allIds.join(',');
        if (allIds.length > 0) {
          this.getActionList();
        } else {
          this.actionList = [];
          this.actionTotal = 0;
        }
      }).catch(() => {
        // 单个请求失败不影响其他栏
      }).finally(() => {
        this.nowLoading = false;
        this.transLoading = false;
        this.historyLoading = false;
        this.unInLoading = false;
      });
    },

    /** 物料搜索 */
    handleMaterialQuery() {
      // 检查是否至少填写了一个钢卷号
      if (!this.materialQueryParams.enterCoilNo && !this.materialQueryParams.currentCoilNo) {
        this.$message.warning('请至少填写一个钢卷号进行搜索');
        return;
      }

      this.materialQueryParams.pageNum = 1;
      this.searched = true;
      this.getMaterialCoil();
    },

    /** 重置物料搜索 */
    resetMaterialQuery() {
      this.resetForm('materialQueryForm');
      this.materialQueryParams.enterCoilNo = null;
      this.materialQueryParams.currentCoilNo = null;
      this.searched = false;
      this.nowCoilList = [];
      this.transCoilList = [];
      this.historyCoilList = [];
      this.unInCoilList = [];
      this.actionList = [];
      this.actionTotal = 0;
    },

    /** 回滚操作 */
    handleRestoreMaterial(row) {
      this.$modal.confirm('是否要将改钢卷还原到上次加工的状态（会删除该钢卷并将上一步的历史钢卷还原）').then(_ => {
        const loading = this.$loading({
          lock: true,
          text: '处理中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        restoreMaterialCoil(row.coilId).then(_ => {
          this.$modal.msgSuccess("还原成功");
          this.getMaterialCoil();
        }).finally(() => {
          loading.close()
        })
      })
    },

    /** 强制入库操作 */
    handleForceInMaterial(row) {
      this.$modal.confirm('是否要强制入库改钢卷？').then(_ => {
        const loading = this.$loading({
          lock: true,
          text: '处理中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        updateMaterialCoilSimple({
          ...row,
          dataType: 1,
        }).then(_ => {
          this.$modal.msgSuccess("强制入库成功");
          this.getMaterialCoil();
        }).finally(() => {
          loading.close()
        })
      })
    },

    /** 修正按钮操作 */
    handleCorrectMaterial(row) {
      this.form = {
        ...row,
        contractId: row.contractId || null,
      };
      if (this.form.productionDuration) {
        this.form.formattedDuration = this.formatDuration(this.form.productionDuration * 60 * 1000);
      }
      this.title = "钢卷信息修正";
      this.correctVisible = true
      this.loadContractRel(row.coilId)
    },

    /** 加载合同绑定关系 */
    loadContractRel(coilId) {
      if (!coilId) {
        this.contractRelId = null
        this.$set(this.form, 'contractId', null)
        return
      }
      listCoilContractRel({ coilId }).then(res => {
        const rows = res.rows || []
        if (rows.length > 0) {
          this.contractRelId = rows[0].relId
          this.$set(this.form, 'contractId', rows[0].contractId)
        } else {
          this.contractRelId = null
          this.$set(this.form, 'contractId', null)
        }
      })
    },

    /** 保存合同绑定 */
    saveContractRel() {
      this.contractLoading = true
      listCoilContractRel({ coilId: this.form.coilId }).then(res => {
        const rows = res.rows || []
        if (rows.length > 0) {
          return updateCoilContractRel({
            relId: rows[0].relId,
            coilId: this.form.coilId,
            contractId: this.form.contractId
          })
        } else {
          return addCoilContractRel({
            coilId: this.form.coilId,
            contractId: this.form.contractId
          })
        }
      }).then(() => {
        this.$message.success('合同绑定保存成功')
      }).finally(() => {
        this.contractLoading = false
      })
    },

    /** 取消按钮 */
    cancel() {
      this.correctVisible = false
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          this.$message.error('请填写完整信息')
          return
        }
        this.buttonLoading = true;
        // 更新钢卷信息
        const { status, exclusiveStatus, dataType, ...payload} = {
          ...this.form,
        }
        updateMaterialCoilSimple(payload).then(_ => {
          this.$modal.msgSuccess("修正成功");
          this.correctVisible = false;
          this.getMaterialCoil();
        }).finally(() => {
          this.buttonLoading = false;
        });
      })
    },

    // ========== 操作记录相关方法 ==========
    /** 处理操作状态变化 */
    handleStatusChange(row) {
      updatePendingAction(row).then(response => {
        this.$message.success('操作状态更新成功');
        this.getActionList();
      });
    },

    /** 完成时间改变时触发 */
    handleProcessTimeChange(row) {
      updatePendingAction(row).then(response => {
        this.$message.success('更新成功');
      });
    },

    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.actionId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 新增操作 */
    handleAddAction() {
      this.resetActionForm();
      this.actionOpen = true;
      this.actionTitle = '添加操作记录';
    },

    /** 修改操作 */
    handleUpdateAction(row) {
      this.resetActionForm();
      const actionId = row.actionId || this.ids;
      getPendingAction(actionId).then(response => {
        this.actionForm = response.data;
        this.actionOpen = true;
        this.actionTitle = '修改操作记录';
      });
    },

    /** 删除操作 */
    handleDeleteAction(row) {
      const actionIds = row.actionId || this.ids;
      this.$confirm('是否确认删除该操作记录?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delPendingAction(actionIds);
      }).then(() => {
        this.getActionList();
        this.$message.success('删除成功');
      }).catch(() => { });
    },

    /** 还原操作 */
    handleRestoreAction(row) {
      const actionId = row.actionId;
      this.$modal.confirm('是否确认还原该操作记录?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        restorePendingAction(actionId).then(response => {
          this.$message.success('还原成功');
          this.getActionList();
        });
      });
    },

    /** 刷新操作记录 */
    handleRefreshAction() {
      this.getActionList();
      this.$message.success('刷新成功');
    },

    /** 显示钢卷选择器 */
    showCoilSelector() {
      this.coilSelectorVisible = true;
    },

    /** 钢卷选择回调 */
    handleCoilSelect(coil) {
      this.actionForm.coilId = coil.coilId;
      this.actionForm.currentCoilNo = coil.currentCoilNo;
    },

    /** 提交操作表单 */
    submitActionForm() {
      this.$refs['actionForm'].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.actionForm.actionId != null) {
            updatePendingAction(this.actionForm).then(response => {
              this.$message.success('修改成功');
              this.actionOpen = false;
              this.getActionList();
              this.buttonLoading = false;
            });
          } else {
            addPendingAction(this.actionForm).then(response => {
              this.$message.success('新增成功');
              this.actionOpen = false;
              this.getActionList();
              this.buttonLoading = false;
            });
          }
        }
      });
    },

    /** 取消操作表单 */
    cancelAction() {
      this.actionOpen = false;
      this.resetActionForm();
    },

    /** 重置操作表单 */
    resetActionForm() {
      this.actionForm = {
        actionId: null,
        coilId: null,
        currentCoilNo: null,
        actionType: null,
        actionStatus: null,
        priority: 0,
        sourceType: 'manual',
        remark: null
      };
      if (this.$refs['actionForm']) {
        this.$refs['actionForm'].resetFields();
      }
    },

    /** 获取边框样式 */
    getBorderStyle(row) {
      // 已发货
      if (row.status == 1) {
        return { border: '1.5px solid #007bff' }
      }
      // 历史钢卷
      if (row.dataType == 0 || row.dataType == 2) {
        return { border: '1.5px solid #6c757d' }
      }
      // 当前钢卷
      if (row.dataType == 1) {
        return { border: '1.5px solid #28a745' }
      }
      // 还未入库的钢卷
      if (row.dataType == 10) {
        return { border: '1.5px solid #ffc107' }
      }
      return { border: '1.5px solid #e4e7ed' }
    },

    /** 获取钢卷类型标签 */
    getTypeLabel(row) {
      if (row.status == 1) {
        return '已发货'
      }
      if (row.dataType == 0 || row.dataType == 2) {
        return '历史钢卷'
      }
      if (row.dataType == 1) {
        return '当前钢卷'
      }
      if (row.dataType == 10) {
        return '未入库'
      }
      return '未知'
    },

    getRowStyle(row) {
      // 已发货
      if (row.status == 1) {
        return { backgroundColor: '#e6f7ff' }
      }
      // 历史钢卷
      if (row.dataType == 0 || row.dataType == 2) {
        return { backgroundColor: '#f4f4f5' }
      }
      // 当前钢卷
      if (row.dataType == 1) {
        return { backgroundColor: '#f0fdf4' }
      }
      // 还未入库的钢卷
      if (row.dataType == 10) {
        return { backgroundColor: '#fffbe6' }
      }
      return {}
    },
  }
}
</script>

<style scoped lang="scss">
.acid-do-container {
  background-color: #f5f7fa;
  padding: 20px;
  min-height: calc(100vh - 84px);
}

// 搜索区域样式
.search-section {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .page-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }

  .search-form {
    display: flex;
    align-items: center;
    gap: 12px;

    .search-tip {
      font-size: 12px;
      color: #909399;
      margin-left: 12px;
    }
  }
}

// 2×2 布局
.two-by-two-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.coil-column {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 420px;
  overflow: hidden;
}

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

  &--now {
    border-bottom-color: #67c23a;
    .column-title { color: #67c23a; }
  }
  &--trans {
    border-bottom-color: #409eff;
    .column-title { color: #409eff; }
  }
  &--history {
    border-bottom-color: #909399;
    .column-title { color: #909399; }
  }
  &--unIn {
    border-bottom-color: #e6a23c;
    .column-title { color: #e6a23c; }
  }
}

.column-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.column-count {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 2px 8px;
  border-radius: 10px;
}

.column-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.column-empty {
  text-align: center;
  padding: 40px 12px;
  color: #c0c4cc;
  font-size: 13px;
}

// 未搜索状态
.empty-search-state {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 80px 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: #c0c4cc;
  }

  p {
    margin: 0;
    font-size: 16px;
    color: #909399;
  }
}

.section-card {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-desc {
  font-size: 12px;
  color: #909399;
}

.action-section {
  .section-header {
    border-bottom-color: #67c23a;
  }

  .section-title {
    color: #67c23a;
  }
}

.query-form {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.mb10 {
  margin-bottom: 10px;
}

// 钢卷信息容器
.coil-info-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 12px;
}

// 操作记录容器
.action-list-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }

  ::v-deep .el-table {
    flex: 1;
    min-height: 200px;
  }

  ::v-deep .el-table__body-wrapper {
    overflow-y: auto;
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;

  i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: #c0c4cc;
  }

  p {
    margin: 0;
    font-size: 14px;
  }
}

.param-icon {
  font-size: 13px;
  color: #909399;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #409eff;
  }
}

.material-type {
  font-size: 11px;
  color: #606266;
  font-weight: 500;
}

.coil-no-tag {
  font-weight: 600;
  font-size: 11px;
  padding: 2px 6px;
}

.info-list {
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.4;

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

    .info-label {
      color: #909399;
      white-space: nowrap;
      margin-right: 4px;
      min-width: 40px;
      font-size: 11px;
    }

    .info-value {
      color: #303133;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
    }
  }
}

// 分页样式
::v-deep .pagination-container {
  margin-top: 16px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

// 参数弹出框样式
::v-deep .material-params-popover {
  .material-params-content {
    .params-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e4e7ed;
    }

    .params-list {
      .param-item {
        .param-row {
          display: flex;
          margin-bottom: 6px;
          font-size: 12px;
          line-height: 1.5;

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

          .param-label {
            color: #909399;
            min-width: 70px;
            margin-right: 8px;
          }

          .param-value {
            color: #303133;
            flex: 1;
            word-break: break-all;
          }
        }
      }

      .param-divider {
        height: 1px;
        background-color: #e4e7ed;
        margin: 10px 0;
      }
    }
  }
}

/* 操作类型卡片样式 */
.action-type-cards {
  width: 100%;

  .card-section {
    margin-bottom: 24px;

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

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

  // 分条操作区域的特殊样式
  .card-section:first-child .section-title {
    border-left-color: #e6a23c;
  }

  .action-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }

  .action-card {
    min-width: 0;
    padding: 16px;
    border: 2px solid #dcdfe6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;

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

    &.active {
      border-color: #409eff;
      background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.3);

      .card-icon {
        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
        color: #fff;
      }

      .card-title {
        color: #409eff;
        font-weight: 600;
      }
    }

    &.split-card {
      &.active {
        background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%);
        border-color: #e6a23c;

        .card-icon {
          background: linear-gradient(135deg, #e6a23c 0%, #f0ad4e 100%);
        }

        .card-title {
          color: #e6a23c;
        }
      }

      &:hover {
        border-color: #e6a23c;
        box-shadow: 0 2px 12px 0 rgba(230, 162, 60, 0.15);
      }
    }
  }

  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #909399;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .card-content {
    flex: 1;
  }

  .card-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
    transition: all 0.3s ease;
  }

  .card-desc {
    font-size: 13px;
    color: #909399;
    line-height: 1.4;
  }
}

// 操作记录对话框内容
.action-dialog-content {
  max-height: 600px;
  overflow-y: auto;
}

.el-table .el-button + .el-button {
  margin-left: 0px;
}
</style>