<template>
  <div class="page-container row-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: 150px"
          >
            <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"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="图号：">
          <el-input
            placeholder="请输入产品图号"
            v-model.trim="queryParams.drawingNumber"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="规格：">
          <el-input
            placeholder="请输入产品规格"
            v-model.trim="queryParams.specification"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="料号：">
          <el-input
            placeholder="请输入产品料号"
            v-model.trim="queryParams.productCode"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="产品描述：">
          <el-input
            placeholder="请输入产品描述"
            v-model.trim="queryParams.description"
            clearable
            @keyup.enter="handleQueryProduct"
            @keydown.enter.prevent
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQueryProduct"
            >搜索</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%"
          >
            <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
                  link
                  type="primary"
                  v-hasPermi="['business:standards:query']"
                  @click="handleProduct(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </section>
    <el-drawer
      v-model="openVersoinForm"
      size="30%"
      direction="rtl"
      :close-on-press-escape="false"
    >
      <div class="page-container form-container">
        <div class="form-btns-container">
          <span class="title-label"
            ><el-icon>
              <Document />
            </el-icon>
            检查标准维护</span
          >
        </div>
        <!-- 搜索区域 -->
        <el-form class="list-search-container" :inline="true">
          <el-form-item label="图纸版本：">
            <el-select-v2
              v-model="currentTechnological.id"
              clearable
              :options="technologicalProcessList"
              placeholder="请选择版本"
              @change="handelTechnological"
              style="width: 220px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="el-table-inner-container" style="padding-bottom: 30px">
        <el-table
          :data="technologicalprocessDetailList"
          v-loading="technologicalprocessDetailLoading"
          :row-key="getRowKey"
          highlight-current-row
          height="100%"
        >
          <el-table-column
            label="工序步骤编号"
            width="100px"
            align="center"
            prop="processStepNumber"
          >
            <template #default="scope">
              <div>{{ scope.row.processStepNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="工序编码"
            width="80px"
            align="center"
            prop="processCode"
          />
          <el-table-column
            label="工序简称"
            align="center"
            prop="processAlias"
          />
          <!-- <el-table-column
            label="图纸个数"
            align="center"
            width="60px"
            prop="drawingNum"
          /> -->
          <el-table-column label="操作" width="80px" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                v-hasPermi="['business:standards:edit']"
                @click="handelDrawing(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script setup name="Process">
import { listProduct, getTechnological } from "@/api/business/product";
import { listTechnologicalProcessDetail } from "@/api/business/technologicalProcessDetail";
import router from "@/router";

const { proxy } = getCurrentInstance();
/**字典 */
const { product_type } = proxy.useDict("product_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 productList = ref([]);
const productLoading = ref(false);
const total = ref(0);
const openVersoinForm = ref(false);
const currentProduct = ref({});
const ids = ref([]);
const currentTechnological = ref({});
//版本
const technologicalProcessList = ref([]);
/** 工序变量 */
const technologicalprocessDetailList = ref([]);
const technologicalprocessDetailLoading = ref(false);
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  code: "",
  name: "",
  combinedValue: null,
  productCode: "",
});

const yesOrNo = [
  { label: "是", value: "1", elTagType: "primary", elTagClass: "" },
  { label: "否", value: "0", elTagType: "danger", elTagClass: "" },
];

/***********************  方法区  ****************************/
/***********************  部门管理相关事件  ****************************/
/** 查询产品列表 */
function getList() {
  currentTechnological.value = {};
  currentProduct.value = {};
  productLoading.value = true;
  listProduct(queryParams.value).then((response) => {
    productList.value = response.rows;
    total.value = response.total;
    productLoading.value = false;
  });
}
/**产品查询 */
function handleQueryProduct() {
  queryParams.value.pageNum = 1;
  getList();
}
function handleProduct(row) {
  technologicalprocessDetailList.value = [];
  openVersoinForm.value = true;
  currentTechnological.value = {};
  console.log(row);
  currentProduct.value = row;
  var technological = {};
  technological.productId = row.id;
  getTechnological(technological).then((res) => {
    if (res.code == 200) {
      technologicalProcessList.value = res.data;

      if (technologicalProcessList.value.length > 0) {
        currentProduct.value.technologicalprocessId =
          technologicalProcessList.value[0].value;
        currentProduct.value.productVersion =
          technologicalProcessList.value[0].label;
        currentTechnological.value.id = technologicalProcessList.value[0].value;
        currentTechnological.value.productVersion =
          technologicalProcessList.value[0].label;
        handelDetails();
      }
    }
  });
}

function handelTechnological() {
  if (currentTechnological.value.id) {
    currentProduct.value.technologicalprocessId = currentTechnological.value.id;
    currentProduct.value.productVersion = technologicalProcessList.value.find(
      (item) => item.value === currentTechnological.value.id
    ).label;
    handelDetails();
  }
}

function handelDetails() {
  technologicalprocessDetailLoading.value = true;
  listTechnologicalProcessDetail({
    technologicalProcessId: currentTechnological.value.id,
  }).then((res) => {
    technologicalprocessDetailList.value = res.rows;
    technologicalprocessDetailLoading.value = false;
  });
}

function handelDrawing(row) {
  currentProduct.value.processCode = row.processCode;
  router.push({
    path: `/standards/detail/${currentProduct.value.id}/${currentProduct.value.productVersion}/${row.processCode}`,
  });
}
/** 获取行 id */
function getRowKey(row) {
  return row.id;
}
onMounted(() => {
  getList();
});
</script>
