<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-drawer v-model="visible" size="90%" 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>
      </div>
      <!-- 主表 -->
      <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="产品描述：">
          <el-input placeholder="请输入产品描述" v-model.trim="queryParams.productDescription" style="width: 150px" clearable
            @keyup.enter="handleQuerydaywork" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item label="批次号：">
          <el-input placeholder="请输入批次号" v-model.trim="queryParams.lotCode" style="width: 130px" clearable
            @keyup.enter="handleQuerydaywork" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item label="图纸版本：">
          <el-select-v2 v-model="queryParams.technologyVersion" clearable :options="technologyVersionList"
            placeholder="请选择图纸版本" style="width: 160px" />
        </el-form-item>
        <el-form-item label="工段：">
          <el-select-v2 v-model="queryParams.deptId" clearable :options="deptList" placeholder="请选择工段"
            style="width: 140px" />
        </el-form-item>
        <el-form-item label="工序：">
          <el-select-v2 v-model="queryParams.processId" clearable :options="processList" placeholder="请选择工序"
            style="width: 140px" />
        </el-form-item>
        <el-form-item label="标识：">
          <el-select style="width: 160px" multiple v-model="queryParams.flags" collapse-tags collapse-tags-tooltip
            clearable placeholder="请选择标识">
            <el-option v-for="item in is_identification" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQuerydaywork">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <el-table ref="dayworkTable" v-loading="loading" row-key="id" height="100%" :data="lotList">
          <el-table-column type="index" label="行号" width="50" align="center" />
          <el-table-column label="客户简称" prop="companyAlias" align="center" />
          <el-table-column label="生产计划单号" width="100" prop="productionPlanNo" align="center" />
          <el-table-column label="批次号" prop="lotCode" align="center">
            <template #default="scope">
              <el-button link type="primary" v-hasPermi="['business:productionPlan:query']"
                @click="handleColumnClick(scope.row.lotCode)"><span>{{ scope.row.lotCode }}</span></el-button>
            </template>
          </el-table-column>
          <el-table-column label="产品描述" prop="productDescription" align="center" />
          <el-table-column label="图纸版本" width="80" prop="technologyVersion" align="center">
            <template #default="scope">
              {{ scope.row.technologyVersion }} {{ scope.row.isHistory == 1 ? '-历史' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="投产量" width="100" prop="productionQuantity" align="center" />
          <el-table-column label="下达日期" prop="createTime" width="100" align="center">
            <template #default="scope">
              <span>{{
                proxy.moment(scope.row.createTime).format("YYYY-MM-DD")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前工段" width="100" prop="deptName" align="center" />
          <el-table-column label="当前工序" width="120" prop="processAlias" align="center" />
          <el-table-column label="标识" width="300" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.isWaste == 1" class="spacing" type="danger">{{ "批废" }}</el-tag>
              <el-tag v-if="scope.row.isAmend == 1" class="spacing" type="danger">{{ "工艺修改" }}</el-tag>
              <el-tag v-if="scope.row.isWasteRecycling == 1" class="spacing" type="primary">{{ "废品回用" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="母批号" prop="fromCode" align="center">
            <template #default="scope">
              <el-button link type="primary" width="150px" @click="handleColumnClick(scope.row.fromCode)"><span>{{
                scope.row.fromCode }}</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { getProducedLot, getDeptList, getItemProcess } from "@/api/business/daywork.js";
import router from "@/router";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { is_identification } = proxy.useDict("is_identification");
/** 表单抽屉 页变量 */
const currentProductionPlan = ref({});
const loading = ref(false);
const lotList = ref([]);
const lotInfo = ref([]);
const visible = ref(false);
const processList = ref([]);
const technologyVersionList = ref([]);
const deptList = ref([]);
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  lotCode: "",
  deptId: null,
  processId: null,
  technologyVersion: null
});
const queryDeptParams = ref({
  lineNumber: "",
  productionPlanNo: "",
});

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (row) => {
  reset();
  currentProductionPlan.value = row;
  queryParams.value.lineNumber = row.lineNumber;
  queryParams.value.productionPlanNo = row.productionPlanNo;
  // queryParams.value.technologyVersion = row.technologyVersion;
  queryDeptParams.value.lineNumber = row.lineNumber;
  queryDeptParams.value.productionPlanNo = row.productionPlanNo;
  getDeptList(queryDeptParams.value).then((res) => {
    if (res.code == 200) {
      deptList.value = res.data;
      console.log("deptList", deptList);
    }
  });
  getItemProcess(queryParams.value).then((response) => {
    if (response.code == 200) {
      processList.value = response.data;
    }
  });
  //获取工段信息
  getProducedLotList();
  visible.value = true;
};
/** 打开批次详情页 */
function handleColumnClick(lotCode) {
  router.push({ path: "/reviseBath/lotFormParticulars/" + lotCode });
}
/**获取生产计划列表 */
function getProducedLotList() {
  technologyVersionList.value = [];
  loading.value = true;
  getProducedLot(queryParams.value).then((res) => {
    if (res.code == 200) {
      lotList.value = res.rows;
      for (let i = 0; i < res.rows.length; i++) {
        if (technologyVersionList.value.findIndex(item => item.value == res.rows[i].technologyVersion) == -1) {
          technologyVersionList.value.push({
            label: res.rows[i].technologyVersion,
            value: res.rows[i].technologyVersion
          })
        }
      }
      console.log(technologyVersionList.value)
      lotInfo.value = res.rows;
      loading.value = false;
    }
  });
}

/**搜索 */
function handleQuerydaywork() {
  getProducedLotList();
}
/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false;
}

/**搜索栏清空 */
function reset() {
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  queryParams.value.lotCode = null;
  queryParams.value.deptId = null;
  queryParams.value.technologyVersion = null

  proxy.resetForm("queryRef");
}

/** 取消按钮 */
const handleCancel = () => {
  visible.value = false;
};

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
<style scoped>
.hyperlink {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
</style>
