<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container" style="flex: 2">
      <!-- 搜索区 -->
      <el-form class="list-search-container" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="资源组" />
        <el-form-item class="section-title" label="请选择当前工段：">
          <el-select-v2 v-model="queryParams.deptId" :options="deptList" placeholder="请选择工段" style="width: 100%"
            @change="handleChangeDeptId" />
        </el-form-item>
        <el-form-item label="资源组名称：">
          <el-input placeholder="请输入资源组名称" v-model.trim="queryParams.code" style="width: 150px" clearable
            @keydown.enter.prevent />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" :disabled="deptList.length === 0" @click="handleQuery">搜索
          </el-button>
        </el-form-item>
      </el-form>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="resourceGroupTable" :data="resourceGroupList" v-loading="resourceGroupLoading"
            highlight-current-row height="100%" @current-change="handleResourceGroupCurrentChange">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="资源组名称" width="70" prop="code" align="center" />
            <el-table-column label="资源组人员" width="200" prop="nickName" align="center" />
            <el-table-column label="设备编码" width="120" align="center">
              <template #default="scope">
                <div v-for="(item, index) in scope.row.groupEquipmentList" :key="index">
                  <div style="height: auto">{{ item.commonCode }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="设备名称" align="center">
              <template #default="scope">
                <div v-for="(item, index) in scope.row.groupEquipmentList" :key="index">
                  <div style="height: auto">{{ item.commonName }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
    <!-- 右侧区域 -->
    <section class="list-part-container" style="flex: 2">
      <el-form class="list-search-container" :inline="true">
        <el-form-item class="section-title" label="生产计划" label-width="60px" />
        <el-form-item label="生产计划信息：">
          <el-input v-model.trim="queryItemParams.productionPlanNo" placeholder="请输入厂家/生产计划单号/产品描述" clearable
            style="width: 250px" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" :disabled="!currentResourceGroup.id" @click="handleQueryPlanDetails">搜索
          </el-button>
          <el-button type="primary" icon="Plus" :disabled="!currentResourceGroup.id"
            @click="handleOpenPlanDetailDialog()">新增
          </el-button>
          <el-button type="danger" icon="Delete" :disabled="!currentResourceGroup.id || planDetailIds.length == 0"
            @click="handleDeletePlanDetail()">批量删除
          </el-button>
        </el-form-item>
      </el-form>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="planDetailsTable" v-loading="planDetailLoading" row-key="id" :data="planDetailList"
            highlight-current-row height="100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column type="index" label="行号" width="50" align="center" />
            <el-table-column label="厂家" prop="companyAlias" width="150" align="center" />
            <el-table-column label="生产计划单号" prop="productionPlanNo" width="100" align="center">
              <template #default="scope">
                <el-button link type="primary" @click="handleColumnClick(scope.row.productionPlanNo)"><span>{{
                  scope.row.productionPlanNo
                    }}</span></el-button>
              </template></el-table-column>
            <el-table-column label="序号" width="60" prop="lineNumber" align="center" />
            <el-table-column label="产品描述" prop="productDescription" width="350" align="center" />
            <el-table-column label="投产日期" prop="issuanceDate" width="100" align="center">
              <template #default="scope">
                <span>{{
                  proxy.moment(scope.row.issuanceDate).format("YYYY-MM-DD")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="批次数" prop="lotTotalNumber" width="70" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="80" align="center">
              <template #default="scope">
                <el-button icon="delete" link type="danger" @click="handleDelPlanDetail(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="itemTotal > 0" :total="itemTotal" v-model:page="queryItemParams.pageNum"
        v-model:limit="queryItemParams.pageSize" @pagination="getPlanDetail" />
    </section>
    <!-- 生产计划分配弹窗 -->
    <plan-detail-dialog ref="planDetailRef" :multiple-selected="handlePlanDetailSelected"></plan-detail-dialog>
  </div>
</template>

<script setup>
import { listResourceGroup } from "@/api/business/resourceGroup.js";
import {
  listResourcePlan,
  saveBatchResourcePlan,
  delResourcePlan,
} from "@/api/business/resourcePlan.js";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
import planDetailDialog from "./form";
import { ref } from "vue";
import router from "@/router";
import productionPlanDetailStore from "@/store/modules/productionPlanDetail";
const route = useRoute();
const { proxy } = getCurrentInstance();

/**资源组*/
const resourceGroupList = ref([]);
const resourceGroupLoading = ref(false);

/** 生产计划 */
const planDetailList = ref([]);
const planDetailLoading = ref(false);
const planDetailIds = ref([]);
const currentResourceGroup = ref({});
const itemTotal = ref(0);
/**当前工段列表 */
const deptList = ref([]);
const loading = ref(false);

/** 查询对象 */
const queryItemParams = ref({
  resourceGroupId: "",
  deptId: "",
  pageNum: 1,
  pageSize: 10,
});
const queryParams = ref({
  resourceGroupId: "",
  deptId: null,
  pageNum: 1,
  pageSize: 10,
});

/***********************  方法区  ****************************/
/***********************  工段相关事件 ****************************/
/**
 * 查询生产批次列表
 * 由于生产计划批次列表是根据首序进行投产，所以不需要今天部门的获取
 *
 */
function getList() {
  loading.value = true;
  getDeptList().then((response) => {
    deptList.value = response.data.rows;
    console.log(deptList.value)
    if (deptList.value.length > 0) {
      queryParams.value.deptId = deptList.value[0].value;
      getResourceGroup();
    }
  });
  loading.value = false;
}

/**选择工段 */
function handleChangeDeptId(row) {
  queryParams.value.deptId = row;
  getResourceGroup();
}

/***********************  资源组相关事件  ****************************/
/** 查询资源组明细 */
function getResourceGroup() {
  resourceGroupLoading.value = true;
  listResourceGroup(queryParams.value).then((res) => {
    resourceGroupList.value = res.rows;
    resourceGroupLoading.value = false;
    if (resourceGroupList.value.length > 0) {
      proxy.$refs.resourceGroupTable.setCurrentRow(resourceGroupList.value[0]);
    }
  });
}
/** 打开批次详情页 */
function handleColumnClick(data) {
  console.log(data)
  productionPlanDetailStore().setProductionPlanNo(data)
  router.push({ path: "/select/dayworkSelect/" });
}

/**查询资源组 */
function handleQuery() {
  getResourceGroup();
}

/** 资源组 current-change 事件 */
function handleResourceGroupCurrentChange(row) {
  if (row) {
    currentResourceGroup.value = row;
    queryItemParams.value.resourceGroupId = currentResourceGroup.value.id;
    getPlanDetail();
  } else {
    planDetailList.value = [];
  }
}

/***********************  生产计划相关事件  ****************************/
/** 查询生产计划详情列表 */
const getPlanDetail = () => {
  planDetailLoading.value = true;
  listResourcePlan(queryItemParams.value).then((res) => {
    planDetailList.value = res.rows;
    itemTotal.value = res.total;
    planDetailLoading.value = false;
  });
};

/**查询生产计划 */
function handleQueryPlanDetails() {
  getPlanDetail();
}

/** 新增生产子计划 */
function handleOpenPlanDetailDialog() {
  var info = {};
  info.resourceGroupId = currentResourceGroup.value.id;
  info.deptId = queryParams.value.deptId;
  proxy.$refs.planDetailRef.open(info);
}

/** 生产计划批量删除*/
function handleSelectionChange(selection) {
  planDetailIds.value = selection.map((item) => item.id);
}

/**多选删除生产计划 */
function handleDeletePlanDetail() {
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      delResourcePlan(planDetailIds.value).then((res) => {
        getPlanDetail();
        proxy.$modal.msgSuccess("删除成功！");
      });
    })
    .catch(() => { });
}

/** 生产计划带回 */
function handlePlanDetailSelected(selection) {
  var planDetail = [];
  for (var i = 0; i < selection.length; i++) {
    var planDetailInfo = {};
    planDetailInfo.productionPlanDetailId = selection[i].id;
    planDetailInfo.productId = selection[i].productId;
    planDetailInfo.technologicalProcessId = selection[i].technologicalProcessId;
    planDetailInfo.resourceGroupId = currentResourceGroup.value.id;
    planDetailInfo.resourceGroupCode = currentResourceGroup.value.code;
    planDetailInfo.deptId = queryParams.value.deptId;
    planDetail.push(planDetailInfo);
  }
  saveBatchResourcePlan(planDetail).then((res) => {
    if (res.code === 200) {
      getPlanDetail();
      proxy.$modal.msgSuccess("保存成功");
    }
  });
}

/**生产计划删除 */
function handleDelPlanDetail(row) {
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      delResourcePlan(row.id).then((res) => {
        getPlanDetail();
        proxy.$modal.msgSuccess("删除成功！");
      });
    })
    .catch(() => { });
}

onMounted(() => {
  getList();
});
</script>
<style scoped></style>