<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container">
      <!-- 搜索区域 -->
      <el-form
        class="list-search-container"
        :inline="true"
        style="display: flex"
      >
        <el-form-item class="section-title" label="工段列表" />
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table
            ref="workSectionTable"
            v-loading="workSectionLoading"
            :data="workSectionList"
            row-key="id"
            height="100%"
            highlight-current-row
            @current-change="handleWorkSectionChange"
          >
            <el-table-column
              label="行号"
              type="index"
              width="50"
              align="center"
            />
            <el-table-column
              label="工段编码"
              prop="deptCode"
              width="80"
              align="center"
            />
            <el-table-column label="工段名称" prop="label" align="center" />
          </el-table>
        </div>
      </div>
    </section>

    <!-- 右侧区域 -->
    <section class="list-part-container column-container" style="flex: 3">
      <section class="list-part-container row-container" style="flex: 1">
        <section class="list-part-container">
          <!-- 搜索区域 -->
          <el-form
            class="list-search-container"
            :inline="true"
            style="display: flex"
          >
            <el-form-item class="section-title" label="资源组" />
            <el-form-item>
              <el-button
                type="primary"
                icon="Plus"
                :disabled="workSectionList.length === 0"
                @click="handleShowResourceGroupDetailForm()"
                v-hasPermi="['business:deptEquipment:add']"
                >新增</el-button
              >
            </el-form-item>
            <el-form-item label="资源组名称：">
              <el-input
                v-model.trim="queryParams.code"
                type="text"
                style="width: 200px"
                :disabled="workSectionList.length === 0"
                placeholder="请输入资源组名称"
                :clearable="true"
                @keydown.enter.prevent
                @keyup.enter="handleQueryResourceGroup"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="info"
                icon="Search"
                :disabled="workSectionList.length === 0"
                @click="handleQueryResourceGroup"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 列表区 -->
          <div class="el-table-container">
            <div class="el-table-inner-container">
              <el-table
                ref="groupTable"
                v-loading="groupLoading"
                :data="groupList"
                row-key="id"
                height="100%"
                highlight-current-row
                @current-change="handleGroupChange"
              >
                <el-table-column
                  label="行号"
                  type="index"
                  width="50"
                  align="center"
                />
                <el-table-column
                  label="资源组名称"
                  prop="code"
                  align="center"
                />
                <el-table-column label="操作" width="150" align="center">
                  <template #default="scope">
                    <el-button
                      icon="edit"
                      link
                      type="warning"
                      @click="handleShowResourceGroupDetailForm(scope.row)"
                      v-hasPermi="['business:deptEquipment:edit']"
                      >编辑
                    </el-button>
                    <el-button
                      icon="delete"
                      link
                      type="danger"
                      @click="handledelGroup(scope.row)"
                      v-hasPermi="['business:deptEquipment:remove']"
                      >删除
                    </el-button>
                  </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"
            style="display: flex"
          >
            <el-form-item
              class="section-title"
              label="资源组明细"
              label-width="70px"
            />
            <el-form-item label="资源明细：">
              <el-input
                v-model.trim="queryResourceGroupDetailParams.commonCode"
                type="text"
                style="width: 220px"
                placeholder="请输入资源编码/资源名称"
                :clearable="true"
                :disabled="groupList.length === 0"
                @keydown.enter.prevent
                @keyup.enter="handleQueryResourceGroupDetail"
              />
            </el-form-item>
            <el-form-item style="margin-right: 0px">
              <el-button
                type="info"
                icon="Search"
                :disabled="groupList.length === 0"
                @click="handleQueryResourceGroupDetail"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 列表区 -->
          <div class="el-table-container">
            <div class="el-table-inner-container">
              <el-table
                ref="groupDetailTable"
                v-loading="groupDetailLoading"
                :data="groupDetailList"
                row-key="id"
                height="100%"
                highlight-current-row
              >
                <el-table-column
                  label="行号"
                  type="index"
                  width="50"
                  align="center"
                />
                <el-table-column
                  label="资源编码"
                  prop="commonCode"
                  width="80"
                  align="center"
                />
                <el-table-column
                  label="资源名称"
                  prop="commonName"
                  align="center"
                />
                <el-table-column
                  label="资源类别"
                  prop="commonType"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <dict-tag
                      :options="resource_group_detail"
                      :value="scope.row.commonType"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </section>
      </section>

      <section class="list-part-container column-container" style="flex: 1">
        <el-form class="list-search-container" :inline="true">
          <el-form-item class="section-title" label="添加工序" />
          <el-form-item>
            <el-button
              type="primary"
              icon="Plus"
              :disabled="workSectionList.length === 0"
              @click="handleShowProcessFormDialog()"
              v-hasPermi="['business:deptEquipment:add']"
              >新增</el-button
            >
            <el-button
              type="danger"
              icon="Delete"
              @click="handledelDeptProcess"
              :disabled="deptProcessIds.length === 0"
              v-hasPermi="['business:deptEquipment:remove']"
            >
              删除
            </el-button>
          </el-form-item>
          <el-form-item label="工序名称：">
            <el-input
              v-model.trim="queryDeptProcessParams.processAlias"
              placeholder="请输入工序名称"
              :disabled="workSectionList.length === 0"
              clearable
              style="width: 155px"
              @keyup.enter="handleQueryProcess"
              @keydown.enter.prevent
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="info"
              icon="Search"
              :disabled="workSectionList.length === 0"
              @click="handleQueryProcess"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table
              v-loading="deptProcessLoading"
              :data="deptProcessList"
              row-key="id"
              height="100%"
              @selection-change="deptProcessSelectionChange"
            >
              <el-table-column
                type="selection"
                width="40"
                align="center"
                :reserve-selection="true"
              />
              <el-table-column
                label="行号"
                type="index"
                width="50"
                align="center"
              />
              <el-table-column
                label="工序编码"
                prop="processCode"
                align="center"
              />
              <el-table-column
                label="工序名称"
                prop="processAlias"
                align="center"
              />
            </el-table>
          </div>
        </div>
        <pagination
          v-show="deptProcessTotal > 0"
          :total="deptProcessTotal"
          v-model:page="queryDeptProcessParams.pageNum"
          v-model:limit="queryDeptProcessParams.pageSize"
          @pagination="getDeptProcess"
        />
      </section>
    </section>
    <!-- 资源组明细表单 -->
    <resource-group-form
      ref="resourceGroupFormRef"
      @handleSaveResourceSuccess="handleRefreshEquipment"
    />
    <!-- 工序弹窗 -->
    <process-dialog
      ref="processFormRef"
      :multipleSelected="handleProcessMultipleSelected"
      @handleSaveSuccess="handleRefreshProcess"
    />
  </div>
