<template>
  <div class="page-container column-container">
    <section class="list-part-container column-container" style="flex: 1">
      <!-- 搜索区 -->
      <el-form
        class="list-search-container"
        :model="queryParams"
        ref="queryRef"
        :inline="true"
      >
        <el-form-item class="section-title" label="产品管理" />
        <el-form-item label="产品类别：">
          <el-select
            v-model="queryParams.type"
            clearable
            placeholder="请选择类别"
            style="width: 130px"
          >
            <el-option
              v-for="dict in product_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户集团简称：">
          <el-input
            placeholder="请输入客户集团简称"
            v-model.trim="queryParams.companyAlias"
            style="width: 150px"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
          />
        </el-form-item>
        <el-form-item label="图号：">
          <el-input
            placeholder="请输入产品图号"
            v-model.trim="queryParams.drawingNumber"
            style="width: 130px"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
          />
        </el-form-item>
        <el-form-item label="规格：">
          <el-input
            placeholder="请输入产品规格"
            v-model.trim="queryParams.specification"
            style="width: 130px"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
          />
        </el-form-item>
        <el-form-item label="料号：">
          <el-input
            placeholder="请输入产品料号"
            v-model.trim="queryParams.productCode"
            style="width: 130px"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
          />
        </el-form-item>
        <el-form-item label="产品描述：">
          <el-input
            placeholder="请输入产品描述"
            v-model.trim="queryParams.description"
            style="width: 130px"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
          />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQueryProduct"
            >搜索</el-button
          >
          <el-button
            v-show="false"
            type="primary"
            icon="Plus"
            @click="handleAddProduct"
            v-hasPermi="['business:product:add']"
            >新增</el-button
          >
          <el-button
            type="primary"
            icon="Refresh"
            @click="handleSync"
            v-hasPermi="['business:product:sync']"
            >同步P2产品</el-button
          >
          <!-- <el-button
            v-if="true"
            type="warning"
            @click="handleImport"
            v-hasPermi="['business:product:sync']"
            >导出电子图纸</el-button
          > -->
        </el-form-item>
      </el-form>

      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table
            ref="productTable"
            v-loading="productLoading"
            :data="productList"
            row-key="id"
            highlight-current-row
            height="100%"
            @current-change="handleCurrentProductChange"
          >
            <el-table-column
              type="index"
              label="行号"
              width="50"
              align="center"
            />
            <el-table-column label="料号" align="center" prop="productCode" />
            <el-table-column label="预入仓库" align="center" prop="preStock" />
            <el-table-column label="类别" align="center" prop="type">
              <template #default="scope">
                <dict-tag :options="product_type" :value="scope.row.type" />
              </template>
            </el-table-column>
            <el-table-column
              label="轴类型大类"
              width="150px"
              align="center"
              prop="shaftBroadCategoryCode"
            >
              <template #default="scope">
                <dict-tag
                  :options="product_dtype"
                  :value="scope.row.shaftBroadCategoryCode"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="轴类型"
              align="center"
              prop="shaftCategoryCode"
            />
            <el-table-column label="规格" align="center" prop="specification" />
            <el-table-column
              label="图号"
              align="center"
              width="110"
              prop="drawingNumber"
            />
            <el-table-column
              label="客户集团简称"
              align="center"
              width="120px"
              prop="companyAlias"
            />
            <el-table-column
              label="产品描述"
              align="center"
              width="200px"
              prop="description"
            />
            <el-table-column label="直径" align="center" prop="diameter" />
            <el-table-column label="成品长度" align="center" prop="lenght" />
            <el-table-column label="厚度" align="center" prop="thickness" />
            <el-table-column
              label="客户代号"
              align="center"
              prop="companyCode"
            />
            <el-table-column
              label="销售员编码"
              align="center"
              prop="salesmanCode"
            />
            <el-table-column
              label="保管员编码"
              align="center"
              prop="stockKeeperCode"
            />
            <el-table-column
              label="调度员编号"
              align="center"
              prop="dispatcherCode"
            />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column
              label="产品状态"
              align="center"
              prop="productStatusCode"
            >
              <template #default="scope">
                <dict-tag
                  :options="product_status_code"
                  :value="scope.row.productStatusCode"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="生产类型"
              align="center"
              prop="productionTypeCode"
            >
              <template #default="scope">
                <dict-tag
                  :options="production_type_code"
                  :value="scope.row.productionTypeCode"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="技术员编码"
              align="center"
              prop="technicianCode"
            />
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="140px"
            >
              <template #default="scope">
                <el-button
                  v-show="false"
                  link
                  type="warning"
                  icon="Edit"
                  @click="handleUpdateProduct(scope.row)"
                  v-hasPermi="['business:product:edit']"
                  >编辑</el-button
                >
                <el-button
                  v-show="false"
                  link
                  type="danger"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['business:product:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
    <!-- <div class="relative-container" style="background-color: #ececec;">
			<div class="drawing-info" style="margin-left: 20px;">
			工艺图纸上线率：<span style="color: blue;font-size: 22px;">{{ drawingRatio }}%</span>
			</div> -->
    <!-- 分页 -->
    <!-- <div class="pagination-container"> -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- </div>
		</div> -->

    <section class="list-part-container row-container" style="flex: 1">
      <section class="list-part-container" style="flex: 1">
        <!-- 下边页面开始 -->
        <el-form
          class="list-search-container"
          :model="queryParams"
          ref="queryRef"
          :inline="true"
        >
          <el-form-item class="section-title" label="标准工艺" />
          <el-form-item>
            <el-button
              v-show="false"
              type="primary"
              icon="Plus"
              @click="handleAddTechnologicalProcess"
              v-hasPermi="['business:product:add']"
              :disabled="!currentProduct.id"
            >
              添加工艺
            </el-button>
            <el-button
              v-show="false"
              type="danger"
              icon="Delete"
              @click="TechnologicalProcessDelete"
              :disabled="technologicalProcessIds.length === 0"
              v-hasPermi="['business:product:remove']"
            >
              删除工艺
            </el-button>
          </el-form-item>
        </el-form>
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table
              ref="technologicalProcessTable"
              :data="technologicalProcessList ? technologicalProcessList : []"
              v-loading="technologicalProcessLoading"
              :row-key="getRowKey"
              highlight-current-row
              height="100%"
              size="small"
              header-row-class-name="list-header-row"
              @selection-change="TechnologicalProcessSelectionChange"
              @current-change="handleCurrentTechnologicalProcessChange"
            >
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column
                type="index"
                label="行号"
                width="50"
                align="center"
              />
              <el-table-column
                label="工艺版本"
                align="center"
                prop="technologyVersion"
              >
                <template #default="scope">
                  <div v-if="scope.row.editStatus">
                    <el-input
                      v-model.trim="scope.row.technologyVersion"
                      size="small"
                      placeholder="工艺版本"
                    />
                  </div>
                  <div v-else>{{ scope.row.technologyVersion }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="140px" align="center">
                <template #default="scope">
                  <el-button
                    v-show="false"
                    v-if="scope.row.editStatus"
                    link
                    type="primary"
                    icon="Check"
                    @click="
                      handleSaveTechnologicalProcess(scope.row, scope.$index)
                    "
                    v-hasPermi="['business:product:add']"
                  >
                    保存
                  </el-button>

                  <el-button
                    v-show="false"
                    v-else
                    link
                    type="warning"
                    icon="Edit"
                    @click.prevent="scope.row.editStatus = true"
                    v-hasPermi="['business:product:edit']"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-show="false"
                    link
                    type="danger"
                    icon="Delete"
                    @click="
                      handleDeleteTechnologicalProcess(scope.row, scope.$index)
                    "
                    v-hasPermi="['business:product:remove']"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </section>
      <section class="list-part-container" style="flex: 1">
        <el-form
          class="list-search-container list-search-container-child"
          :model="queryParams"
          ref="queryRef"
          :inline="true"
        >
          <el-form-item class="section-title" label="标准工序" />
          <el-form-item>
            <el-button
              v-show="false"
              v-if="!editStatus"
              @click="handleTechnologicalProcessDetailEdit"
              :disabled="
                technologicalProcessList.length === 0 ||
                currentTechnologicalProcess.id == null
              "
              v-hasPermi="['business:product:edit']"
              type="warning"
              icon="Edit"
            >
              编辑
            </el-button>
            <template v-if="editStatus">
              <el-button
                v-show="false"
                type="primary"
                icon="Plus"
                @click="handleAddProcess"
                v-hasPermi="['business:product:add']"
                :disabled="!currentTechnologicalProcess.id"
              >
                添加工序
              </el-button>
              <el-button
                v-show="false"
                type="danger"
                @click="handleTechnologicalProcessCancel"
                v-hasPermi="['business:product:edit']"
                icon="Close"
                >取消编辑</el-button
              >
            </template>
            <el-button
              v-show="false"
              type="success"
              v-if="editStatus"
              icon="Check"
              :disabled="technologicalprocessDetailList.length === 0"
              v-hasPermi="['business:product:add']"
              @click="handleTechnologicalProcessDetailAdd"
              >保存</el-button
            >
            <el-button
              v-show="false"
              type="danger"
              icon="Delete"
              v-if="!editStatus"
              @click="handledelTechnologicalProcessDetail"
              :disabled="technologicalProcessDetailIds.length === 0"
              v-hasPermi="['business:product:remove']"
            >
              删除工序
            </el-button>
          </el-form-item>
        </el-form>
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table
              :data="technologicalprocessDetailList"
              v-loading="technologicalprocessDetailLoading"
              :row-key="getRowKey"
              highlight-current-row
              height="100%"
              @selection-change="processDetailSelectionChange"
            >
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column
                type="index"
                label="行号"
                width="50"
                align="center"
              />
              <!-- <el-table-column label="工序步骤编号" width="100" align="center" prop="processStepNumber">
								<template #default="scope">
									<div v-if="scope.row.editStatus || editStatus">
										<el-input v-model.trim="scope.row.processStepNumber" size="small" placeholder="工序步骤编号" />
									</div>
									<div v-else>{{ scope.row.processStepNumber }}</div>
								</template>
							</el-table-column> -->
              <el-table-column
                label="工序编码"
                align="center"
                prop="processCode"
              />
              <el-table-column
                label="工序简称"
                align="center"
                prop="processAlias"
              />
              <el-table-column label="类型" align="center" prop="tenantId">
                <template #default="scope">
                  <dict-tag
                    :options="process_detail_type"
                    :value="scope.row.tenantId"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="电子图纸个数"
                align="center"
                prop="drawingNum"
              />
              <el-table-column
                v-if="!editStatus"
                label="操作"
                width="140px"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="handleShowResourceGroupDetailForm(scope.row)"
                    v-hasPermi="['business:drawing:list']"
                  >
                    图纸
                  </el-button>
                  <el-button
                    v-show="false"
                    v-if="scope.row.editStatus && !editStatus"
                    link
                    type="primary"
                    icon="Check"
                    @click="handleSaveTechnologicalProcessDetail(scope.row)"
                    v-hasPermi="['business:product:add']"
                  >
                    保存
                  </el-button>
                  <el-button
                    v-show="false"
                    v-else-if="!editStatus && !scope.row.editStatus"
                    link
                    type="warning"
                    icon="Edit"
                    @click.prevent="scope.row.editStatus = true"
                    v-hasPermi="['business:product:edit']"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-show="false"
                    link
                    type="danger"
                    icon="Delete"
                    @click="
                      handleDeleteTechnologicalProcessDetail(
                        scope.row,
                        scope.$index
                      )
                    "
                    v-hasPermi="['business:product:remove']"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </section>
    </section>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <!-- <div class="el-upload__tip">
                            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                        </div> -->
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="handleExport"
              >下载模板</el-link
            >
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 产品表单 -->
    <product-form
      ref="productRef"
      @handleSaveSuccess="handleQueryProduct"
    ></product-form>
    <!-- 工序弹窗 -->
    <process-choice
      ref="processChoiceRef"
      :multiple-selected="handleProcessSelected"
    ></process-choice>
    <!-- 图纸弹窗 -->
    <drawing ref="drawingForm" :handleRefresh="handleRefreshDrawing" />
  </div>
</template>

<script setup>
import {
  listProduct,
  delProduct,
  getProductTotal,
} from "@/api/business/product";
import { getP2Product } from "@/api/business/p2.js";
import productForm from "./form";
import processChoice from "./DialogProcessChoice";
import { getProcuctDrawing } from "@/api/business/drawing";
import drawing from "./drawingForm";
import { getToken } from "@/utils/auth";
import {
  listTechnologicalProcessDetail,
  saveTechnologicalProcessDetail,
  delTechnologicalProcessDetail,
  saveSingleTechnologicalProcessDetail,
} from "@/api/business/technologicalProcessDetail";
import {
  listTechnologicalProcess,
  saveTechnologicalProcess,
  delTechnologicalProcess,
} from "@/api/business/technologicalProcess";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { product_type } = proxy.useDict("product_type");
const { process_detail_type } = proxy.useDict("process_detail_type");
const { product_dtype } = proxy.useDict("product_dtype");
const { product_status_code } = proxy.useDict("product_status_code");
const { production_type_code } = proxy.useDict("production_type_code");
const productTotal = ref(0);
/** 产品变量 */
const productList = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const productLoading = ref(false);
const ids = ref([]);
const total = ref(0);
const currentProduct = ref({});
const productDrawing = ref(0);
/** 工艺变量 */
const technologicalProcessList = ref([]);
const technologicalProcessLoading = ref(false);
const technologicalProcessIds = ref([]);
const drawingRatio = ref(0);
const currentTechnologicalProcess = ref({});
const technologicalProcessAddMultiple = ref(true);
const detailsRow = {
  id: null,
  tenantId: null,
  technologyVersion: undefined,
  productCode: undefined,
  productShaftCategory: undefined,
  productShaftCategoryName: undefined,
  productDescription: undefined,
};
/** 工序变量 */
const technologicalprocessDetailList = ref([]);
const technologicalprocessDetailLoading = ref(false);
const technologicalProcessDetailIds = ref([]);
const single = ref(true);
const editStatus = ref(false);
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/business/drawing/importData",
});
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  code: "",
  name: "",
  combinedValue: null,
  productCode: "",
});

