<template>
  <!-- 盘点查询页面 - rqrq -->
  <div class="mod-config yzz">
    <!-- 盘点模式开关区域 - rqrq -->
    <div class="count-mode-panel" :class="{'count-mode-on': countModeStatus === 'Y', 'count-mode-off': countModeStatus === 'N'}">
      <div class="count-mode-content">
        <span class="count-mode-icon">
          <i :class="countModeStatus === 'Y' ? 'el-icon-success' : 'el-icon-warning'"></i>
        </span>
        <span class="count-mode-label">盘点模式：</span>
        <span class="count-mode-value">{{ countModeStatus === 'Y' ? '已开启' : '已关闭' }}</span>
        <el-switch
          v-model="countModeSwitch"
          active-color="#67C23A"
          inactive-color="#F56C6C"
          :loading="countModeLoading"
          @change="handleCountModeChange"
          style="margin-left: 15px;">
        </el-switch>
        <span class="count-mode-tip" v-if="countModeStatus === 'Y'">（盘点模式下其他业务操作将受限）</span>
        <span class="count-mode-tip" v-else>（关闭盘点模式后可进行其他业务操作）</span>
      </div>
    </div>
    <!-- 查询区域 -->
    <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;">
      <el-form :inline="true" label-position="top" style="margin-top: 0px">
        <el-form-item label="盘点单号" style="margin-right: 10px;">
          <el-input v-model="queryForm.searchCountNo" placeholder="请输入盘点单号" clearable style="width: 150px;" @keyup.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="盘点类型" style="margin-right: 10px;">
          <el-select v-model="queryForm.searchCountType" placeholder="请选择" clearable style="width: 120px;">
            <el-option label="循环盘点" value="CYCLE"></el-option>
            <el-option label="手工盘点" value="MANUAL"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" style="margin-right: 10px;">
          <el-select v-model="queryForm.searchStatus" placeholder="请选择" clearable style="width: 120px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="草稿" value="DRAFT"></el-option>
            <el-option label="已下达" value="RELEASED"></el-option>
            <el-option label="盘点中" value="CHECKING"></el-option>
            <el-option label="已审批" value="APPROVED"></el-option>
            <el-option label="已完成" value="COMPLETED"></el-option>
            <el-option label="已取消" value="CANCELLED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" style="margin-right: 10px;">
          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd" style="width: 130px;"></el-date-picker>
          <span style="margin: 0 5px;">至</span>
          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 130px;"></el-date-picker>
        </el-form-item>
        <el-form-item label=" " style="margin-right: 10px;">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
          <el-button type="success" @click="showCycleCountDialog">循环盘点</el-button>
          <el-button type="warning" @click="handleCreateManualCount">手工盘点</el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <!-- 主表格 - rqrq -->
    <el-table :data="dataList" @row-click="handleRowClick" :height="height" border highlight-current-row ref="mainTable" v-loading="dataListLoading" style="width: 100%;">
      <el-table-column
        v-for="(item,index) in mainColumnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="item.columnProp === 'statusDesc'" :style="{color: getStatusColor(scope.row.status)}">{{ scope.row.statusDesc }}</span>
          <span v-else-if="item.columnProp === 'countPercent'">{{ scope.row.countPercent ? scope.row.countPercent + '%' : '' }}</span>
          <span v-else-if="item.columnProp === 'countProgress'">{{ scope.row.checkedPalletCount }}/{{ scope.row.totalPalletCount }}</span>
          <span v-else-if="item.columnProp === 'applyDate'">{{ formatDateTime(scope.row.applyDate) }}</span>
          <span v-else-if="item.columnProp === 'releaseDate'">{{ formatDateTime(scope.row.releaseDate) }}</span>
          <span v-else>{{ scope.row[item.columnProp] }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" fixed="right" width="240" label="操作">
        <template slot-scope="scope">
          <a type="text" style="margin-right: 10px;" @click.stop="handleAddMaterial(scope.row)" v-if="scope.row.status === 'DRAFT' && scope.row.countType === 'MANUAL'">添加物料</a>
          <a type="text" style="margin-right: 10px;" @click.stop="handleRelease(scope.row)" v-if="scope.row.status === 'DRAFT'">下达</a>
          <a type="text" style="margin-right: 10px;" @click.stop="handlePush(scope.row)" v-if="scope.row.status === 'RELEASED'">推送</a>
          <a type="text" style="margin-right: 10px;" @click.stop="handleComplete(scope.row)" v-if=" scope.row.status === 'CHECKING'">完成</a>
          <a type="text" style="margin-right: 10px;" @click.stop="handleCancel(scope.row)" v-if="scope.row.status !== 'COMPLETED' && scope.row.status !== 'CANCELLED'">取消</a>
          <a type="text" style="color: #F56C6C; margin-right: 10px;" @click.stop="handleDelete(scope.row)" v-if="scope.row.status === 'DRAFT'">删除</a>
          <a type="text" style="color: #67C23A; margin-right: 10px;" @click.stop="handleExportFrontend(scope.row)">导出明细</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 1000]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- Tab标签页 -->
    <el-tabs style="font-size: 12px;min-height: 200px" class="customer-tab" v-model="activeName" type="border-card" @tab-click="tabClick">
      <el-tab-pane label="标签明细" name="label">
        <!-- 标签明细表格 - rqrq -->
        <el-table :data="labelList" :height="height" border v-loading="labelListLoading" style="width: 100%;">
          <el-table-column
            v-for="(item,index) in labelColumnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="item.columnProp === 'countFlagDesc'" :style="{color: scope.row.countFlag === 'Y' ? '#67C23A' : '#F56C6C'}">{{ scope.row.countFlagDesc }}</span>
              <span v-else-if="item.columnProp === 'countDate'">{{ formatDateTime(scope.row.countDate) }}</span>
              <span v-else>{{ scope.row[item.columnProp] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="物料汇总" name="summary">
        <!-- 物料汇总表格 - rqrq -->
        <el-table :data="summaryList" :height="height" border v-loading="summaryListLoading" style="width: 100%;">
          <el-table-column
            v-for="(item,index) in summaryColumnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span>{{ scope.row[item.columnProp] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="栈板明细" name="pallet">
        <!-- 栈板明细表格 - rqrq -->
        <el-table :data="palletList" :height="height" border v-loading="palletListLoading" style="width: 100%;">
          <el-table-column
            v-for="(item,index) in palletColumnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="item.columnProp === 'countFlagDesc'" :style="{color: scope.row.countFlag === 'Y' ? '#67C23A' : '#F56C6C'}">{{ scope.row.countFlagDesc }}</span>
              <span v-else-if="item.columnProp === 'countDate'">{{ formatDateTime(scope.row.countDate) }}</span>
              <span v-else>{{ scope.row[item.columnProp] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="盘点结果" name="result">
        <!-- 盘点结果表格 - rqrq -->
        <el-table :data="resultList" :height="height" border v-loading="resultListLoading" style="width: 100%;">
          <el-table-column
            v-for="(item,index) in resultColumnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="item.columnProp === 'countResultDesc'" :style="{color: getResultColor(scope.row.countResult)}">{{ scope.row.countResultDesc }}</span>
              <span v-else-if="item.columnProp === 'diffQty'" :style="{color: scope.row.diffQty != 0 ? '#F56C6C' : '#67C23A'}">{{ scope.row.diffQty }}</span>
              <span v-else-if="item.columnProp === 'handleFlagDesc'" :style="{color: scope.row.handleFlag === 'Y' ? '#67C23A' : '#F56C6C'}">{{ scope.row.handleFlagDesc }}</span>
              <span v-else-if="item.columnProp === 'countDate'">{{ formatDateTime(scope.row.countDate) }}</span>
              <span v-else>{{ scope.row[item.columnProp] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 盘点结果差异页签 - rqrq -->
      <el-tab-pane label="盘点结果差异" name="resultDiff">
        <el-table :data="resultDiffList" :height="height" border v-loading="resultDiffListLoading" style="width: 100%;">
          <el-table-column
            v-for="(item,index) in resultColumnList2" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="item.columnProp === 'countResultDesc'" :style="{color: getResultColor(scope.row.countResult)}">{{ scope.row.countResultDesc }}</span>
              <span v-else-if="item.columnProp === 'diffQty'" :style="{color: scope.row.diffQty != 0 ? '#F56C6C' : '#67C23A'}">{{ scope.row.diffQty }}</span>
              <span v-else-if="item.columnProp === 'handleFlagDesc'" :style="{color: scope.row.handleFlag === 'Y' ? '#67C23A' : '#F56C6C'}">{{ scope.row.handleFlagDesc }}</span>
              <span v-else-if="item.columnProp === 'countDate'">{{ formatDateTime(scope.row.countDate) }}</span>
              <span v-else>{{ scope.row[item.columnProp] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 任务单页签 - rqrq -->
      <el-tab-pane label="任务单" name="task">
        <div style="display: flex; gap: 10px;">
          <!-- 左边：任务单主表 - rqrq -->
          <div style="flex: 1;">
            <div style="font-weight: bold; margin-bottom: 5px; font-size: 12px;">任务单</div>
            <el-table :data="taskList" :height="height" border v-loading="taskListLoading"
                      highlight-current-row @row-click="onTaskRowClick" style="width: 100%;">
              <el-table-column prop="taskNo" label="任务号" min-width="120" header-align="center" align="center"></el-table-column>
              <el-table-column prop="sourceType" label="来源类型" min-width="140" header-align="center" align="center"></el-table-column>
              <el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center">
                <template slot-scope="scope">
                  <span :style="{color: scope.row.status === '已完成' ? '#67C23A' : '#E6A23C'}">{{ scope.row.status }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createdBy" label="创建人" min-width="80" header-align="center" align="center"></el-table-column>
              <el-table-column prop="createdTime" label="创建时间" min-width="140" header-align="center" align="center">
                <template slot-scope="scope">
                  <span>{{ formatDateTime(scope.row.createdTime) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 右边：任务单明细 - rqrq -->
          <div style="flex: 1;">
            <div style="font-weight: bold; margin-bottom: 5px; font-size: 12px;">任务单明细</div>
            <el-table :data="taskDetailList" :height="height" border v-loading="taskDetailListLoading" style="width: 100%;">
              <el-table-column prop="seqNo" label="序号" min-width="60" header-align="center" align="center"></el-table-column>
              <el-table-column prop="palletId" label="栈板号" min-width="150" header-align="center" align="center"></el-table-column>
              <el-table-column prop="wmsStatus" label="WMS状态" min-width="100" header-align="center" align="center">
                <template slot-scope="scope">
                  <span :style="{color: scope.row.wmsStatus === '已盘点' ? '#67C23A' : '#909399'}">{{ scope.row.wmsStatus }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <!-- 盘盈盘亏记录页签 - rqrq -->
      <el-tab-pane label="盘盈盘亏记录" name="adjustment">
        <div style="display: flex; gap: 10px;">
          <!-- 左边：盘盈盘亏明细 - rqrq -->
          <div style="flex: 1;">
            <div style="font-weight: bold; margin-bottom: 5px; font-size: 12px;">盘盈盘亏明细</div>
            <el-table :data="adjustmentTransList" :height="height" border v-loading="adjustmentTransLoading"
                      highlight-current-row @row-click="onAdjustmentTransRowClick" style="width: 100%;">
              <el-table-column prop="transNo" label="单据号" min-width="120" header-align="center" align="center"></el-table-column>
              <el-table-column prop="transTypeDesc" label="事务类型" min-width="80" header-align="center" align="center">
                <template slot-scope="scope">
                  <span :style="{color: scope.row.transTypeDb === 'PY' ? '#67C23A' : '#F56C6C'}">{{ scope.row.transTypeDesc }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="itemNo" label="行号" min-width="60" header-align="center" align="center"></el-table-column>
              <el-table-column prop="partNo" label="物料号" min-width="120" header-align="center" align="center"></el-table-column>
              <el-table-column prop="transQty" label="数量" min-width="100" header-align="center" align="center"></el-table-column>
              <el-table-column prop="batchNo" label="批号" min-width="100" header-align="center" align="center"></el-table-column>
              <el-table-column prop="locationId" label="库位" min-width="100" header-align="center" align="center"></el-table-column>
              <el-table-column prop="directionDesc" label="方向" min-width="60" header-align="center" align="center">
                <template slot-scope="scope">
                  <span :style="{color: scope.row.direction === '+' ? '#67C23A' : '#F56C6C'}">{{ scope.row.directionDesc }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="warehouseId" label="仓库" min-width="80" header-align="center" align="center"></el-table-column>
              <el-table-column prop="userName" label="操作人" min-width="80" header-align="center" align="center"></el-table-column>
            </el-table>
          </div>
          <!-- 右边：标签明细 - rqrq -->
          <div style="flex: 1;">
            <div style="font-weight: bold; margin-bottom: 5px; font-size: 12px;">标签明细</div>
            <el-table :data="adjustmentTransSubList" :height="height" border v-loading="adjustmentTransSubLoading" style="width: 100%;">
              <el-table-column prop="subNo" label="标签号" min-width="150" header-align="center" align="center"></el-table-column>
              <el-table-column prop="subQty" label="数量" min-width="80" header-align="center" align="center"></el-table-column>
              <el-table-column prop="partNo" label="物料号" min-width="120" header-align="center" align="center"></el-table-column>
              <el-table-column prop="batchNo" label="批号" min-width="100" header-align="center" align="center"></el-table-column>
              <el-table-column prop="locationId" label="库位" min-width="100" header-align="center" align="center"></el-table-column>
              <el-table-column prop="palletId" label="栈板号" min-width="120" header-align="center" align="center"></el-table-column>
              <el-table-column prop="directionDesc" label="方向" min-width="60" header-align="center" align="center">
                <template slot-scope="scope">
                  <span :style="{color: scope.row.direction === '+' ? '#67C23A' : '#F56C6C'}">{{ scope.row.directionDesc }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 循环盘点弹窗 -->
    <el-dialog title="创建循环盘点单" :visible.sync="cycleCountDialogVisible" width="400px" :close-on-click-modal="false" v-drag>
      <el-form :model="cycleCountForm" label-width="100px">
        <el-form-item label="未盘比例(%)">
          <el-input v-model="nowPercent" disabled  style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="盘点比例(%)">
          <el-input v-model="cycleCountForm.countPercent"   style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="cycleCountForm.remark" type="textarea" :rows="3" style="width: 250px;"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;margin-top: 60px;text-align:center">
        <el-button type="primary" @click="createCycleCount" :loading="createLoading" :disabled="createLoading">{{ createLoading ? '创建中...' : '创 建' }}</el-button>
        <el-button @click="cycleCountDialogVisible = false" :disabled="createLoading">取 消</el-button>
      </el-footer>
    </el-dialog>

    <!-- 添加物料弹窗（显示已有标签列表）-->
    <el-dialog :title="'添加物料 - ' + (addMaterialRow ? addMaterialRow.countNo : '')" :visible.sync="addMaterialDialogVisible" width="1000px" :close-on-click-modal="false" v-drag>
      <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 15px;">
        <el-button type="primary" size="small" @click="showMaterialQueryDialog">选择物料</el-button>
        <!-- 一键物料操作 - rqrq -->
        <div style="display: flex; align-items: center; gap: 5px;">
          <span style="font-size: 12px; color: #606266;">一键物料操作:</span>
          <el-input
            v-model="quickMaterialPartNo"
            placeholder="输入物料号回车"
            clearable
            ref="part"
            size="small"
            style="width: 150px;"
            @keyup.enter.native="handleQuickMaterialAction"
            :disabled="quickMaterialLoading">
          </el-input>
          <el-select v-model="quickMaterialAction" size="small" style="width: 80px;">
            <el-option label="添加" value="add"></el-option>
            <el-option label="删除" value="delete"></el-option>
          </el-select>
          <el-button
            :type="quickMaterialAction === 'add' ? 'success' : 'danger'"
            size="small"
            @click="handleQuickMaterialAction"
            :loading="quickMaterialLoading"
            :disabled="quickMaterialLoading || !quickMaterialPartNo">
            {{ quickMaterialLoading ? '处理中...' : (quickMaterialAction === 'add' ? '添加' : '删除') }}
          </el-button>
        </div>
      </div>
      <!-- 当前标签列表表格 - rqrq -->
      <el-table :data="currentLabelList" :height="350" border v-loading="currentLabelListLoading" style="width: 100%;">
        <el-table-column
          v-for="(item,index) in currentLabelColumnList" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed==''?false:item.fixed"
          :min-width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
            <span>{{ scope.row[item.columnProp] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMaterialDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 物料查询弹窗（添加物料时使用）-->
    <el-dialog title="查询物料" :visible.sync="materialQueryDialogVisible" width="900px" :close-on-click-modal="false" v-drag append-to-body>
      <el-form :inline="true" :model="materialQueryForm" label-position="top">
        <el-form-item label="物料编码" style="margin-right: 10px;">
          <el-input v-model="materialQueryForm.searchPartNo" placeholder="请输入物料编码" clearable style="width: 150px;" @keyup.enter.native="queryMaterialForAdd"></el-input>
        </el-form-item>
        <el-form-item label="批号" style="margin-right: 10px;">
          <el-input v-model="materialQueryForm.searchBatchNo" placeholder="请输入批号" clearable style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="WDR号" style="margin-right: 10px;">
          <el-input v-model="materialQueryForm.searchWdr" placeholder="请输入WDR号" clearable style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="queryMaterialForAdd" :loading="materialQueryLoading">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 物料查询表格 - rqrq -->
      <el-table :data="materialQueryList" :height="300" border highlight-current-row ref="materialQueryTable" v-loading="materialQueryLoading" @selection-change="handleMaterialSelectionChange" style="width: 100%;">
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column
          v-for="(item,index) in materialQueryColumnList" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed==''?false:item.fixed"
          :min-width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
            <span>{{ scope.row[item.columnProp] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="materialQueryDialogVisible = false" :disabled="addMaterialLoading">取 消</el-button>
        <el-button type="primary" @click="confirmAddMaterial" :loading="addMaterialLoading" :disabled="addMaterialLoading || selectedMaterials.length === 0">{{ addMaterialLoading ? '添加中...' : '确认添加' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { searchCountHeaderList, createCycleCount, createManualCount, queryMaterialForManualCount, addMaterialToCount, quickAddMaterialByPartNo, deleteMaterialByPartNo,
  releaseCount, pushCountToWcs, completeCount, cancelCount, deleteCount, searchCountLabelList,
  searchCountPalletList, searchCountResultList, searchMaterialSummary, searchOrderTaskByCountNo,
  searchOrderTaskDetail, getSysIfCount, updateSysIfCount, queryAdjustmentTransList,
  queryAdjustmentTransSubList, selectNowUnCountPercent, exportCountDataExcel } from '@/api/check/physicalInventory'
import * as XLSX from 'xlsx' // 前端Excel导出 - rqrq

export default {
  name: 'searchPhysicalInventory',
  data() {
    return {
      // 盘点模式相关 - rqrq
      countModeStatus: 'N',       // 当前盘点模式状态 Y=开启 N=关闭
      countModeSwitch: false,     // 开关状态
      countModeLoading: false,    // 开关loading状态

      // 主表相关 - rqrq
      dataList: [],
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      height: 300,
      currentRow: null,

      // 查询表单 - rqrq
      queryForm: {
        searchCountNo: '',
        searchCountType: '',
        searchStatus: '',
        startDate: '',
        endDate: ''
      },

      // 主表格列配置 - rqrq
      mainColumnList: [
        { columnProp: "countNo", headerAlign: "center", align: "center", columnLabel: "盘点单号", columnWidth: 160, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countTypeDesc", headerAlign: "center", align: "center", columnLabel: "盘点类型", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "statusDesc", headerAlign: "center", align: "center", columnLabel: "状态", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countPercent", headerAlign: "center", align: "center", columnLabel: "循环比例", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countProgress", headerAlign: "center", align: "center", columnLabel: "盘点进度(栈板)", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "totalLabelCount", headerAlign: "center", align: "center", columnLabel: "标签数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "applyUser", headerAlign: "center", align: "center", columnLabel: "申请人", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "applyDate", headerAlign: "center", align: "center", columnLabel: "申请日期", columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "releaseUser", headerAlign: "center", align: "center", columnLabel: "下达人", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "releaseDate", headerAlign: "center", align: "center", columnLabel: "下达日期", columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "remark", headerAlign: "center", align: "left", columnLabel: "备注", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],

      // Tab相关 - rqrq
      activeName: 'label',
      labelList: [],
      labelListLoading: false,
      palletList: [],
      palletListLoading: false,
      resultList: [],
      resultListLoading: false,
      resultDiffList: [],           // 盘点结果差异列表（非OK的结果）- rqrq
      resultDiffListLoading: false,
      summaryList: [],
      summaryListLoading: false,

      // 标签明细列配置 - rqrq
      labelColumnList: [
        { columnProp: "unitId", headerAlign: "center", align: "center", columnLabel: "标签号", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partDesc", headerAlign: "center", align: "left", columnLabel: "物料描述", columnWidth: 180, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "qty", headerAlign: "center", align: "center", columnLabel: "数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批号", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletId", headerAlign: "center", align: "center", columnLabel: "栈板号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "locationZ", headerAlign: "center", align: "center", columnLabel: "所在层数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "labelTypeDesc", headerAlign: "center", align: "center", columnLabel: "标签类型", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countFlagDesc", headerAlign: "center", align: "center", columnLabel: "盘点状态", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countUser", headerAlign: "center", align: "center", columnLabel: "盘点人", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countDate", headerAlign: "center", align: "center", columnLabel: "盘点时间", columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "warehouseName", headerAlign: "center", align: "center", columnLabel: "仓库", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "locationName", headerAlign: "center", align: "center", columnLabel: "库位", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],

      // 栈板明细列配置 - rqrq
      palletColumnList: [
        { columnProp: "seqNo", headerAlign: "center", align: "center", columnLabel: "序号", columnWidth: 60, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletId", headerAlign: "center", align: "center", columnLabel: "栈板号", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "labelCount", headerAlign: "center", align: "center", columnLabel: "标签数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "checkedCount", headerAlign: "center", align: "center", columnLabel: "已盘点", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "progressPercent", headerAlign: "center", align: "center", columnLabel: "进度", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countFlagDesc", headerAlign: "center", align: "center", columnLabel: "盘点状态", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "stationArea", headerAlign: "center", align: "center", columnLabel: "站点区域", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "stationId", headerAlign: "center", align: "center", columnLabel: "站点ID", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "locationZ", headerAlign: "center", align: "center", columnLabel: "所在层数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countUser", headerAlign: "center", align: "center", columnLabel: "盘点人", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countDate", headerAlign: "center", align: "center", columnLabel: "盘点时间", columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],

      // 盘点结果列配置 - rqrq
      resultColumnList: [
        { columnProp: "unitId", headerAlign: "center", align: "center", columnLabel: "标签号", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partDesc", headerAlign: "center", align: "left", columnLabel: "物料描述", columnWidth: 180, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "qty", headerAlign: "center", align: "center", columnLabel: "数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "diffQty", headerAlign: "center", align: "center", columnLabel: "差异数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批号", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletId", headerAlign: "center", align: "center", columnLabel: "栈板号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countResultDesc", headerAlign: "center", align: "center", columnLabel: "盘点结果", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        // { columnProp: "handleFlagDesc", headerAlign: "center", align: "center", columnLabel: "是否处理", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "handleTypeDesc", headerAlign: "center", align: "center", columnLabel: "处理方式", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countUser", headerAlign: "center", align: "center", columnLabel: "盘点人", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countDate", headerAlign: "center", align: "center", columnLabel: "盘点时间", columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "remark", headerAlign: "center", align: "left", columnLabel: "备注", columnWidth: 300, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],
      // 盘点结果差异配置 - rqrq
      resultColumnList2: [
        { columnProp: "unitId", headerAlign: "center", align: "center", columnLabel: "标签号", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partDesc", headerAlign: "center", align: "left", columnLabel: "物料描述", columnWidth: 180, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "qty", headerAlign: "center", align: "center", columnLabel: "数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "diffQty", headerAlign: "center", align: "center", columnLabel: "差异数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批号", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletId", headerAlign: "center", align: "center", columnLabel: "栈板号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countResultDesc", headerAlign: "center", align: "center", columnLabel: "盘点结果", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "handleFlagDesc", headerAlign: "center", align: "center", columnLabel: "是否处理", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "handleTypeDesc", headerAlign: "center", align: "center", columnLabel: "处理方式", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countUser", headerAlign: "center", align: "center", columnLabel: "盘点人", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "countDate", headerAlign: "center", align: "center", columnLabel: "盘点时间", columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "remark", headerAlign: "center", align: "left", columnLabel: "备注", columnWidth: 300, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],
      // 物料汇总列配置 - rqrq
      summaryColumnList: [
        { columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partDesc", headerAlign: "center", align: "left", columnLabel: "物料描述", columnWidth: 180, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批号", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "wdr", headerAlign: "center", align: "center", columnLabel: "WDR号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "warehouseName", headerAlign: "center", align: "center", columnLabel: "仓库", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "locationName", headerAlign: "center", align: "center", columnLabel: "库位", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "labelCount", headerAlign: "center", align: "center", columnLabel: "标签数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "totalQty", headerAlign: "center", align: "center", columnLabel: "总数量", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletCount", headerAlign: "center", align: "center", columnLabel: "栈板数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "checkedLabelCount", headerAlign: "center", align: "center", columnLabel: "已盘点", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "progressPercent", headerAlign: "center", align: "center", columnLabel: "进度", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],

      // 循环盘点弹窗 - rqrq
      cycleCountDialogVisible: false,
      cycleCountForm: {
        countPercent: 10,
        remark: ''
      },
      nowPercent:null,//当前未盘比例
      createLoading: false,

      // 添加物料弹窗 - rqrq
      addMaterialDialogVisible: false,
      addMaterialRow: null,
      currentLabelList: [],
      currentLabelListLoading: false,

      // 一键物料操作 - rqrq
      quickMaterialPartNo: '',
      quickMaterialAction: 'add',  // add-添加 delete-删除
      quickMaterialLoading: false,

      // 当前标签列表列配置 - rqrq
      currentLabelColumnList: [
        { columnProp: "unitId", headerAlign: "center", align: "center", columnLabel: "标签号", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partDesc", headerAlign: "center", align: "left", columnLabel: "物料描述", columnWidth: 180, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "qty", headerAlign: "center", align: "center", columnLabel: "数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批号", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletId", headerAlign: "center", align: "center", columnLabel: "栈板号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "labelTypeDesc", headerAlign: "center", align: "center", columnLabel: "标签类型", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "warehouseName", headerAlign: "center", align: "center", columnLabel: "仓库", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "locationName", headerAlign: "center", align: "center", columnLabel: "库位", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],

      // 物料查询弹窗 - rqrq
      materialQueryDialogVisible: false,
      materialQueryForm: {
        searchPartNo: '',
        searchBatchNo: '',
        searchWdr: ''
      },
      materialQueryList: [],
      materialQueryLoading: false,
      selectedMaterials: [],
      addMaterialLoading: false,

      // 物料查询列配置 - rqrq
      materialQueryColumnList: [
        { columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "partDesc", headerAlign: "center", align: "left", columnLabel: "物料描述", columnWidth: 180, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批号", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "wdr", headerAlign: "center", align: "center", columnLabel: "WDR号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "warehouseName", headerAlign: "center", align: "center", columnLabel: "仓库", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "locationName", headerAlign: "center", align: "center", columnLabel: "库位", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "labelCount", headerAlign: "center", align: "center", columnLabel: "标签数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "totalQty", headerAlign: "center", align: "center", columnLabel: "总数量", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: "" },
        { columnProp: "palletCount", headerAlign: "center", align: "center", columnLabel: "栈板数", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: "" }
      ],

      // 任务单相关 - rqrq
      taskList: [],
      taskListLoading: false,
      taskDetailList: [],
      taskDetailListLoading: false,
      currentTask: null,

      // 盘盈盘亏记录相关 - rqrq
      adjustmentTransList: [],           // 盘盈盘亏明细列表
      adjustmentTransLoading: false,
      adjustmentTransSubList: [],        // 标签明细列表
      adjustmentTransSubLoading: false,
      currentAdjustmentTrans: null,      // 当前选中的事务

      // 导出相关 - rqrq
      exportLoading: false
    }
  },
  mounted() {
    // 计算表格高度 - rqrq
    this.height = (window.innerHeight - 315) / 2
    // 加载盘点模式状态 - rqrq
    this.loadCountModeStatus()
    this.search()
  },
  methods: {
    // ==================== 盘点模式管理 ==================== - rqrq

    // 加载盘点模式状态 - rqrq
    loadCountModeStatus() {
      const params = {
        site: this.$store.state.user.site
      }
      getSysIfCount(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.countModeStatus = data.value || 'N'
          this.countModeSwitch = this.countModeStatus === 'Y'
        }
      })
    },

    // 盘点模式开关变更 - rqrq
    handleCountModeChange(val) {
      const newValue = val ? 'Y' : 'N'
      const actionText = val ? '开启' : '关闭'

      this.$confirm(`确认${actionText}盘点模式？${val ? '开启后其他业务操作将受限。' : ''}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.countModeLoading = true
        const params = {
          site: this.$store.state.user.site,
          value: newValue
        }
        updateSysIfCount(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.countModeStatus = newValue
            this.countModeSwitch = val
            this.$message.success(`盘点模式已${actionText}`)
          } else {
            // 恢复开关状态
            this.countModeSwitch = !val
            this.$alert(data.msg || `${actionText}盘点模式失败`, '错误', { confirmButtonText: '确定' })
          }
        }).catch(() => {
          // 恢复开关状态
          this.countModeSwitch = !val
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        }).finally(() => {
          this.countModeLoading = false
        })
      }).catch(() => {
        // 用户取消，恢复开关状态
        this.countModeSwitch = !val
      })
    },

    // ==================== 查询相关 ==================== - rqrq

    // 查询 - rqrq
    search() {
      this.pageIndex = 1
      this.getDataList()
    },

    // 重置查询 - rqrq
    resetQuery() {
      this.queryForm = {
        searchCountNo: '',
        searchCountType: '',
        searchStatus: '',
        startDate: '',
        endDate: ''
      }
      this.search()
    },

    // 获取主表数据 - rqrq
    getDataList() {
      this.dataListLoading = true
      const params = {
        ...this.queryForm,
        site: this.$store.state.user.site,
        page: this.pageIndex,
        limit: this.pageSize
      }
      searchCountHeaderList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
          // 自动选择第一条记录并加载明细 - rqrq
          if (this.dataList && this.dataList.length > 0) {
            this.$nextTick(() => {
              this.$refs.mainTable.setCurrentRow(this.dataList[0])
              this.currentRow = this.dataList[0]
              this.loadTabData()
            })
          } else {
            this.currentRow = null
            this.labelList = []
            this.palletList = []
            this.resultList = []
            this.resultDiffList = []
            this.summaryList = []
          }
        } else {
          this.$alert(data.msg || '查询失败', '错误', { confirmButtonText: '确定' })
        }
      }).catch(() => {
        this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
      }).finally(() => {
        this.dataListLoading = false
      })
    },

    // 行点击 - rqrq
    handleRowClick(row) {
      this.currentRow = row
      this.loadTabData()
    },

    // Tab点击 - rqrq
    tabClick() {
      this.loadTabData()
    },

    // 加载Tab数据 - rqrq
    loadTabData() {
      if (!this.currentRow) return
      const params = {
        site: this.$store.state.user.site,
        countNo: this.currentRow.countNo
      }

      if (this.activeName === 'label') {
        this.loadLabelList(params)
      } else if (this.activeName === 'pallet') {
        this.loadPalletList(params)
      } else if (this.activeName === 'result') {
        this.loadResultList(params)
      } else if (this.activeName === 'resultDiff') {
        this.loadResultDiffList(params)
      } else if (this.activeName === 'summary') {
        this.loadSummaryList(params)
      } else if (this.activeName === 'task') {
        this.loadTaskList(params)
      } else if (this.activeName === 'adjustment') {
        this.loadAdjustmentTransList(params)
      }
    },

    // 加载标签明细 - rqrq
    loadLabelList(params) {
      this.labelListLoading = true
      searchCountLabelList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.labelList = data.rows
        }
      }).finally(() => {
        this.labelListLoading = false
      })
    },

    // 加载栈板明细 - rqrq
    loadPalletList(params) {
      this.palletListLoading = true
      searchCountPalletList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.palletList = data.rows
        }
      }).finally(() => {
        this.palletListLoading = false
      })
    },

    // 加载盘点结果 - rqrq
    loadResultList(params) {
      this.resultListLoading = true
      searchCountResultList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.resultList = data.rows
        }
      }).finally(() => {
        this.resultListLoading = false
      })
    },

    // 加载盘点结果差异（只显示非OK的结果）- rqrq
    loadResultDiffList(params) {
      this.resultDiffListLoading = true
      searchCountResultList(params).then(({ data }) => {
        if (data && data.code === 0) {
          // 过滤出非OK的结果 - rqrq
          this.resultDiffList = (data.rows || []).filter(item => item.countResult !== 'OK')
        }
      }).finally(() => {
        this.resultDiffListLoading = false
      })
    },

    // 加载物料汇总 - rqrq
    loadSummaryList(params) {
      this.summaryListLoading = true
      searchMaterialSummary(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.summaryList = data.rows
        }
      }).finally(() => {
        this.summaryListLoading = false
      })
    },

    // 加载任务单列表 - rqrq
    loadTaskList(params) {
      this.taskListLoading = true
      this.taskList = []
      this.taskDetailList = []
      this.currentTask = null
      searchOrderTaskByCountNo(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.taskList = data.rows || []
          // 默认选中第一行
          if (this.taskList.length > 0) {
            this.currentTask = this.taskList[0]
            this.loadTaskDetailList()
          }
        }
      }).finally(() => {
        this.taskListLoading = false
      })
    },

    // 任务单行点击 - rqrq
    onTaskRowClick(row) {
      this.currentTask = row
      this.loadTaskDetailList()
    },

    // 加载任务单明细 - rqrq
    loadTaskDetailList() {
      if (!this.currentTask) {
        this.taskDetailList = []
        return
      }
      this.taskDetailListLoading = true
      const params = {
        site: this.$store.state.user.site,
        taskNo: this.currentTask.taskNo
      }
      searchOrderTaskDetail(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.taskDetailList = data.rows || []
        }
      }).finally(() => {
        this.taskDetailListLoading = false
      })
    },

    // 加载盘盈盘亏事务记录 - rqrq
    loadAdjustmentTransList(params) {
      this.adjustmentTransLoading = true
      this.adjustmentTransList = []
      this.adjustmentTransSubList = []
      this.currentAdjustmentTrans = null
      queryAdjustmentTransList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.adjustmentTransList = data.rows || []
          // 默认选中第一行
          if (this.adjustmentTransList.length > 0) {
            this.currentAdjustmentTrans = this.adjustmentTransList[0]
            this.loadAdjustmentTransSubList()
          }
        }
      }).finally(() => {
        this.adjustmentTransLoading = false
      })
    },

    // 盘盈盘亏事务行点击 - rqrq
    onAdjustmentTransRowClick(row) {
      this.currentAdjustmentTrans = row
      this.loadAdjustmentTransSubList()
    },

    // 加载盘盈盘亏标签明细 - rqrq
    loadAdjustmentTransSubList() {
      if (!this.currentAdjustmentTrans) {
        this.adjustmentTransSubList = []
        return
      }
      this.adjustmentTransSubLoading = true
      const params = {
        site: this.$store.state.user.site,
        transNo: this.currentAdjustmentTrans.transNo
      }
      queryAdjustmentTransSubList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.adjustmentTransSubList = data.rows || []
        }
      }).finally(() => {
        this.adjustmentTransSubLoading = false
      })
    },

    // 分页 - rqrq
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 显示循环盘点弹窗 - rqrq
    showCycleCountDialog() {
      this.cycleCountForm = {
        countPercent: 10,
        remark: ''
      }
      const params = {
        site: this.$store.state.user.site,
      }
      selectNowUnCountPercent(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.nowPercent=data.result
        }
      })
      this.$nextTick(() => {
        this.cycleCountDialogVisible = true
      } )
    },

    // 创建循环盘点 - rqrq
    createCycleCount() {
      if (!this.cycleCountForm.countPercent || this.cycleCountForm.countPercent < 1 || this.cycleCountForm.countPercent > 50) {
        this.$message.warning('盘点比例必须在1-50之间')
        return
      }
      this.createLoading = true
      const params = {
        site: this.$store.state.user.site,
        countPercent: this.cycleCountForm.countPercent,
        remark: this.cycleCountForm.remark,
        username: this.$store.state.user.name
      }
      createCycleCount(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message.success('创建成功，盘点单号：' + data.row.countNo)
          this.cycleCountDialogVisible = false
          this.search()
        } else {
          this.$alert(data.msg || '创建失败', '提示', { type: 'error' })
        }
      }).catch(() => {
        this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
      }).finally(() => {
        this.createLoading = false
      })
    },

    // 创建手工盘点单 - rqrq
    handleCreateManualCount() {
      this.$confirm('是否创建手工盘点单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.createLoading = true
        const params = {
          site: this.$store.state.user.site,
          username: this.$store.state.user.name
        }
        createManualCount(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('创建成功，盘点单号：' + data.row.countNo)
            this.search()
            // 自动打开添加物料弹窗 - rqrq
            this.$nextTick(() => {
              this.handleAddMaterial(data.row)
            })
          } else {
            this.$alert(data.msg || '创建失败', '提示', { type: 'error' })
          }
        }).catch(() => {
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        }).finally(() => {
          this.createLoading = false
        })
      }).catch(() => {})
    },

    // 打开添加物料弹窗 - rqrq
    handleAddMaterial(row) {
      this.addMaterialRow = row
      this.addMaterialDialogVisible = true
      this.loadCurrentLabelList()
    },

    // 加载当前盘点单的标签列表 - rqrq
    loadCurrentLabelList() {
      if (!this.addMaterialRow) return
      this.currentLabelListLoading = true
      const params = {
        site: this.$store.state.user.site,
        countNo: this.addMaterialRow.countNo
      }
      searchCountLabelList(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.currentLabelList = data.rows
        }
      }).finally(() => {
        this.currentLabelListLoading = false
      })
    },

    // 显示物料查询弹窗 - rqrq
    showMaterialQueryDialog() {
      this.materialQueryForm = {
        searchPartNo: '',
        searchBatchNo: '',
        searchWdr: ''
      }
      this.materialQueryList = []
      this.selectedMaterials = []
      this.materialQueryDialogVisible = true
    },

    // 一键物料操作处理 - rqrq
    handleQuickMaterialAction() {
      if (!this.quickMaterialPartNo) {
        this.$message.warning('请输入物料号')
        return
      }
      if (!this.addMaterialRow) return

      const partNo = this.quickMaterialPartNo.trim()

      if (this.quickMaterialAction === 'add') {
        // 一键添加物料 - rqrq
        // this.$confirm(`确认添加物料 ${partNo} 的所有标签到盘点单？`, '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'info'
        // }).then(() => {
          this.quickMaterialLoading = true
          const params = {
            site: this.$store.state.user.site,
            countNo: this.addMaterialRow.countNo,
            searchPartNo: partNo,
            username: this.$store.state.user.name
          }
          quickAddMaterialByPartNo(params).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message.success('添加成功，新增 ' + data.result + ' 个标签')
              this.quickMaterialPartNo = ''
              this.loadCurrentLabelList()
              this.getDataList()
              this.$nextTick(() => {
                setTimeout(() => {
                  this.$refs.part.focus();
                }, 50);
              });
            } else {
              this.$alert(data.msg || '添加失败', '提示', { type: 'error' })
            }
          }).catch(() => {
            this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
          }).finally(() => {
            this.quickMaterialLoading = false
          })
        // }).catch(() => {})
      } else {
        // 一键删除物料 - rqrq
        // this.$confirm(`确认删除物料 ${partNo} 的所有标签？此操作不可恢复！`, '警告', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
          this.quickMaterialLoading = true
          const params = {
            site: this.$store.state.user.site,
            countNo: this.addMaterialRow.countNo,
            searchPartNo: partNo
          }
          deleteMaterialByPartNo(params).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message.success('删除成功，已删除 ' + data.result + ' 个标签')
              this.quickMaterialPartNo = ''
              this.loadCurrentLabelList()
              this.getDataList()
              this.$nextTick(() => {
                setTimeout(() => {
                  this.$refs.part.focus();
                }, 50);
              });
            } else {
              this.$alert(data.msg || '删除失败', '提示', { type: 'error' })
            }
          }).catch(() => {
            this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
          }).finally(() => {
            this.quickMaterialLoading = false
          })
        // }).catch(() => {})
      }
    },

    // 查询物料 - rqrq
    queryMaterialForAdd() {
      if (!this.materialQueryForm.searchPartNo) {
        this.$message.warning('请输入物料编码')
        return
      }
      this.materialQueryLoading = true
      const params = {
        site: this.$store.state.user.site,
        ...this.materialQueryForm
      }
      queryMaterialForManualCount(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.materialQueryList = data.rows
          if (data.rows.length === 0) {
            this.$message.warning('未找到符合条件的物料')
          }
        } else {
          this.$alert(data.msg || '查询失败', '提示', { type: 'error' })
        }
      }).catch(() => {
        this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
      }).finally(() => {
        this.materialQueryLoading = false
      })
    },

    // 物料选择变化 - rqrq
    handleMaterialSelectionChange(selection) {
      this.selectedMaterials = selection
    },

    // 确认添加物料 - rqrq
    confirmAddMaterial() {
      if (this.selectedMaterials.length === 0) {
        this.$message.warning('请选择要添加的物料')
        return
      }
      this.addMaterialLoading = true
      const params = {
        site: this.$store.state.user.site,
        countNo: this.addMaterialRow.countNo,
        selectedMaterials: this.selectedMaterials,
        username: this.$store.state.user.name
      }
      addMaterialToCount(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message.success('添加成功，新增 ' + data.result + ' 个标签')
          this.materialQueryDialogVisible = false
          this.loadCurrentLabelList()
          this.getDataList()
        } else {
          this.$alert(data.msg || '添加失败', '提示', { type: 'error' })
        }
      }).catch(() => {
        this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
      }).finally(() => {
        this.addMaterialLoading = false
      })
    },

    // 下达盘点单 - rqrq
    handleRelease(row) {
      this.$confirm('确认下达盘点单 ' + row.countNo + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          site: this.$store.state.user.site,
          countNo: row.countNo,
          username: this.$store.state.user.name
        }
        releaseCount(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('下达成功')
            this.getDataList()
          } else {
            this.$alert(data.msg || '下达失败', '提示', { type: 'error' })
          }
        }).catch(() => {
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        })
      }).catch(() => {})
    },

    // 推送盘点单到WCS - rqrq
    handlePush(row) {
      this.$confirm('确认推送盘点单 ' + row.countNo + ' 到WCS？将开始出库前10个栈板。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          site: this.$store.state.user.site,
          countNo: row.countNo,
          username: this.$store.state.user.name
        }
        pushCountToWcs(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('推送成功，本次推送栈板数: ' + data.result)
            this.getDataList()
          } else {
            this.$alert(data.msg || '推送失败', '提示', { type: 'error' })
          }
        }).catch(() => {
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        })
      }).catch(() => {})
    },

    // 完成盘点单 - rqrq
    handleComplete(row) {
      this.$confirm('确认完成盘点单 ' + row.countNo + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          site: this.$store.state.user.site,
          countNo: row.countNo,
          username: this.$store.state.user.name
        }
        completeCount(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
            this.getDataList()
          } else {
            this.$alert(data.msg || '操作失败', '提示', { type: 'error' })
          }
        }).catch(() => {
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        })
      }).catch(() => {})
    },

    // 取消盘点单 - rqrq
    handleCancel(row) {
      this.$confirm('确认取消盘点单 ' + row.countNo + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          site: this.$store.state.user.site,
          countNo: row.countNo,
          username: this.$store.state.user.name
        }
        cancelCount(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('取消成功')
            this.getDataList()
          } else {
            this.$alert(data.msg || '取消失败', '提示', { type: 'error' })
          }
        }).catch(() => {
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        })
      }).catch(() => {})
    },

    // 删除盘点单 - rqrq
    handleDelete(row) {
      this.$confirm('确认删除盘点单 ' + row.countNo + '？删除后不可恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          site: this.$store.state.user.site,
          countNo: row.countNo
        }
        deleteCount(params).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('删除成功')
            this.getDataList()
          } else {
            this.$alert(data.msg || '删除失败', '提示', { type: 'error' })
          }
        }).catch(() => {
          this.$alert('网络错误', '错误', { confirmButtonText: '确定' })
        })
      }).catch(() => {})
    },

    // 格式化日期时间 - rqrq
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },

    // 获取状态颜色 - rqrq
    getStatusColor(status) {
      const colorMap = {
        'DRAFT': '#909399',
        'RELEASED': '#409EFF',
        'CHECKING': '#E6A23C',
        'COMPLETED': '#67C23A',
        'CANCELLED': '#F56C6C'
      }
      return colorMap[status] || '#909399'
    },

    // 获取盘点结果颜色 - rqrq
    getResultColor(result) {
      const colorMap = {
        'OK': '#67C23A',
        'MISSING': '#F56C6C',
        'SURPLUS': '#E6A23C',
        'QTY_DIFF': '#F56C6C'
      }
      return colorMap[result] || '#909399'
    },

    // ==================== 导出功能 ==================== - rqrq

    /**
     * 前端导出Excel（方式一：使用xlsx库在前端生成）- rqrq
     * @param row 当前行数据
     */
    async handleExportFrontend(row) {
      if (this.exportLoading) return
      this.exportLoading = true
      this.$message.success('正在导出数据，请稍候...')

      try {
        const site = this.$store.state.user.site
        const countNo = row.countNo
        const params = { site, countNo }

        // 并行获取所有数据 - rqrq
        const [labelRes, summaryRes, palletRes, resultRes, adjustmentRes] = await Promise.all([
          searchCountLabelList(params),
          searchMaterialSummary(params),
          searchCountPalletList(params),
          searchCountResultList(params),
          queryAdjustmentTransList(params)
        ])

        const labelList = (labelRes.data && labelRes.data.code === 0) ? labelRes.data.rows || [] : []
        const summaryList = (summaryRes.data && summaryRes.data.code === 0) ? summaryRes.data.rows || [] : []
        const palletList = (palletRes.data && palletRes.data.code === 0) ? palletRes.data.rows || [] : []
        const resultList = (resultRes.data && resultRes.data.code === 0) ? resultRes.data.rows || [] : []
        const resultDiffList = resultList.filter(item => item.countResult !== 'OK')
        const adjustmentList = (adjustmentRes.data && adjustmentRes.data.code === 0) ? adjustmentRes.data.rows || [] : []

        // 创建工作簿 - rqrq
        const wb = XLSX.utils.book_new()

        // Sheet1: 标签明细 - rqrq
        const labelData = labelList.map(item => ({
          '标签号': item.unitId,
          '物料号': item.partNo,
          '物料描述': item.partDesc,
          '数量': item.qty,
          '批号': item.batchNo,
          '栈板号': item.palletId,
          '所在层数': item.locationZ,
          '标签类型': item.labelTypeDesc,
          '盘点状态': item.countFlagDesc,
          '盘点人': item.countUser,
          '盘点时间': this.formatDateTime(item.countDate),
          '仓库': item.warehouseName,
          '库位': item.locationName
        }))
        const ws1 = XLSX.utils.json_to_sheet(labelData)
        XLSX.utils.book_append_sheet(wb, ws1, '标签明细')

        // Sheet2: 物料汇总 - rqrq
        const summaryData = summaryList.map(item => ({
          '物料号': item.partNo,
          '物料描述': item.partDesc,
          '批号': item.batchNo,
          'WDR号': item.wdr,
          '仓库': item.warehouseName,
          '库位': item.locationName,
          '标签数': item.labelCount,
          '总数量': item.totalQty,
          '栈板数': item.palletCount,
          '已盘点': item.checkedLabelCount,
          '进度': item.progressPercent
        }))
        const ws2 = XLSX.utils.json_to_sheet(summaryData)
        XLSX.utils.book_append_sheet(wb, ws2, '物料汇总')

        // Sheet3: 栈板明细 - rqrq
        const palletData = palletList.map(item => ({
          '序号': item.seqNo,
          '栈板号': item.palletId,
          '标签数': item.labelCount,
          '已盘点': item.checkedCount,
          '进度': item.progressPercent,
          '盘点状态': item.countFlagDesc,
          '站点区域': item.stationArea,
          '站点ID': item.stationId,
          '所在层数': item.locationZ,
          '盘点人': item.countUser,
          '盘点时间': this.formatDateTime(item.countDate)
        }))
        const ws3 = XLSX.utils.json_to_sheet(palletData)
        XLSX.utils.book_append_sheet(wb, ws3, '栈板明细')

        // Sheet4: 盘点结果 - rqrq
        const resultData = resultList.map(item => ({
          '标签号': item.unitId,
          '物料号': item.partNo,
          '物料描述': item.partDesc,
          '数量': item.qty,
          '差异数量': item.diffQty,
          '批号': item.batchNo,
          '栈板号': item.palletId,
          '盘点结果': item.countResultDesc,
          '处理方式': item.handleTypeDesc,
          '盘点人': item.countUser,
          '盘点时间': this.formatDateTime(item.countDate),
          '备注': item.remark
        }))
        const ws4 = XLSX.utils.json_to_sheet(resultData)
        XLSX.utils.book_append_sheet(wb, ws4, '盘点结果')

        // Sheet5: 盘点结果差异 - rqrq
        const resultDiffData = resultDiffList.map(item => ({
          '标签号': item.unitId,
          '物料号': item.partNo,
          '物料描述': item.partDesc,
          '数量': item.qty,
          '差异数量': item.diffQty,
          '批号': item.batchNo,
          '栈板号': item.palletId,
          '盘点结果': item.countResultDesc,
          '是否处理': item.handleFlagDesc,
          '处理方式': item.handleTypeDesc,
          '盘点人': item.countUser,
          '盘点时间': this.formatDateTime(item.countDate),
          '备注': item.remark
        }))
        const ws5 = XLSX.utils.json_to_sheet(resultDiffData)
        XLSX.utils.book_append_sheet(wb, ws5, '盘点结果差异')

        // Sheet6: 盘盈盘亏明细 - rqrq
        const adjustmentData = adjustmentList.map(item => ({
          '单据号': item.transNo,
          '事务类型': item.transTypeDesc,
          '行号': item.itemNo,
          '物料号': item.partNo,
          '数量': item.transQty,
          '批号': item.batchNo,
          '库位': item.locationId,
          '方向': item.directionDesc,
          '仓库': item.warehouseId,
          '操作人': item.userName
        }))
        const ws6 = XLSX.utils.json_to_sheet(adjustmentData)
        XLSX.utils.book_append_sheet(wb, ws6, '盘盈盘亏明细')

        // 导出文件 - rqrq
        const fileName = `盘点数据_${countNo}_${this.dayjs().format('YYYYMMDDHHmmss')}.xlsx`
        XLSX.writeFile(wb, fileName)
        this.$message.success('导出成功')
      } catch (error) {
        console.error('导出失败:', error)
        this.$alert('导出失败：' + (error.message || error), '错误', { confirmButtonText: '确定' })
      } finally {
        this.exportLoading = false
      }
    },

    /**
     * 后端导出Excel（方式二：后端生成Excel文件下载）- rqrq
     * @param row 当前行数据
     */
    handleExportBackend(row) {
      if (this.exportLoading) return
      this.exportLoading = true
      this.$message.success('正在导出数据，请稍候...')

      const params = {
        site: this.$store.state.user.site,
        countNo: row.countNo
      }

      exportCountDataExcel(params).then(response => {
        // 从响应中获取blob数据 - rqrq
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const fileName = `盘点数据_${row.countNo}_${this.dayjs().format('YYYYMMDDHHmmss')}.xlsx`

        // 创建下载链接 - rqrq
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.click()
        window.URL.revokeObjectURL(link.href)

        this.$message.success('导出成功')
      }).catch(error => {
        console.error('导出失败:', error)
        this.$alert('导出失败：' + (error.message || error), '错误', { confirmButtonText: '确定' })
      }).finally(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-table a {
  color: #409EFF;
  cursor: pointer;
}
/deep/ .el-table a:hover {
  text-decoration: underline;
}

/* 盘点模式面板样式 - rqrq */
.count-mode-panel {
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}
.count-mode-panel.count-mode-on {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #67C23A;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
}
.count-mode-panel.count-mode-off {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #E6A23C;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
}
.count-mode-content {
  display: flex;
  align-items: center;
  width: 100%;
}
.count-mode-icon {
  font-size: 24px;
  margin-right: 10px;
}
.count-mode-on .count-mode-icon {
  color: #67C23A;
}
.count-mode-off .count-mode-icon {
  color: #E6A23C;
}
.count-mode-label {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}
.count-mode-value {
  font-size: 16px;
  font-weight: bold;
  margin-left: 5px;
}
.count-mode-on .count-mode-value {
  color: #67C23A;
}
.count-mode-off .count-mode-value {
  color: #E6A23C;
}
.count-mode-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 15px;
}
</style>