</template>

<script setup>
import { workSectionTree } from "@/api/system/dept";
import {
  listResourceGroup,
  delResourceGroup,
} from "@/api/business/resourceGroup";
import { listGroupDetail } from "@/api/business/resourceGroupDetail";
import {
  listDeptProcess,
  addDeptProcess,
  delDeptProcess,
} from "@/api/business/deptProcess";
import resourceGroupForm from "./form";
import processDialog from "./DialogProcessChoice";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { resource_group_detail } = proxy.useDict("resource_group_detail");
/** 查询对象 */
const data = reactive({
  form: {},
  queryDeptParams: {
    deptName: "",
    deptCode: "",
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    code: "",
  },
  queryResourceGroupDetailParams: {
    code: "",
    productionResourceGroupId: "",
  },
  queryDeptProcessParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const {
  queryParams,
  queryDeptProcessParams,
  queryDeptParams,
  queryResourceGroupDetailParams,
} = toRefs(data);
/** 页面变量 */
/**工段 */
const workSectionList = ref([]);
const workSectionLoading = ref(false);
const currentWorkSection = ref({});
/**资源组 */
const currentGroup = ref({});
const groupList = ref([]);
const groupLoading = ref(false);
/**资源组明细 */
const groupDetailLoading = ref(false);
const groupDetailList = ref([]);
/**工序 */
const deptProcessList = ref([]);
const deptProcessLoading = ref(false);
const deptProcessTotal = ref(0);
const deptProcessIds = ref([]);
const single = ref(true);

/****************************  工段方法区  ****************************/

/** 获取工段列表 */
function getWorkSections() {
  workSectionLoading.value = true;
    //如果当前登录人不是管理员传true；否则传false
    queryDeptParams.value.getType = true
  workSectionTree(queryDeptParams.value).then((res) => {
    workSectionList.value = res.data;
    if (workSectionList.value.length > 0) {
      proxy.$refs.workSectionTable.setCurrentRow(workSectionList.value[0]);
    } else {
      workSectionList.value = [];
    }
    workSectionLoading.value = false;
  });
}
/**工段点击事件 */
const handleWorkSectionChange = (row) => {
  queryParams.value.code = "";
  queryResourceGroupDetailParams.value.commonCode = "";
  queryDeptProcessParams.value.processAlias = "";
  if (row) {
    currentWorkSection.value = row;
    queryParams.value.deptId = row.id;
    getResourceGroup();
    getDeptProcess();
  }
};

/****************************  资源组方法区  ****************************/
/**获取资源组 */
function getResourceGroup() {
  groupLoading.value = true;
  listResourceGroup(queryParams.value).then((res) => {
    if (res.code == 200) {
      groupList.value = res.rows;
      if (groupList.value.length > 0) {
        currentGroup.value = groupList.value[0];
        proxy.$refs.groupTable.setCurrentRow(groupList.value[0]);
      } else {
        groupDetailList.value = [];
      }
    }
    groupLoading.value = false;
  });
}
/**资源组搜索 */
function handleQueryResourceGroup() {
  getResourceGroup();
}
/**资源组点击事件 */
function handleGroupChange(row) {
  queryResourceGroupDetailParams.value.commonCode = "";
  if (row) {
    currentGroup.value = row;
    getResourceGroupDetail();
  }
}
/**删除资源组 */
function handledelGroup(row) {
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      return delResourceGroup(row.id);
    })
    .then(() => {
      handleWorkSectionChange(currentWorkSection.value);
      proxy.$modal.msgSuccess("删除成功！");
    });
}