/***********************  方法区  ****************************/
/***********************  产品管理  ****************************/
/** 查询产品管理列表
 * 进入页面产品表第一条和工艺表第一条默认选中
 */
function getList() {
  productLoading.value = true;

  listProduct(queryParams.value).then((response) => {
    productList.value = response.rows;
    total.value = response.total;
    productLoading.value = false;
    if (productList.value.length > 0) {
      proxy.$refs.productTable.setCurrentRow(productList.value[0]);
    } else {
      technologicalProcessList.value = [];
      technologicalprocessDetailList.value = [];
    }
    //0712查询当前产品的图纸数量
    getProcuctDrawing().then((res) => {
      console.log(res, 4446);
      productDrawing.value = res.data;
      getProductTotal().then((response) => {
        console.log(response.data);
        productTotal.value = response.data;
        drawingRatio.value = (
          (productDrawing.value / productTotal.value) *
          100
        ).toFixed(2);
      });
    });
  });
}
/**
 * 产品的 current change 事件
 * 要获取工艺列表
 */
function handleCurrentProductChange(row) {
  if (row) {
    currentProduct.value = row;
    editStatus.value = false;
    getTechnologicalProcesses(0);
  }
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert(
    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      response.msg +
      "</div>",
    "导入结果",
    { dangerouslyUseHTMLString: true }
  );
  // getList();
};
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

