<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-input placeholder="请输入产品描述" v-model="queryParams.keywords" @blur="handleTrimQuarms"
            @keyup.enter="handleQueryProductionPlanDetail" @keydown.enter.prevent clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="生产计划单号：">
          <el-input placeholder="请输入生产计划单号" v-model="queryParams.productionPlanNo" @blur="handleTrimQuarms"
            @keyup.enter="handleQueryProductionPlanDetail" @keydown.enter.prevent clearable style="width: 200px" />
        </el-form-item>
        <el-form-item class="section-title" label="请选择当前工段：">
          <el-select-v2 v-model="queryParams.deptId" filterable :options="deptList" placeholder="请选择工段"
            style="width: 100%" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQueryProductionPlanDetail">
            搜索
          </el-button>
          <el-button type="success" icon="Download" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="planDetailTable" :data="detailPlanList" v-loading="detailLoading" highlight-current-row
            height="100%">
            <el-table-column label="客户简称" prop="companyAlias" width="120" align="center" />
            <el-table-column label="生产计划单号" prop="productionPlanNo" width="110" align="center" />
            <el-table-column label="序号" width="60" prop="lineNumber" align="center" />
            <el-table-column label="产品描述" prop="productDescription" align="center" />
            <el-table-column label="图纸版本" prop="technologyVersion" width="70" align="center" />
            <el-table-column label="计划总批数" prop="totalLotNumber" width="70" align="center" />
            <el-table-column label="在产批数" prop="inProduction" width="70" align="center" />
            <el-table-column label="已完成批数" prop="afterProduction" width="70" align="center" />
            <el-table-column label="未投产批数" prop="notProduction" width="70" align="center">
            </el-table-column>
            <el-table-column label="当前生产工段" prop="currentDepartment" width="100" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getProductionPlanDetail" />
  </div>
</template>
<script setup name="ProductionBatch">
import { ref } from "vue";
import { reportListPlanDetail } from "@/api/business/productionPlanDetail.js";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
import queryStore from "@/store/modules/query";
// import productionDialog from "./DialogProduction";
const { proxy } = getCurrentInstance();
/** 生产计划 */
const currentPlanDetail = ref({});
const detailPlanList = ref([]);
const detailLoading = ref(false);
const isDispatch = ref(false);
const total = ref(0);
/** 工段 */
const loading = ref(false);
const deptList = ref([]);
/** 查询对象 */
const queryParams = ref({
  deptId: "",
  keywords: "",
  pageNum: 1,
  pageSize: 10,
});

/***********************  方法区  ****************************/
/***********************  工段  ****************************/
/**
查询工段
 *
 */
function getList() {
  loading.value = true;
  getDeptList().then((response) => {
    deptList.value = response.data.rows;
    isDispatch.value = response.data.others.isDispatch;
    if (isDispatch.value) {
      deptList.value.unshift({ label: "全部", value: "0" });
    }
    queryParams.value.deptId = deptList.value[0].value;
    getProductionPlanDetail();
  });
  loading.value = false;
}
/**工段下拉框change事件 */
function handleDeptChange() {
  handlePlanDetailCurrentChange(currentPlanDetail.value);
}
/***********************  生产计划  ****************************/

/**查询计划明细 */
function getProductionPlanDetail() {
  detailLoading.value = true;
  console.log(queryParams.value);
  const listQueryParams = queryStore().reportPlanParams;
  if (listQueryParams != null) {
    queryParams.value = listQueryParams;
  }
  reportListPlanDetail(queryParams.value).then((res) => {
    detailPlanList.value = res.rows;
    total.value = res.total;
    detailLoading.value = false;
  });
}
/** 生产计划搜索按钮操作 */
function handleQueryProductionPlanDetail() {
  queryParams.value.pageNum = 1;
  const listQueryParams = JSON.parse(JSON.stringify(queryParams.value));
  queryStore().setReportPlanParams(listQueryParams);
  getProductionPlanDetail();
}
//查询生产计划单的领料信息
function handleCheckMarterialInfo(row) {
  proxy.$refs.checkMaterialRef.open(row);
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download('/ezhizao-dms-production/business/productionPlanDetail/download', {
    ...queryParams.value
  }, `报工日报${new Date().getTime()}.xlsx`)
}
function handleTrimQuarms(){
  queryParams.value.productionPlanNo = queryParams.value.productionPlanNo !=null&&queryParams.value.productionPlanNo !=""?queryParams.value.productionPlanNo.trim():null;
  queryParams.value.keywords = queryParams.value.keywords !=null&&queryParams.value.keywords !=""?queryParams.value.keywords.trim():null;
}

onMounted(() => {
  getList();
});
</script>
<style scoped>
.list-search-container-child .el-form-item {
  /* 修改样式 */
  margin-right: 10px;
}

.strike-through {
  text-decoration: line-through;
}
</style>