<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-drawer v-model="visible" size="100%" direction="rtl" :close-on-press-escape="false">
    <div class="page-container form-container">
      <div class="form-btns-container" style="display: flex; align-items: center">
        <span class="title-label"><el-icon>
            <Document />
          </el-icon>
          计划详情</span>
        <el-button v-if="daywork.itemStatus < 4" style="margin-left: 30px" type="primary" icon="Check"
          @click="handleSave">保存
        </el-button>
        <el-button icon="Close" @click="cancel">取 消 </el-button>
        <div class="close-btn" @click="cancel">
          <i class="fa fa-times" aria-hidden="true" />
          <!-- <span>关闭</span> -->
        </div>
      </div>
      <div class="switch-container" v-if="!isEdit">
        <span style="font-weight: bold">非首序</span>
        <el-switch v-model="firstOrder" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          class="ml-15" @change="firstOrderClick" />
        <span style="font-weight: bold">首序</span>
      </div>

      <!-- ****************************首序报工部分********************************* -->
      <div v-if="firstOrder">
        <div style="padding: 0px 16px 10px 16px" v-if="!isEdit">
          <el-row :gutter="20" style="padding-bottom: 10px; border-bottom: 1px solid #999">
          </el-row>
          <el-form :model="queryParams" ref="queryRef" :inline="true"
            style="margin-right: 0px; font-size: 15px; padding-top: 10px"><el-form-item label="选择产品："></el-form-item>
            <el-form-item label="生产计划单号：" prop="productionPlanNo">
              <el-input :disabled="lotClick" v-model="queryParams.productionPlanNo" placeholder="请输入计划单号"
                style="width: 144px" clearable />
            </el-form-item>
            <el-form-item label="产品描述：" prop="productDescription">
              <el-input :disabled="lotClick" v-model="queryParams.productDescription" placeholder="请输入产品描述"
                style="width: 144px" clearable />
            </el-form-item>

            <el-form-item>
              <el-button :disabled="lotClick" type="primary" icon="Search" @click="handleQueryProuct">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 首序计划单列表部分 -->
        <div class="el-table-container" style="
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
          " v-if="!isEdit">
          <el-table :data="productList" style="height: 200px" v-loading="loading" size="small" border>
            <el-table-column label="计划单号" align="center" width="200" prop="productionPlanNo">
            </el-table-column>
            <el-table-column label="序号" align="center" width="60" prop="lineNumber">
            </el-table-column>

            <el-table-column label="产品描述" align="center" prop="productDescription">
            </el-table-column>

            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="80">
              <template #default="scope">
                <el-button link :disabled="lotClick" type="primary" icon="Finished"
                  @click="handleFirstSelectProduction(scope.row)">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 首序批次信息确认部分 -->
        <el-row :gutter="30" style="
            margin: 10px 0 0 0;
            padding-top: 10px;
            border-top: 1px solid #999;
          ">
          <el-col :span="30">
            <span class="leftInfo">产品批次信息</span>
          </el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form :model="daywork" ref="queryRef" :inline="true"
            style="margin-right: 0px; font-size: 15px; padding-top: 10px">
            <el-form-item label="生产计划单号：" style="margin-bottom: 0px" prop="lotCode">
              <el-input v-model="daywork.productionPlanNo" disabled="true" style="width: 100px" placeholder="计划单号"
                clearable />
            </el-form-item>
            <el-form-item label="产品描述：" style="margin-bottom: 0px" prop="lotCode">
              <el-input v-model="daywork.productDescription" style="width: 240px" placeholder="产品描述" disabled="true"
                clearable />
            </el-form-item>
            <el-form-item label="批次号：" style="margin-bottom: 0px" prop="lotCode">
              <el-input v-model="daywork.lotCode" placeholder="生成批次号" :disabled="lotClick" style="width: 150px"
                clearable />
            </el-form-item>

            <el-form-item style="margin-bottom: 0px">
              <el-button :disabled="lotClick" type="primary" icon="Finished" @click="handleFirstLotClick">确认</el-button>
              <el-button :disabled="lotClick" type="primary" icon="Finished" @click="handleDoLastLot">加工尾批</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 基础数据选择炉号部分 -->
        <div>
          <div style="padding: 0px 16px 0px 16px">
            <el-row :gutter="30" style="margin-top: 10px; padding-top: 10px">
              <el-col :span="30">
                <span class="leftInfo">基础数据</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 10px; padding-top: 10px">
              <el-col :span="6">
                <span class="middleInfo">炉号:</span>
                <el-select style="width: 200px" v-model="furnaceNoInfo" placeholder="请选择炉号" value-key="index"
                  :clearable="false" @change="handleMiddleInfoChange" v-if="!isEdit">
                  <el-option v-for="info in furnaceNumberInfoList" :key="info.index" :label="info.text"
                    :value="info.value">
                  </el-option>
                </el-select>
                <span class="rightInfo" v-else>{{
                  furnaceNoInfo.furnaceNumber
                    ? furnaceNoInfo.furnaceNumber
                    : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">厂家:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.factory ? furnaceNoInfo.factory : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">牌号:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.brandNumber ? furnaceNoInfo.brandNumber : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">规格:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.spec ? furnaceNoInfo.spec : "-"
                }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 15px; padding-bottom: 10px">
              <el-col :span="6">
                <span class="middleInfo">形状:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.shape ? furnaceNoInfo.shape : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">材料直径:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.diameter ? furnaceNoInfo.diameter : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">原料编码:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.rawMaterialCode
                    ? furnaceNoInfo.rawMaterialCode
                    : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">来料日期:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.incomingDate ? furnaceNoInfo.incomingDate : "-"
                }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 15px; padding-bottom: 10px">
              <el-col :span="12">
                <span class="middleInfo">材质1:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.firstTechnicalRequirement
                    ? furnaceNoInfo.firstTechnicalRequirement
                    : "-"
                }}</span>
              </el-col>
              <el-col :span="12">
                <span class="middleInfo">材质2:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.secondTechnicalRequirement
                    ? furnaceNoInfo.secondTechnicalRequirement
                    : "-"
                }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 首序报工选择工序、完成状态、箱号部分 -->
        <el-row :gutter="30" style="
            margin: 10px 0 0 0;
            padding-top: 10px;
            border-top: 1px solid #999;
          ">
        </el-row>
      </div>

      <!-- ****************************非首序报工部分**************************** -->
      <div v-if="!firstOrder">
        <div style="padding: 0px 16px 10px 16px" v-if="!isEdit">
          <el-row :gutter="20" style="padding-bottom: 10px; border-bottom: 1px solid #999">
          </el-row>
          <el-form :model="queryParams" ref="queryRef" :inline="true"
            style="margin-right: 0px; font-size: 15px; padding-top: 10px"><el-form-item label="产品信息："></el-form-item>
            <el-form-item label="生产计划单号：" prop="productionPlanNo">
              <el-input :disabled="lotClick" v-model="queryParams.productionPlanNo" placeholder="请输入计划单号"
                style="width: 144px" clearable />
            </el-form-item>
            <el-form-item label="产品描述：" prop="productDescription">
              <el-input :disabled="lotClick" v-model="queryParams.productDescription" placeholder="请输入产品描述"
                style="width: 144px" clearable />
            </el-form-item>
            <el-form-item label="批号：" prop="productDescription">
              <el-input :disabled="lotClick" v-model="queryParams.lotCode" placeholder="请输入产品描述" style="width: 144px"
                clearable />
            </el-form-item>
            <el-form-item label="箱号：" prop="productDescription">
              <el-input :disabled="lotClick" v-model="queryParams.carrierCode" placeholder="请输入箱号" style="width: 144px"
                clearable />
            </el-form-item>

            <el-form-item>
              <el-button :disabled="lotClick" type="primary" icon="Search" @click="handleNoFirstQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 非首序批次列表部分 -->
        <div class="el-table-container" style="
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
          " v-if="!isEdit">
          <el-table :data="productList" style="height: 200px" v-loading="loading" size="small" border>
            <el-table-column label="计划单号" align="center" width="200" prop="productionPlanNo">
            </el-table-column>
            <el-table-column label="序号" align="center" width="60" prop="lineNumber">
            </el-table-column>

            <el-table-column label="产品描述" align="center" prop="productDescription">
            </el-table-column>

            <el-table-column label="批次号" align="center" prop="lotCode">
            </el-table-column>
            <el-table-column label="箱号" align="center" prop="carrierName">
            </el-table-column>

            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="80">
              <template #default="scope">
                <el-button link :disabled="lotClick" type="primary" icon="Finished"
                  @click="handleNoFirstSelect(scope.row)">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row :gutter="30" style="
            margin: 10px 0 0 0;
            padding-top: 10px;
            border-top: 1px solid #999;
          ">
          <el-col :span="30">
            <span class="leftInfo">产品批次信息</span>
          </el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form :model="daywork" ref="queryRef" :inline="true"
            style="margin-right: 0px; font-size: 15px; padding-top: 10px">
            <el-form-item label="生产计划单号：" style="margin-bottom: 0px" prop="lotCode">
              <el-input v-model="daywork.productionPlanNo" disabled="true" style="width: 100px" placeholder="计划单号"
                clearable />
            </el-form-item>
            <el-form-item label="产品描述：" style="margin-bottom: 0px" prop="lotCode">
              <el-input v-model="daywork.productDescription" style="width: 240px" placeholder="产品描述" disabled="true"
                clearable />
            </el-form-item>
            <el-form-item label="批次号：" style="margin-bottom: 0px" prop="lotCode">
              <el-input v-model="daywork.lotCode" placeholder="生成批次号" disabled="true" style="width: 150px" clearable />
            </el-form-item>
          </el-form>
        </div>
        <!-- 基础数据选择炉号部分 -->
        <div>
          <div style="padding: 0px 16px 0px 16px">
            <el-row :gutter="30" style="margin-top: 10px; padding-top: 10px">
              <el-col :span="30">
                <span class="leftInfo">基础数据</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 10px; padding-top: 10px">
              <el-col :span="6">
                <span class="middleInfo">炉号:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.furnaceNumber
                    ? furnaceNoInfo.furnaceNumber
                    : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">厂家:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.factory ? furnaceNoInfo.factory : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">牌号:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.brandNumber ? furnaceNoInfo.brandNumber : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">规格:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.spec ? furnaceNoInfo.spec : "-"
                }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 15px; padding-bottom: 10px">
              <el-col :span="6">
                <span class="middleInfo">形状:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.shape ? furnaceNoInfo.shape : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">材料直径:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.diameter ? furnaceNoInfo.diameter : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">原料编码:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.rawMaterialCode
                    ? furnaceNoInfo.rawMaterialCode
                    : "-"
                }}</span>
              </el-col>
              <el-col :span="6">
                <span class="middleInfo">来料日期:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.incomingDate ? furnaceNoInfo.incomingDate : "-"
                }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 15px; padding-bottom: 10px">
              <el-col :span="12">
                <span class="middleInfo">材质1:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.firstTechnicalRequirement
                    ? furnaceNoInfo.firstTechnicalRequirement
                    : "-"
                }}</span>
              </el-col>
              <el-col :span="12">
                <span class="middleInfo">材质2:</span>
                <span class="rightInfo">{{
                  furnaceNoInfo.secondTechnicalRequirement
                    ? furnaceNoInfo.secondTechnicalRequirement
                    : "-"
                }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row :gutter="30" style="
            margin: 10px 0 0 0;
            padding-top: 10px;
            border-top: 1px solid #999;
          ">
        </el-row>
      </div>
      <!-- 报工选择工序、完成状态、箱号部分 -->
      <div style="padding: 0px 16px 0px 16px">
        <el-row :gutter="30" style="margin-top: 10px; padding-top: 10px">
          <el-col :span="3">
            <span class="leftInfo">报工信息</span>
          </el-col>
        </el-row>
        <el-form :model="daywork" ref="queryRef" :inline="true"
          style="margin-right: 0px; font-size: 15px; padding-top: 10px">
          <el-form-item label="工序：" prop="selectedProcess">
            <el-select v-model="selectedProcess" placeholder="请选择" :disabled="isEdit" :clearable="false"
              @change="handleProcessChange">
              <el-option v-for="process in processList" :key="process.value" :label="process.text"
                :value="process.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="productDescription">
            <el-button type="primary" link @click="handleProcessDialog">工艺详情</el-button>
          </el-form-item>
          <el-form-item label="箱号：" prop="carrierIds">
            <el-select v-model="daywork.carrierIds" multiple filterable :disabled="daywork.itemStatus == 4" remote
              reserve-keyword style="width: 300px" placeholder="请选择载具" value-key="value" :remote-method="(arg) => handleInput(arg, daywork.dayworkCarriers)
                " :loading="loadingCarrier" @change="(arg) => handleCarrierChange(arg)">
              <el-option v-for="item in carriers" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="工序完成：" prop="productDescription">
            <span style="font-weight: bold">否</span>
            <el-switch v-model="performance" :disabled="daywork.itemStatus == 4" style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              " @change="performanceClick" class="ml-15" />
            <span style="font-weight: bold">是</span>
          </el-form-item>
        </el-form>
      </div>
      <!-- 报工信息部分 -->
      <div class="list-btns-container">
        <el-button type="primary" icon="Plus" @click="handleFirstTabAdd">
          新增
        </el-button>
        <el-button type="danger" icon="Delete" @click="handleFirstTabDelete">
          删除
        </el-button>
      </div>
      <div class="el-table-container" style="
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        ">
        <el-table ref="dayworkItemTable" :data="dayworkItemList" style="height: 200px" size="small" border>
          <el-table-column type="selection" width="48" align="center" />
          <el-table-column label="操作者" align="center" width="200" prop="nickName">
            <template #default="scope">
              <el-select v-show="daywork.itemStatus < 4" v-model="scope.row.nickName" filterable remote reserve-keyword
                value-key="userId" placeholder="请选择操作者" :remote-method="(arg) => remoteUser(arg, scope.row)"
                @change="(arg) => handleUserChange(arg, scope.row)">
                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item">
                  <span style="float: left">{{ item.nickName }}</span>
                  <span style="
                      float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;
                    ">
                    {{ item.userName }}
                  </span>
                </el-option>
              </el-select>
              <span v-show="daywork.itemStatus >= 4">
                {{ scope.row.nickName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="设备" align="center" width="200" prop="supplierName">
            <template #default="scope">
              <el-select v-show="daywork.itemStatus < 4" v-model="scope.row.equipmentDetailCode" filterable remote
                reserve-keyword value-key="equipmentDetailId" placeholder="请选择设备"
                :remote-method="(arg) => remoteEquipment(arg, scope.row)"
                @change="(arg) => handleEquipmentChange(arg, scope.row)">
                <el-option v-for="item in equipmentList" :key="item.equipmentDetailId" :label="item.equipmentDetailCode"
                  :value="item" />
              </el-select>
              <span v-show="daywork.itemStatus >= 4">
                {{ scope.row.equipmentDetailCode }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="投入量" align="center" width="200" prop="prodNum">
          </el-table-column>
          <el-table-column label="合格量" align="center" width="200" prop="qualifiedNum">
            <template #default="scope">
              <el-input-number v-show="daywork.itemStatus < 4" v-model="scope.row.qualifiedNum" placeholder="合格量"
                :min="0" :step="1" :precision="0" controls-position="right" clearable />
              <span v-show="daywork.itemStatus >= 4">
                {{ scope.row.qualifiedNum }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="废品数" width="80" align="center" prop="rejectNum">
          </el-table-column>
          <el-table-column label="开始时间" align="center" prop="startTime">
            <template #default="scope">
              <el-date-picker style="width: 100%" v-show="!daywork.itemStatus > 3" v-model="scope.row.startTime"
                type="datetime" value-format="YYYY-MM-DD HH:mm:ss " :editable="false" placeholder="请选择开始时间" />
              <span v-show="daywork.itemStatus >= 4">
                {{ parseTime(scope.row.startTime, "{y}-{m}-{d} {h}:{i}:{s}") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" align="center" prop="endTime">
            <template #default="scope">
              <el-date-picker v-show="!daywork.itemStatus > 3" v-model="scope.row.endTime" style="width: 100%"
                type="datetime" value-format="YYYY-MM-DD HH:mm:ss " :editable="false" placeholder="请选择结束时间" />
              <span v-show="daywork.itemStatus >= 4">
                {{ parseTime(scope.row.endTime, "{y}-{m}-{d} {h}:{i}:{s}") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="废品信息" align="center" width="80" prop="rejectDetail">
            <template #default="scope">
              <el-button link type="primary" icon="DocumentRemove" @click="handleShowRejectDialog(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="80">
            <template #default="scope">
              <el-button :disabled="daywork.itemStatus > 3" link type="danger" icon="Delete"
                @click="handleFirstTabRowDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <reject-dialog ref="rejectDialogRef" @handleRejectSuccess="handleAddReject" />
    <process-dialog ref="processDialogRef" />
  </el-drawer>
</template>
<script setup>
import { ref } from "vue";
import {
  selectProductList,
  getLotList,
  getProcessList,
  getProcessListByLot,
  listCarriers,
  getDeptUserList,
  getDeptEquipmentList,
  certainLotInfo,
  getNoFirstLotList,
  getDayworkItemAndFurnace,
  specialSaveDaywork,
  specialUpdateDaywork,
} from "@/api/business/specialDaywork";
import { getFurnaceNoInfo } from "@/api/business/p2";
import useUserStore from "@/store/modules/user";
import { debounce } from "lodash";
import rejectDialog from "./rejectDialog";
import processDialog from "./processDialog";

/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => { },
  },
});

const { getList } = toRefs(props);
const { proxy } = getCurrentInstance();

/** 字典数组区 */
const firstOrder = ref(true); //是否首序报工
const productList = ref([]); //产品信息
const carriers = ref([]); // 箱号列表
const performance = ref(true); //工序完成
const dayworkItemTable = ref(null);
const loadingCarrier = ref(false);
const selectedProcess = ref({});
const deptId = ref(null); //部门id
const dept = ref({});
const lotClick = ref(false); //批次确认
const isEdit = ref(false);
const furnaceNumberInfoList = ref([]); //炉号列表
const furnaceNoInfo = ref({}); //炉号信息
const lotList = ref([]); //批次信息列表
const processAlias = ref([]); //批次剩余工序
const batchNo = ref({}); //当前批次信息
const dayworkItemList = ref([]);
const userStore = useUserStore().user;
const processList = ref([]);
const userList = ref([]); //操作者列表
const equipmentList = ref([]); //设备列表
const loading = ref(false);
const visible = ref(false);
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

const dayworkItem = ref({
  qualifiedNum: 0,
  rejectNum: 0,
});

const data = reactive({
  daywoerkItem: {},
  daywork: {},
  rules: {},
});
const { daywork, daywoerkItem, rules } = toRefs(data);

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (row, deptInfo) => {
  visible.value = true;
  dept.value = deptInfo;
  deptId.value = dept.value.deptId;
  queryParams.value.deptId = deptId.value;
  daywork.value.itemStatus = performance.value ? 3 : 2;
  if (row) {
    isEdit.value = true;
    lotClick.value = true;
    firstOrder.value = row.specialIsFirst == 1;
    daywork.value = row;
    console.log("row", daywork.value);
    daywork.value.productionPlanNo = row.productionPlanDetail.productionPlanNo;
    daywork.value.productDescription =
      row.productionPlanDetail.productDescription;
    performance.value = row.itemStatus == 3;
    handleSelectSpecialInfo(daywork.value);
  }
};

/** 取消按钮 */
const cancel = () => {
  visible.value = false;
  isEdit.value = false;
  reset();
  getList.value();
};

/** 切换首序非首序 */
function firstOrderClick() {
  productList.value = [];
  batchNo.value = {};
  lotList.value = [];
  daywork.value = {};
  selectedProcess.value = null;
  furnaceNoInfo.value = {};
  processList.value = [];
  processAlias.value = {};
  daywork.value.specialIsFirst = firstOrder.value ? 1 : 0;
  performance.value = true;

  lotClick.value = false;
  dayworkItemList.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    deptId: deptId.value,
  };
  performanceClick();
}

/** 切换工序完成状态 */
function performanceClick() {
  daywork.value.itemStatus = performance.value ? 3 : 2;
}

/** 首序报工选择计划单方法 */
function handleFirstSelectProduction(row) {
  daywork.value.carrierIds = [];
  let obj = {};
  obj.productionPlanDetailId = row.id;
  //查询计划单所有可以报工批次
  getLotList(obj).then((res) => {
    lotList.value = res.rows;
    if (res.rows.length > 0) {
      //取第一条批次信息
      batchNo.value = res.rows[0];
      daywork.value.lotId = lotList.value[0].id;
      daywork.value.lotCode = lotList.value[0].lotCode;
      daywork.value.technologicalProcessId =
        lotList.value[0].technologicalProcessId;
      //获取产品信息
      daywork.value.productionPlanDetailId = row.id;
      daywork.value.productId = row.productId;
      daywork.value.productDescription = row.productDescription;
      daywork.value.productionPlanNo = row.productionPlanNo;
      daywork.value.lineNumber = row.lineNumber;

      getFurnaceInfo(batchNo.value);
    } else {
      batchNo.value = res.rows[0];
      proxy.$modal.msgError("该计划单无可用批次");
      return;
    }
  });
}

/** 废品信息带回 */
function handleAddReject(daywoerkItem, reject) {
  const index = dayworkItemList.value.indexOf(daywoerkItem);
  dayworkItemList.value[index].rejectList = reject;
  dayworkItemList.value[index].rejectNum = daywoerkItem.rejectAmount;
}

/** 报工查询操作者 */
function remoteUser(reg, row) {
  getDeptUserList({
    keyword: reg,
    pageSize: 50,
    commonType: "person",
    deptId: deptId.value,
    productionPlanDetailId: daywork.value.productionPlanDetailId,
  }).then((res) => {
    userList.value = {};
    userList.value = res.rows.map((v) => ({
      userId: v.commonId,
      nickName: v.commonName,
      userName: v.commonCode,
    }));
  });
}

/** 报工查询设备 */
function remoteEquipment(reg, row) {
  if (!row.userId) {
    proxy.$modal.msgError("请先选择操作者");
    return;
  }
  getDeptEquipmentList({
    commonCode: reg,
    pageSize: 50,
    commonType: "equipmentDetail",
    userId: row.userId,
    productionPlanDetailId: daywork.value.productionPlanDetailId,
    deptId: deptId.value,
  }).then((res) => {
    equipmentList.value = {};
    console.log();
    equipmentList.value = res.rows.map((v) => ({
      equipmentDetailId: v.commonId,
      equipmentDetailCode: v.commonCode,
    }));
  });
}

function handleUserChange(data, row) {
  row.userId = data.userId;
  row.userName = data.userName;
  row.nickName = data.nickName;
}

function handleEquipmentChange(data, row) {
  row.equipmentDetailId = data.equipmentDetailId;
  row.equipmentDetailCode = data.equipmentDetailCode;
}

/** 报工信息废品详情 */
function handleShowRejectDialog(row) {
  let totalRejectNum = dayworkItemList.value.reduce((accumulator, current) => {
    return accumulator + current.rejectNum; // 累加每个元素的 rejectNum 属性
  }, 0); // 累加器的初始值为 0
  totalRejectNum = totalRejectNum - row.rejectNum;
  row.totalRejectNum = totalRejectNum;
  dayworkItemList.value;
  proxy.$refs.rejectDialogRef.open(row, daywork.value.itemStatus < 4);
}

/** 工艺列表按钮操作 */
function handleProcessDialog() {
  proxy.$refs.processDialogRef.open(processAlias.value);
}

/** 首序报工确定批次按钮操作 */
function handleFirstLotClick() {
  if (!daywork.value.lotId) {
    proxy.$modal.msgError("请先选择计划单");
    return;
  }
  if (!daywork.value.lotCode) {
    proxy.$modal.msgError("请输入正确批号");
    return;
  }
  const lot = lotList.value.find(
    (item) => item.lotCode === daywork.value.lotCode
  );
  if (!lot) {
    proxy.$modal.msgError("该批次不在此计划单内");
    return;
  }
  proxy.$modal
    .confirm("是否确认批次，确认后不可修改")
    .then(function () {
      console.log(batchNo.value)
      certainLotInfo(batchNo.value).then((res) => {
        if ((res.code = 200)) {
          getProcessInfo(batchNo.value);
          // 使用 filter 方法来保留那些 id 等于 specifiedId 的项目
          productList.value = productList.value.filter(
            (item) => item.id === lot.productionPlanDetailId
          );
          batchNo.value = lot;
          daywork.value.lotId = lot.id;
          daywork.value.isAmend = lot.isAmend;
          daywork.value.isWasteRecycling = lot.isWasteRecycling
          daywork.value.lotCode = lot.lotCode;
          daywork.value.productionPlanDetailId = lot.productionPlanDetailId;
          daywork.value.productId = lot.productId;
          daywork.value.technologicalProcessId = lot.technologicalProcessId;
          dayworkItem.value.prodNum = batchNo.value.productionQuantity;
          dayworkItem.value.productionPlanDetailId = lot.productionPlanDetailId;
          dayworkItem.value.technologicalProcessId = lot.technologicalProcessId;
          dayworkItem.value.deptId = deptId.value;
          dayworkItem.value.deptName = dept.value.deptName;
          dayworkItem.value.lotId = lot.id;
          lotClick.value = true;
        }
      });
    })
    .catch((err) => {
      console.log(err);
    });
}

// 根据传入的data参数获取炉号信息
function getFurnaceInfo(data) {
  furnaceNumberInfoList.value = [];
  furnaceNoInfo.value = {};
  getFurnaceNoInfo({
    productionPlanNo: daywork.value.productionPlanNo,
    lineNumber: daywork.value.lineNumber,
  }).then((res) => {
    if (res.code === 200 && res.data.length > 0) {
      res.data.forEach((item, index) => {
        furnaceNumberInfoList.value[index] = {
          text: item.furnaceNumber,
          value: { ...item, index: index },
          index: index,
        };
      });
      furnaceNoInfo.value = furnaceNumberInfoList.value[0].value;
      daywork.value.furnaceNoInfo = furnaceNumberInfoList.value[0].value;
    }
  });
}

const debouncedRemoteCarriers = debounce(remoteCarriers, 500);

function handleInput(queryString, choiced) {
  debouncedRemoteCarriers(queryString, choiced);
}

/** 报工箱号输入框搜索 */
function remoteCarriers(queryString, choiced) {
  console.log("choiced", choiced);
  loadingCarrier.value = true;
  listCarriers({
    isAbandoned: 0,
    code: queryString != "" ? queryString : null,
    lotId: daywork.value.lotId,
  }).then((res) => {
    if (res.code === 200) {
      carriers.value = res.rows.map((v) => ({
        value: v.id,
        label: v.code,
        category: v.categoryId,
      }));

      if (choiced) {
        if (choiced.length > 0 && choiced[0].id != undefined) {
          choiced = choiced.map((v) => ({
            value: v.carrierId,
            label: v.carrierCode,
            category: v.category,
          }));
        }
        carriers.value.push(
          ...choiced
            .filter(
              (v) => !carriers.value.map((e) => e.value).includes(v.carrierId)
            )
            .map((v) => ({
              value: v.carrierId,
              label: v.carrierCode,
              category: v.category,
            }))
        );
      }
    } else {
      carriers.value = [];
      carriers.value.push(...choiced);
    }
    loadingCarrier.value = false;
  });
}

/** 报工箱号选择 */
function handleCarrierChange(arg) {
  daywork.value.dayworkCarriers = carriers.value
    .filter((v) => arg.includes(v.value))
    .map((v) => ({
      carrierId: v.value,
      carrierCode: v.label,
      category: v.categoryId,
    }));
}

/** 首序报工获取当前工段工序信息 */
function getProcessInfo(data) {
  getProcessList({
    deptId: deptId.value,
  })
    .then((res) => {
      if (res.code == 200) {
        //过滤出工序交集
        //因为废品回用对工序进行单独的修改。所以重新查产品的工艺，如果该批不是废品回用，则查产品工序，如果是，则到
        //对应表查
        //通过批次号查
        console.log("data", data);
        const req = { ...data, product: null };
        getProcessListByLot({
          isWasteRecycling: data.isWasteRecycling,
          isAmend: data.isAmend,
          technologicalProcessId: data.technologicalProcessId,
        }).then((response) => {
          let lotProcessList = response.data;
          let filteredData = lotProcessList.filter((item1) =>
            res.data.some((item2) => item2.processCode === item1.processCode)
          );
          processAlias.value = lotProcessList;
          processList.value = filteredData.map((v, index) => ({
            text: v.processAlias,
            value: v.technologicalProcessDetailId
              ? v.technologicalProcessDetailId
              : v.id,
            processId: v.processId,
            processStepNumber: v.processStepNumber,
            index: index,
            technologicalProcessId: v.technologicalProcessId
              ? v.technologicalProcessId
              : v.lotTechnologicalProcessId,
          }));
          selectedProcess.value = processList.value[0].value;
          daywork.value.processId = processList.value[0].processId;
          daywork.value.technologicalProcessId =
            processList.value[0].technologicalProcessId;
          daywork.value.technologicalProcessDetailId = selectedProcess.value;
          daywork.value.processStepNumber =
            processList.value.findIndex(
              (v) => v.value === selectedProcess.value
            ) >= 0
              ? processList.value.find((v) => v.value === selectedProcess.value)
                .processStepNumber
              : null;
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
/** 是否加工尾批按钮操作 */
function handleDoLastLot() {
  if (!daywork.value.lotCode) {
    proxy.$modal.msgError("请先选择计划单");
    return;
  }
  proxy.$modal
    .confirm("是否确认加工尾批？")
    .then(function () {
      if (lotList.value.some((item) => item.isLast == 1)) {
        for (let i = 0; i < lotList.value.length; i++) {
          if (lotList.value[i].isLast == 1) {
            batchNo.value = lotList.value[i];
            daywork.value.lotId = lotList.value[i].id;
            daywork.value.lotCode = lotList.value[i].lotCode;
            daywork.value.isLast = "1";
            return;
          }
        }
      } else {
        proxy.$modal.msgError("当前计划尾批已被加工");
      }
    })
    .catch(() => { });
}

/** 非首序报工查询批次方法 */
function handleNoFirstQuery() {
  loading.value = true;
  getNoFirstLotList(queryParams.value).then((res) => {
    if (res.code == 200) {
      productList.value = res.rows;
    }
    loading.value = false;
  });
}

/** 表单重置 */
function reset() {
  productList.value = [];
  firstOrder.value = true;
  batchNo.value = {};
  processList.value = [];
  lotList.value = [];
  lotClick.value = false;
  selectedProcess.value = null;
  daywork.value = {};
  furnaceNumberInfoList.value = [];
  dayworkItemList.value = [];
  processAlias.value = [];
  furnaceNoInfo.value = {};
  carriers.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    deptId: null,
  };

  proxy.resetForm("queryRef");
}

/** 首序查询产品信息 */
function handleQueryProuct() {
  loading.value = true;
  selectProductList(queryParams.value).then((response) => {
    if ((response.code = 200)) {
      productList.value = response.rows;
    }
    loading.value = false;
  });
}

/** 提交按钮 */
function handleSave() {
  if (dayworkItemList.value.length == 0) {
    proxy.$modal.msgError("请添加报工信息");
    return;
  }
  if (!daywork.value.carrierIds && !daywork.value.carrierIds.length > 0) {
    proxy.$modal.msgError("请选择载具");
    return;
  }

  daywork.value.prodNum = dayworkItemList.value[0].prodNum;
  daywork.value.processQualifiedNum = 0;
  for (let i = 0; i < dayworkItemList.value.length; i++) {
    //计算总合格数
    daywork.value.processQualifiedNum += dayworkItemList.value[i].qualifiedNum;

    if (!dayworkItemList.value[i].userId) {
      proxy.$modal.msgError("第 " + (i + 1) + " 行操作者不能为空");
      return;
    }
    if (!dayworkItemList.value[i].equipmentDetailId) {
      proxy.$modal.msgError("第 " + (i + 1) + " 行设备不能为空");
      return;
    }
    if (!dayworkItemList.value[i].startTime) {
      proxy.$modal.msgError("第 " + (i + 1) + " 行开始时间不能为空");
      return;
    }
    if (!dayworkItemList.value[i].endTime) {
      proxy.$modal.msgError("第 " + (i + 1) + " 行结束时间不能为空");
      return;
    }
    if (dayworkItemList.value[i].startTime > dayworkItemList.value[i].endTime) {
      proxy.$modal.msgError("第 " + (i + 1) + " 行结束时间不能小于开始时间");
      return;
    }
  }

  daywork.value.dayworkItemList = dayworkItemList.value;
  daywork.value.specialIsFirst = firstOrder.value ? 1 : 0;
  daywork.value.itemStatus = performance.value ? 3 : 2;
  daywork.value.userId = userStore.userId;
  daywork.value.userName = userStore.userName;
  daywork.value.nickName = userStore.nickName;
  daywork.value.deptName = dept.value.deptName;
  daywork.value.deptId = deptId.value;

  if (daywork.value.prodNum < daywork.value.processQualifiedNum) {
    let num = daywork.value.processQualifiedNum - daywork.value.prodNum; //多出来的数量
    let percent =
      (daywork.value.processQualifiedNum / daywork.value.prodNum) * 100; //合格率
    percent = Math.ceil(percent * 100) / 100; //只入不舍

    //判断是否为首序
    if (firstOrder.value) {
      // 弹出确认对话框
      proxy.$modal
        .confirm(
          "合格数为投产量" +
          percent +
          "%,超出投产量" +
          num +
          "。 是否继续保存！"
        )
        .then(function () {
          if (isEdit.value) {
            specialUpdate(daywork.value);
          } else {
            specialSave(daywork.value);
          }
        })
        .then(() => {
          return;
        })
        .catch(() => {
          return;
        });
    } else {
      let maxQuailifiedNum = Math.floor(daywork.value.prodNum * 1.03);

      if (daywork.value.processQualifiedNum <= maxQuailifiedNum) {
        if (isEdit.value) {
          specialUpdate(daywork.value);
        } else {
          specialSave(daywork.value);
        }
      } else {
        proxy.$modal.msgError(
          "合格数不能超过投产量的103%,最大合格数为" + maxQuailifiedNum
        );
      }
    }
  } else {
    if (isEdit.value) {
      specialUpdate(daywork.value);
    } else {
      specialSave(daywork.value);
    }
  }
}

/** 保存 */
function specialSave(data) {
  specialSaveDaywork(data).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功！");
      visible.value = false;
      reset();
      getList.value();
    } else {
      proxy.$modal.msgError("保存失败！");
    }
  });
}

/** 保存 */
function specialUpdate(data) {
  console.log("data", data);
  specialUpdateDaywork(data).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功！");
      visible.value = false;
      reset();
      getList.value();
    } else {
      proxy.$modal.msgError("保存失败！");
    }
  });
}

/** 报工新增报工信息按钮操作 */
function handleFirstTabAdd() {
  if (!lotClick.value) {
    proxy.$modal.msgError("请先确定批次");
    return;
  }
  console.log("请选择炉号", daywork.value.furnaceNoInfo);
  if (!daywork.value.furnaceNoInfo) {
    proxy.$modal.msgError("请选择炉号");
    return;
  }
  // 此处必须进行深拷贝，否则添加的明细，将都指向了一个对象
  const _newItem = JSON.parse(JSON.stringify(dayworkItem.value));
  dayworkItemList.value.push(_newItem);
}

/** 报工删除报工操作 */
function handleFirstTabDelete() {
  console.log(daywork.value.itemStatus);

  if (!lotClick.value) {
    proxy.$modal.msgError("请先确定批次");
    return;
  }

  const delRows = dayworkItemTable.value.getSelectionRows();

  if (delRows.length == 0) {
    proxy.$modal.msgError("请选择需要删除的数据");
    return;
  }
  proxy.$modal.confirm("是否确认删除选中数据？").then(() => {
    dayworkItemList.value = dayworkItemList.value.filter(
      (item) => !delRows.includes(item)
    );
  });
}

function handleFirstTabRowDelete(row) {
  console.log(daywork.value.itemStatus);

  const index = dayworkItemList.value.indexOf(row);
  proxy.$modal.confirm("是否确认删除选中数据？").then(() => {
    dayworkItemList.value.splice(index, 1);
  });
}

/** 选则工序方法 */
function handleProcessChange(arg) {
  const selectedProcessItem = processList.value.find(
    (item) => item.value === arg
  );

  daywork.value.processId = selectedProcessItem.processId;
  daywork.value.technologicalProcessId =
    selectedProcessItem.technologicalProcessId;
  daywork.value.technologicalProcessDetailId = arg;
  daywork.value.processStepNumber = selectedProcessItem.processStepNumber;
}

/** 选择炉号方法 */
function handleMiddleInfoChange(arg) {
  daywork.value.furnaceNoInfo = arg;
  console.log(arg);
}

/** 编辑时报工信息查询 */
function handleSelectSpecialInfo(row) {
  lotClick.value = true;
  Promise.all([
    getProcessList({
      deptId: deptId.value,
    }),
    getProcessListByLot({
      id: row.lotId,
      isWasteRecycling: row.isWasteRecycling,
      isAmend: row.isAmend,
      technologicalProcessId: row.technologicalProcessId,
    }),
    getDayworkItemAndFurnace({ id: row.id }),
  ]).then(([res, response, furnace]) => {
    /**
     * res查询工段内所有工序信息
     * response查询批次的工序信息
     * furnace查询批次的炉号、箱号、报工信息
     */
    let curProcessSequence = response.data;
    let daywoerkItems = furnace.data.dayworkItemList;

    let _newItem = daywoerkItems[0];
    dayworkItem.value.prodNum = _newItem.prodNum;
    dayworkItem.value.productionPlanDetailId = _newItem.productionPlanDetailId;
    dayworkItem.value.technologicalProcessId = _newItem.technologicalProcessId;
    dayworkItem.value.deptId = deptId.value;
    dayworkItem.value.deptName = dept.value.deptName;
    dayworkItem.value.lotId = _newItem.lotId;
    dayworkItem.value.processStepNumber = _newItem.processStepNumber;
    dayworkItem.value.technologicalProcessDetailId =
      _newItem.technologicalProcessDetailId;
    dayworkItem.value.processId = _newItem.processId;
    console.log("dayworkItem", dayworkItem.value);
    let filteredItems = daywoerkItems.filter(
      (item) => item.technologicalProcessDetailId === row.specialProcessId
    );

    // 使用sort方法按照id正序排列
    filteredItems.sort((a, b) => a.id - b.id);

    dayworkItemList.value = filteredItems;

    // 过滤前序 用最新一条报工的工序排序来进行筛选筛选出后面的工序
    curProcessSequence = curProcessSequence.filter(
      (v) => v.processStepNumber >= daywoerkItems[0].processStepNumber
    );

    processAlias.value = curProcessSequence;
    //过滤出的工序与工段能加工的工序取交集
    let filteredData = curProcessSequence.filter((item1) =>
      res.data.some((item2) => item2.processCode === item1.processCode)
    );

    //将工序交集放入下拉选的集合中
    processList.value = filteredData.map((v, index) => ({
      text: v.processAlias,
      value: v.technologicalProcessDetailId
        ? v.technologicalProcessDetailId
        : v.id,
      processId: v.processId,
      processStepNumber: v.processStepNumber,
      index: index,
    }));

    selectedProcess.value = row.specialProcessId;

    //赋值炉号数据
    furnaceNoInfo.value = furnace.data.furnaceNoInfo;
    daywork.value.furnaceNoInfo = furnaceNoInfo.value;

    //赋值箱号信息
    carriers.value = furnace.data.dayworkCarriers.map((v) => ({
      value: v.carrierId,
      label: v.carrierCode,
      category: v.categorId,
    }));
    daywork.value.dayworkCarriers = carriers.value.map((v) => ({
      carrierId: v.value,
      carrierCode: v.label,
      category: v.category,
    }));
    daywork.value.carrierIds = carriers.value.map((v) => v.value);
  });
}

/** 非首序报工选择批次查询操作 */
function handleNoFirstSelect(row) {
  proxy.$modal
    .confirm("是否确认批次，确认后不可修改")
    .then(function () {
      lotClick.value = true;
      daywork.value = row;
      console.log(daywork.value);
      daywork.value.itemStatus = performance.value ? 3 : 2;
      Promise.all([
        getProcessList({
          deptId: deptId.value,
        }),
        getProcessListByLot({
          id: row.lotId,
          isWasteRecycling: row.isWasteRecycling,
          isAmend: row.isAmend,
          technologicalProcessId: row.technologicalProcessId,
        }),
        getDayworkItemAndFurnace({ id: row.id }),
      ]).then(([res, response, furnace]) => {
        // 创建一个新数组，只包含要保留的数据
        const product = [row];
        productList.value = product;

        /**
         * res查询工段内所有工序信息
         * response查询批次的工序信息
         * furnace查询批次的炉号、箱号、报工信息
         */
        let curProcessSequence = response.data;
        let daywoerkItem = furnace.data.dayworkItemList;

        // 过滤前序 用最新一条报工的工序排序来进行筛选筛选出后面的工序
        curProcessSequence = curProcessSequence.filter(
          (v) => v.processStepNumber > daywoerkItem[0].processStepNumber
        );
        processAlias.value = curProcessSequence;
        //过滤出的工序与工段能加工的工序取交集
        let filteredData = curProcessSequence.filter((item1) =>
          res.data.some((item2) => item2.processCode === item1.processCode)
        );

        //将工序交集放入下拉选的集合中
        processList.value = filteredData.map((v, index) => ({
          text: v.processAlias,
          value: v.technologicalProcessDetailId
            ? v.technologicalProcessDetailId
            : v.id,
          processId: v.processId,
          processStepNumber: v.processStepNumber,
          technologicalProcessId: v.technologicalProcessId
            ? v.technologicalProcessId
            : v.lotTechnologicalProcessId,
          index: index,
        }));

        selectedProcess.value = processList.value[0].value;
        daywork.value.processId = processList.value[0].processId;
        daywork.value.technologicalProcessId =
          processList.value[0].technologicalProcessId;

        daywork.value.technologicalProcessDetailId = selectedProcess.value;
        daywork.value.processStepNumber =
          processList.value.findIndex(
            (v) => v.value === selectedProcess.value
          ) >= 0
            ? processList.value.find((v) => v.value === selectedProcess.value)
              .processStepNumber
            : null;

        dayworkItem.value.prodNum =
          row.processQualifiedNum == 0
            ? daywoerkItem[0].qualifiedNum
            : row.processQualifiedNum;
        dayworkItem.value.productionPlanDetailId =
          furnace.data.furnaceNoInfo.productionPlanDetailId;
        dayworkItem.value.deptId = deptId.value;
        dayworkItem.value.deptName = dept.value.deptName;
        dayworkItem.value.lotId = daywork.value.lotId;
        //赋值炉号数据
        furnaceNoInfo.value = furnace.data.furnaceNoInfo;

        daywork.value.furnaceNoInfo = furnaceNoInfo.value;

        //赋值箱号信息
        carriers.value = furnace.data.dayworkCarriers.map((v) => ({
          value: v.carrierId,
          label: v.carrierCode,
          category: v.categorId,
        }));
        daywork.value.dayworkCarriers = carriers.value.map((v) => ({
          carrierId: v.value,
          carrierCode: v.label,
          category: v.category,
        }));
        daywork.value.carrierIds = carriers.value.map((v) => v.value);
        console.log(daywork.value.itemStatus);
      });
    })
    .catch((err) => {
      console.log(err);
    });
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
<style scoped>
.leftInfo {
  color: #000;
  font-size: 15px;
  width: 120px;
  /* display: inline-block; */
}

.middleInfo {
  color: #000;
  font-size: 15px;
  width: 65px;
  display: inline-block;
}

.switch-container {
  font-size: 15px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.ml-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.table-container {
  max-width: 600px;
  /* 或者你希望的最大宽度 */
}

.rightInfo {
  font-size: 16px;
  padding-left: 0px;
}
</style>