/** 导入按钮操作 */
function handleImport() {
  upload.title = "导入电子图纸";
  upload.open = true;
}
/** 产品搜索按钮操作 */
function handleQueryProduct() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 产品新增按钮操作 */
function handleAddProduct() {
  proxy.$refs.productRef.open();
}

/** 产品修改按钮操作 */
function handleUpdateProduct(row) {
  const id = row.id || ids.value;
  proxy.$refs.productRef.open(id);
}
/** 删除产品表操作 */
function handleDelete(row) {
  const _ids = row.id;
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      delProduct(_ids).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功！");
      });
    })
    .catch(() => {});
}

/***********************  标准工艺  ****************************/
// 获取工艺列表
const getTechnologicalProcesses = (index) => {
  technologicalProcessLoading.value = true;
  listTechnologicalProcess({
    productId: currentProduct.value.id,
    isHistory: 0,
  }).then((res) => {
    technologicalProcessList.value = res.rows;
    technologicalProcessLoading.value = false;
    if (technologicalProcessList.value.length > 0) {
      proxy.$refs.technologicalProcessTable.setCurrentRow(
        technologicalProcessList.value[index]
      );
    } else {
      technologicalProcessList.value = [];
      technologicalprocessDetailList.value = [];
    }
  });
};
/**
 * 工艺的 current change 事件
 * 要获取工序列表
 */