/** 打开资源组明细表单 */
function handleShowResourceGroupDetailForm(row) {
  if (row) {
    row.deptId = currentWorkSection.value.id;
    proxy.$refs.resourceGroupFormRef.open(row);
  } else {
    var item = {};
    item.deptId = currentWorkSection.value.id;
    proxy.$refs.resourceGroupFormRef.open(item);
  }
}

/** 刷新资源组事件 */
function handleRefreshEquipment() {
  handleWorkSectionChange(currentWorkSection.value);
}
/****************************  资源明细方法区  ****************************/
/**资源组明细获取方法 */
function getResourceGroupDetail() {
  groupDetailLoading.value = true;
  queryResourceGroupDetailParams.value.productionResourceGroupId =
    currentGroup.value.id;
  listGroupDetail(queryResourceGroupDetailParams.value).then((res) => {
    if (res.code == 200) {
      groupDetailList.value = res.rows.filter(
        (obj) => obj.protemDayworkId == 0
      );
      console.log(groupDetailList.value);
    }
  });
  groupDetailLoading.value = false;
}
/**资源组明细搜索 */
function handleQueryResourceGroupDetail() {
  getResourceGroupDetail();
}

/*******************************工序方法区*********************************** */
/**获取工序 */
const getDeptProcess = () => {
  deptProcessLoading.value = true;
  queryDeptProcessParams.value.deptId = currentWorkSection.value.id;
  listDeptProcess(queryDeptProcessParams.value).then((res) => {
    deptProcessList.value = res.rows;
    deptProcessLoading.value = false;
    deptProcessTotal.value = res.total;
  });
};
/**工序搜索框 */
function handleQueryProcess() {
  getDeptProcess();
}
/** 打开工序对话框事件 */
function handleShowProcessFormDialog() {
  proxy.$refs.processFormRef.open(currentWorkSection.value.id);
}

/**工序多选带回 */
function handleProcessMultipleSelected(selection) {
  var addDeptProcessList = [];
  for (var i = 0; i < selection.length; i++) {
    var deptProcessAdd = {};
    deptProcessAdd.deptId = currentWorkSection.value.id;
    deptProcessAdd.processId = selection[i].id;
    deptProcessAdd.processCode = selection[i].processCode;
    deptProcessAdd.processAlias = selection[i].processAlias;
    addDeptProcessList.push(deptProcessAdd);
  }
  addDeptProcess(addDeptProcessList).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功");
      handleWorkSectionChange(currentWorkSection.value);
    }
  });
}

/** 刷新工序区事件 */
function handleRefreshProcess(row) {
  getDeptProcess();
}

//工段工序多选框选中数据
function deptProcessSelectionChange(selection) {
  deptProcessIds.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
}

/**删除工序工段表数据 */
function handledelDeptProcess() {
  proxy.$modal
    .confirm("是否确认删除选中的数据项？")
    .then(function () {
      return delDeptProcess(deptProcessIds.value);
    })
    .then(() => {
      getDeptProcess();
      proxy.$modal.msgSuccess("删除成功！");
    })
    .catch((e) => {
      proxy.$modal.msg("操作失败！");
    });
}

onMounted(() => {
  getWorkSections();
});
</script>