function handleCurrentTechnologicalProcessChange(row) {
  editStatus.value = false;
  if (row) {
    technologicalProcessAddMultiple.value = true;
    technologicalprocessDetailLoading.value = true;
    currentTechnologicalProcess.value = row;
    technologicalProcessAddMultiple.value = false;
    getTechnologicalProcessDetails();
  } else {
    technologicalprocessDetailList.value = [];
  }
  technologicalprocessDetailLoading.value = false;
}
/** 工艺表多选框选中数据 */
function TechnologicalProcessSelectionChange(selection) {
  technologicalProcessIds.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
}
/**
 * 工艺保存 事件
 * 添加工艺操作：添加后，执行刷新操作，重新查找工艺表内容，并通过绑定添加行的下标来选中，从而获得row
 */
function handleSaveTechnologicalProcess(row, index) {
  if (!row.technologyVersion) {
    proxy.$modal.msgError("工艺版本不能为空！");
  } else {
    if (
      row.technologyVersion !== "A" &&
      row.technologyVersion !== "B" &&
      row.technologyVersion !== "C"
    ) {
      proxy.$modal.msgError("工艺版本只能填写A、B、C");
    } else {
      row.productId = currentProduct.value.id;
      saveTechnologicalProcess(row).then((response) => {
        if (response.code == 200) {
          getTechnologicalProcesses(index);
          proxy.$modal.msgSuccess("操作成功！");
        }
      });
      row.editStatus = false;
    }
  }
}
/** 工艺添加操作 */
const handleAddTechnologicalProcess = () => {
  const newDetail = JSON.parse(JSON.stringify(detailsRow));
  newDetail.editStatus = true;
  newDetail.productCode = currentProduct.value.productCode;
  newDetail.productId = currentProduct.value.id;
  newDetail.productShaftCategoryId = currentProduct.value.shaftCategoryId;
  newDetail.productDrawingNumber = currentProduct.value.drawingNumber;
  newDetail.productDescription = currentProduct.value.description;
  newDetail.productSpecification = currentProduct.value.specification;
  newDetail.tenantId = currentProduct.value.tenantId;
  newDetail.technologyVersion = "";
  technologicalProcessList.value.push(newDetail);
};
/** 工艺添加取消操作 */
const handleSync = () => {
  productLoading.value = true;
  getP2Product(queryParams.value).then((res) => {
    getList();
  });
};

/** 单条删除工艺操作
 * 删除已经存在的数据-即row.id存在，执行一个对话框选择，如果确认则执行删除方法，并重新查询工艺表操作，
 * 让工艺表第一条默认选中
 * 删除未保存的苏剧-即row.id不存在，通过splice方法，通过下标删除数组的元素
 */
function handleDeleteTechnologicalProcess(row, index) {
  if (row.id) {
    proxy.$modal
      .confirm("是否确认删除选中的数据项？")
      .then(function () {
        return delTechnologicalProcess(row.id);
      })
      .then(() => {
        getTechnologicalProcesses(0);
        proxy.$modal.msgSuccess("删除成功！");
      });
  } else {
    technologicalProcessList.value.splice(index, 1);
    getTechnologicalProcesses(0);
  }
}

/** 工艺表批量删除操作
 * 通过多选框选中方法，获得选中的工艺id，执行删除，山删除后，重新通过产品id获得工艺列表
 */
function TechnologicalProcessDelete() {
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      return delTechnologicalProcess(technologicalProcessIds.value);
    })
    .then(() => {
      getTechnologicalProcesses(0);
      proxy.$modal.msgSuccess("删除成功！");
    });
}

/***********************  标准工序  ****************************/
// 获取工序列表
const getTechnologicalProcessDetails = () => {
  if (!currentTechnologicalProcess.value.id) {
    technologicalprocessDetailList.value = [];
  } else {
    technologicalprocessDetailLoading.value = true;
    listTechnologicalProcessDetail({
      technologicalProcessId: currentTechnologicalProcess.value.id,
    }).then((res) => {
      technologicalprocessDetailList.value = res.rows;
      technologicalprocessDetailLoading.value = false;
    });
  }
};

/** 点击工序编辑按钮 */
function handleTechnologicalProcessDetailEdit() {
  editStatus.value = true;
}

/**点击工序取消编辑按钮 */
function handleTechnologicalProcessCancel() {
  editStatus.value = false;
  getTechnologicalProcessDetails();
}

/** 单条删除工序操作 */
function handleDeleteTechnologicalProcessDetail(row, index) {
  if (!row.id) {
    technologicalprocessDetailList.value.splice(index, 1);
  } else {
    delTechnologicalProcessDetail(row.id).then((res) => {
      if (res.code == 200) {
        getTechnologicalProcessDetails();
        proxy.$modal.msgSuccess("删除成功");
      }
    });
  }
}

/** 单条保存工序操作*/
function handleSaveTechnologicalProcessDetail(row) {
  if (!row.processStepNumber) {
    proxy.$modal.msgError("工序步骤编号不能为空");
  } else {
    saveSingleTechnologicalProcessDetail(row).then((res) => {
      if (res.code == 200) {
        getTechnologicalProcessDetails();
        proxy.$modal.msgSuccess("保存成功");
        row.editStatus = false;
      }
    });
  }
}
//工序多选框选中数据
function processDetailSelectionChange(selection) {
  technologicalProcessDetailIds.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
}
/** 获取行 id */
function getRowKey(row) {
  return row.id;
}
/** 工序表多选带回保存
 * 将弹出框选中的内容保存到工序表
 */
function handleProcessSelected(selection) {
  for (var i = 0; i < selection.length; i++) {
    var technologicalProcessDetailAdd = {};
    technologicalProcessDetailAdd.tenantId = currentProduct.value.tenantId;
    technologicalProcessDetailAdd.technologicalProcessId =
      currentTechnologicalProcess.value.id;
    technologicalProcessDetailAdd.productId = currentProduct.value.id;
    technologicalProcessDetailAdd.productCode =
      currentProduct.value.productCode;
    technologicalProcessDetailAdd.processId = selection[i].id;
    technologicalProcessDetailAdd.processAlias = selection[i].processAlias;
    technologicalProcessDetailAdd.processCode = selection[i].processCode;
    technologicalProcessDetailAdd.productShaftCategory =
      currentProduct.value.shaftCategoryCode;
    technologicalProcessDetailAdd.productShaftCategoryName =
      currentProduct.value.productShaftCategoryName;
    technologicalProcessDetailAdd.productDescription =
      currentProduct.value.remark;
    technologicalprocessDetailList.value.push(technologicalProcessDetailAdd);
  }
}
/** 保存工序 */
function handleTechnologicalProcessDetailAdd() {
  for (var i = 0; i < technologicalprocessDetailList.value.length; i++) {
    if (!technologicalprocessDetailList.value[i].processStepNumber) {
      proxy.$modal.msgError("第" + (i + 1) + "行工序序号不能为空！");
      return;
    }
  }
  saveTechnologicalProcessDetail(technologicalprocessDetailList.value).then(
    (res) => {
      if (res.code == 200) {
        getTechnologicalProcessDetails();
        proxy.$modal.msgSuccess("操作成功！");
      }
    }
  );
  editStatus.value = false;
}
/** 工序表批量删除操作
 * 通过多选框获得选中的工序id，执行删除操作后执行查询操作
 */
function handledelTechnologicalProcessDetail() {
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      return delTechnologicalProcessDetail(technologicalProcessDetailIds.value);
    })
    .then(() => {
      getTechnologicalProcessDetails();
      proxy.$modal.msgSuccess("删除成功！");
    });
}

/** 添加工序 */
function handleAddProcess() {
  proxy.$refs.processChoiceRef.open();
}

/**
 * 打开图纸抽屉
 */
function handleShowResourceGroupDetailForm(row) {
  console.log(row);
  proxy.$refs.drawingForm.open(row);
}

function handleRefreshDrawing() {
  console.log(124);
  handleCurrentTechnologicalProcessChange(currentTechnologicalProcess.value);
}
/** 导出按钮操作 */
function handleExport() {
  var item = {};
  proxy.download(
    baseUrl + "/business/drawing/export",
    {
      ...item,
    },
    `电子图纸_${new Date().getTime()}.xlsx`
  );
}
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
onMounted(() => {
  getList();
});
</script>
<style scoped>
.relative-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  /* 使文本和分页组件分别靠近容器的两端 */
  align-items: center;
}

.drawing-info {
  /* 根据需要添加样式，例如字体大小、颜色等 */
  flex-shrink: 0;
  /* 防止文本压缩 */
}

.pagination-container {
  /* flex-grow: 1; 让分页容器占据剩余空间 */
  text-align: center;
  /* 确保分页组件内的文本居中显示 */
  margin-bottom: 5px;
  margin-right: 8px;
}
</style>