<template>
  <el-skeleton :rows="30" :loading="pageBasicsData.loading" />
  <!-- 作业数据管理 -->
  <div class="regional-grid" v-if="!pageBasicsData.loading">
    <!-- 顶部功能按钮 -->
    <div class="grid-right-btn" ref="topSearchRef">
        <!-- 搜索区域 -->
        <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
            <el-form-item label="所属站点" prop="districtId">
              <div class="screen-item">
                <el-select
                  filterable
                  placeholder="请选择"
                  v-model="pageBasicsData.screenForm.districtId"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in pageBasicsData.districtList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="对象分类">
              <el-cascader
                ref="gridCascaderRef"
                v-model="gridCascaderValue"
                :options="gridTreeOptions"
                :props="{
                  children: 'childrenNode',
                  label: 'name',
                  value: 'name',
                  checkStrictly: true,
                  emitPath: false,
                }"
                clearable
                filterable
                placeholder="请选择对象分类"
                style="width: 200px"
                @change="gridCascaderChange"
              />
            </el-form-item>
            <el-form-item label="作业名称" prop="name">
              <div class="screen-item">
                <el-input
                  placeholder="请输入作业名称"
                  clearable
                  v-model="pageBasicsData.screenForm.name"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="作业分类" prop="type">
              <div class="screen-item">
                <el-select
                  filterable
                  clearable
                  placeholder="请选择作业分类"
                  v-model="pageBasicsData.screenForm.type"
                >
                  <el-option
                    :label="item.value"
                    :value="item.key"
                    v-for="item in pageBasicsData.wordType"
                    :key="item.key"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="对象名称" prop="objectName">
              <div class="screen-item">
                <el-input
                  placeholder="请输入对象名称"
                  clearable
                  :disabled="!!gridCascaderValue"
                  v-model="pageBasicsData.screenForm.objectName"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="停/启用状态" prop="status">
              <div class="screen-item">
                <el-select
                  filterable
                  clearable
                  placeholder="请选择停/启用状态"
                  v-model="pageBasicsData.screenForm.status"
                >
                  <el-option
                    :label="item.key"
                    :value="item.value"
                    v-for="item in pageBasicsData.statusList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </qu-search-area>
      </div>

      <!-- 表格 -->
      <div class="main-table">
        <qu-table
          :custom="true"
          :showPage="true"
          :showIndex="true"
          :height="pageBasicsData.tableHeight"
          :tableData="tableData"
          :tableHeader="tableHeader"
          :pageProps="pageProps"
          @pageChange="pageChange"
          :rowButtons="rowButtons"
          @rowButtonClick="rowButtonClick"
          @fetchTableAttr="fetchTableAttr"
          :tableButtons="pageBasicsData.buttonList"
          @buttonClick="buttonClick"
        ></qu-table>
      </div>
  </div>

  <!-- 新建弹窗 -->
  <el-dialog
    v-model="pageBasicsData.isShowAddDialog"
    title="新建"
    width="600px"
    @close="closeAddDialog"
  >
    <el-form
      class="dialog-form"
      label-width="130px"
      ref="addRef"
      :model="addForm"
    >
      <div
        v-if="false"
        style="
          display: flex;
          flex-direction: row-reverse;
          padding-top: 10px;
          padding-bottom: 10px;
          padding-right: 10px;
          color: blue;
        "
        @click="pageBasicsData.showSelectScheme = true"
      >
        想要快速设置?点击选择作业方案
      </div>
      <el-form-item
        style="padding-top: 40px"
        label="所属站点"
        prop="districtId"
        :rules="{
          required: true,
          message: '请选择所属站点',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          clearable
          :disabled="pageBasicsData.isDisabled"
          filterable
          placeholder="请选择"
          v-model="addForm.districtId"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in pageBasicsData.districtList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="对象名称"
        prop="objName"
        :rules="{
          required: true,
          message: '请选择对象名称',
          trigger: 'change',
        }"
      >
        <el-cascader
          style="width: 350px"
          ref="objectNameRef"
          clearable
          v-model="addForm.objName"
          :options="pageBasicsData.addTreeData[0].childrenNode"
          :props="pageBasicsData.objectNameProps"
          @change="objectHandleChange"
          @focus="
            () => {
              if (pageBasicsData.addTreeData[0].childrenNode.length <= 0) {
                $message.warning('当前选择的所属站点暂无对象数据,请重新选择!');
              }
            }
          "
        >
          <template #default="{ data }">
            <span>{{ data.name }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item
        label="作业分类"
        prop="type"
        :rules="{
          required: true,
          message: '请输入作业分类',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          filterable
          clearable
          :disabled="pageBasicsData.isDisabled"
          placeholder="请选择"
          v-model="addForm.type"
        >
          <el-option
            :label="item.value"
            :value="item.key"
            v-for="item in pageBasicsData.wordType"
            :key="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="作业名称"
        prop="name"
        :rules="{
          required: true,
          message: '请输入作业名称',
          trigger: 'change',
        }"
      >
        <el-input style="width: 350px" v-model="addForm.name" />
      </el-form-item>
      <el-form-item label="作业工具" prop="toolName">
        <el-cascader
          style="width: 350px"
          ref="workToolRef"
          clearable
          v-model="addForm.toolName"
          :options="pageBasicsData.toolTreeData[0].childrenNode"
          :props="pageBasicsData.toolsProps"
          @change="toolHandleChange"
          @focus="
            () => {
              if (pageBasicsData.toolTreeData[0].childrenNode.length <= 0) {
                $message.warning(
                  '当前选择的所属站点暂无作业工具数据,请重新选择!'
                );
              }
            }
          "
        >
          <template #default="{ data }">
            <span>{{ data.name }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="作业标准" prop="standard">
        <el-input
          v-model="addForm.standard"
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入作业标准(非必填,限500字以内)"
        />
      </el-form-item>
      <el-form-item label="作业方法" prop="method">
        <el-input
          v-model="addForm.method"
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入作业方法(非必填,限500字以内)"
        />
      </el-form-item>
      <el-form-item
        label="停/启用状态"
        prop="status"
        :rules="{
          required: true,
          message: '请选择停/启用状态',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          filterable
          clearable
          placeholder="请选择"
          v-model="addForm.status"
        >
          <el-option
            :label="item.key"
            :value="item.value"
            v-for="item in pageBasicsData.statusList"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input
          v-model="addForm.memo"
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入备注信息(非必填,限500字以内)"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button style="width: 90px" @click="closeAddDialog">取消</el-button>
        <el-button style="width: 90px" type="primary" @click="submitForm"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹窗 -->
  <el-dialog
    v-model="pageBasicsData.isShowEditDialog"
    title="编辑"
    width="600px"
    @close="closeEditDialog"
  >
    <el-form
      class="dialog-form"
      label-width="130px"
      ref="editRef"
      :model="editForm"
    >
      <el-form-item
        style="padding-top: 40px"
        label="所属站点"
        prop="districtName"
        :rules="{
          required: true,
          message: '请选择所属站点',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          clearable
          disabled
          filterable
          placeholder="请选择"
          v-model="editForm.districtId"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in pageBasicsData.districtList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="对象名称"
        prop="objectName"
        :rules="{
          required: true,
          message: '请选择对象名称',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          clearable
          :disabled="true"
          filterable
          placeholder="请选择"
          v-model="editForm.objectName"
        >
        </el-select>
      </el-form-item>
      <el-form-item
        label="作业分类"
        prop="type"
        :rules="{
          required: true,
          message: '请输入作业分类',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          filterable
          clearable
          :disabled="true"
          placeholder="请选择"
          v-model="editForm.typeString"
        >
        </el-select>
      </el-form-item>
      <el-form-item
        label="作业名称"
        prop="name"
        :rules="{
          required: true,
          message: '请输入作业名称',
          trigger: 'change',
        }"
      >
        <el-input style="width: 350px" v-model="editForm.name" />
      </el-form-item>
      <el-form-item label="作业工具" prop="toolIdslist">
        <el-cascader
          style="width: 350px"
          ref="workToolRef"
          clearable
          v-model="editForm.toolIdslist"
          :options="pageBasicsData.editToolTreeData[0].childrenNode"
          :props="pageBasicsData.toolsProps"
          @change="toolHandleChange"
          @focus="
            () => {
              if (pageBasicsData.editToolTreeData[0].childrenNode.length <= 0) {
                $message.warning(
                  '当前选择的所属站点暂无作业工具数据,请重新选择!'
                );
              }
            }
          "
        >
          <template #default="{ data }">
            <span>{{ data.name }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="作业标准" prop="standard">
        <el-input
          v-model="editForm.standard"
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入作业标准(非必填,限500字以内)"
        />
      </el-form-item>
      <el-form-item label="作业方法" prop="method">
        <el-input
          v-model="editForm.method"
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入作业方法(非必填,限500字以内)"
        />
      </el-form-item>
      <el-form-item
        label="停/启用状态"
        prop="status"
        :rules="{
          required: true,
          message: '请选择停/启用状态',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          filterable
          clearable
          placeholder="请选择"
          v-model="editForm.status"
        >
          <el-option
            :label="item.key"
            :value="item.value"
            v-for="item in pageBasicsData.statusList"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input
          v-model="editForm.memo"
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入备注信息(非必填,限500字以内)"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button style="width: 90px" @click="closeEditDialog">取消</el-button>
        <el-button style="width: 90px" type="primary" @click="submitEditForm"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 作业方案弹窗 -->
  <el-dialog
    v-model="pageBasicsData.showSelectScheme"
    title="作业方案列表"
    fullscreen
  >
    <!-- 搜索区域 -->
    <div
      class="grid-right-search"
      style="border-bottom: 1px solid #ccc; padding: 20px"
    >
      <el-form ref="screenFormRef" :model="schemeForm" inline size="small">
        <el-form-item label="所属站点" prop="districtId">
          <el-select
            clearable
            filterable
            placeholder="请选择"
            v-model="schemeForm.districtId"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in pageBasicsData.districtList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作业名称" prop="name">
          <el-input
            placeholder="请输入作业名称"
            clearable
            v-model="schemeForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="作业分类" prop="type">
          <el-select
            filterable
            clearable
            placeholder="请选择作业分类"
            v-model="schemeForm.type"
          >
            <el-option
              :label="item.value"
              :value="item.key"
              v-for="item in pageBasicsData.wordType"
              :key="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" round @click="restSearch"
            >查询</el-button
          >
          <el-button round icon="Refresh" type="warning" @click="clearScreen"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 表单区域 -->
    <el-form
      ref="selectWorkSchemeRef"
      :model="selectWorkSchemeForm"
      size="small"
      label-width="120px"
      style="padding-top: 30px"
    >
      <el-form-item
        label="所属站点"
        prop="districtId"
        :rules="{
          required: true,
          message: '请选择所属站点',
          trigger: 'change',
        }"
      >
        <el-select
          clearable
          filterable
          placeholder="请选择"
          v-model="selectWorkSchemeForm.districtId"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in pageBasicsData.districtList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择对象"
        prop="object"
        :rules="{
          required: true,
          message: '请选择对象',
          trigger: 'change',
        }"
      >
        <el-select
          filterable
          clearable
          placeholder="请选择对象"
          v-model="selectWorkSchemeForm.object"
        >
          <el-option
            :label="item.value"
            :value="item.key"
            v-for="item in pageBasicsData.wordType"
            :key="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="作业方案"
        prop="scheme"
        :rules="{
          required: true,
          message: '选择作业方案',
          trigger: 'change',
        }"
      >
        <el-input
          v-if="false"
          style="width: 180px"
          v-model="selectWorkSchemeForm.workScheme"
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="main-table">
      <qu-table
        :custom="false"
        :showPage="true"
        :showIndex="true"
        :showSelect="true"
        :height="pageBasicsData.tableHeight"
        :tableData="tableData"
        :tableHeader="tableHeader"
        :pageProps="pageProps"
        @pageChange="pageChange"
        :rowButtons="rowButtons"
        @rowButtonClick="rowButtonClick"
        @fetchTableAttr="fetchTableAttr"
      ></qu-table>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button style="width: 90px" @click="closeAddDialog">取消</el-button>
        <el-button style="width: 90px" type="primary" @click="submitForm"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks.js";
import { operationManageService } from "@/ApiService/basicInfoService";
import { dropdownService } from "@/ApiService/dropdownService";

// 页面基础数据
const pageBasicsData = reactive({
  tableHeight: 200, //表格高度
  treeData: [{ childNode: [] }], // 左侧树结构数据
  addTreeData: [{ childNode: [] }], // 添加时树结构数据
  toolTreeData: [{ childrenNode: [] }], // 作业工具数据
  editToolTreeData: [{ childrenNode: [] }], // 作业工具数据
  loading: true, // 加载状态
  screenForm: {
    // 顶部搜索字段
    districtId: "",
    name: "",
    type: "",
    objectName: "",
    status: "",
  },
  buttonList: [
    // 顶部按钮列表
    {
      cnName: "新建",
      enName: "add",
      theme: "success",
      icon: "plus",
    },
    {
      cnName: "导出",
      enName: "export",
      theme: "primary",
      icon: "top",
    },
  ],
  isShowAddDialog: false, //新增弹窗
  isShowEditDialog: false, //编辑弹窗
  showSelectScheme: false, //作业方案弹窗
  districtList: [], // 所属站点列表
  superiorList: [], // 上级分类下拉列表
  wordType: [
    {
      key: 0,
      value: "其它",
    },
    {
      key: 1,
      value: "清洁",
    },
    {
      key: 2,
      value: "消毒",
    },
    {
      key: 3,
      value: "养护",
    },
    {
      key: 4,
      value: "巡检",
    },
  ],
  statusList: [
    {
      key: "停用",
      value: 0,
    },
    {
      key: "启用",
      value: 1,
    },
  ],
  objectNameProps: {
    // 对象名称级联配置
    expandTrigger: "hover",
    value: "id",
    label: "name",
    children: "childrenNode",
    checkStrictly: true,
    multiple: true,
  },
  toolsProps: {
    // 工具名称级联配置
    expandTrigger: "hover",
    value: "id",
    label: "name",
    children: "childrenNode",
    checkStrictly: true,
    multiple: true,
  },
});

// 新增弹窗字段
let addForm = reactive({
  districtId: "",
  objectIds: "",
  objName: "",
  type: "",
  name: "",
  toolIds: "",
  toolName: "",
  toolNames: "",
  standard: "",
  method: "",
  status: "",
  memo: "",
});
// 编辑弹窗字段
const editForm = reactive({});

// 元素ref
const topSearchRef = ref(); //顶部搜索区域ref
const addRef = ref(); // 新增弹窗ref
const editRef = ref(); // 编辑弹窗ref
const screenFormRef = ref(); //搜索区ref元素
const objectNameRef = ref();
const workToolRef = ref();

// 网格级联选择器
const gridCascaderValue = ref('');
const gridCascaderRef = ref();
const gridTreeOptions = computed(() => {
  return pageBasicsData.treeData[0]?.childrenNode || [];
});

// 作业方案列表搜索
let schemeForm = reactive({
  districtId: "",
  name: "",
  type: "",
});
let selectWorkSchemeForm = reactive({
  districtId: "",
  object: "",
  workScheme: "",
});

onMounted(() => {
  fetchDistricts();
  // 表格行内按钮
  buttonsClickFun.data = {
    // 编辑
    edit: () => {
      if (editForm.districtId) {
        fetchToolTree(editForm.districtId, true);
      }
      pageBasicsData.isShowEditDialog = true;
    },
    // 删除
    delete: () => {
      $messageBox
        .confirm("确定要删除此数据么？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
        .then(() => {
          operationManageService
            .removeOperation({
              id: editForm.id,
            })
            .then((res) => {
              if (res.code == 0) {
                $message.success("删除成功!");
                fetchData();
              } else {
                $message.error(res.err);
              }
            });
        })
        .catch(() => {});
    },
  };
});

// #region watch定义start
// 设置表格高度
watch(
  () => topSearchRef.value,
  (val) => {
    let wHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    nextTick(() => {
      pageBasicsData.tableHeight = wHeight - val.clientHeight - 184;
    });
  }
);
// 站点变化清空其它查询条件
watch(
  () => pageBasicsData.screenForm.districtId,
  (val) => {
    if (val) {
      for (const key in pageBasicsData.screenForm) {
        if (key != "districtId") {
          pageBasicsData.screenForm[key] = "";
        }
      }
      gridCascaderValue.value = '';
    }
  }
);
watch(
  () => addForm.districtId,
  (val) => {
    if (val) {
      fetchTree(val, true);
      fetchToolTree(val);
      fetchParentObject(val);
    }
  }
);
// #endregion watch定义end

// #region 函数定义start
// 顶部按钮事件
const buttonClick = ({ enName }) => {
  if (enName == "add") {
    pageBasicsData.isDisabled = false;
    pageBasicsData.isShowAddDialog = true;
  }
  if (enName == "export") {
    const { page, rows } = pageProps;
    const { districtId, name, type, objectName, status } =
      pageBasicsData.screenForm;
    operationManageService.toolsExport({
      page,
      rows,
      districtId,
      name,
      type,
      objectName,
      status,
    });
  }
};
// 对象名称级联change事件
const objectHandleChange = () => {
  let checkArr = objectNameRef.value.getCheckedNodes();
  let objectProps = [];
  checkArr.forEach((item) => {
    objectProps.push(item.value);
  });
  return objectProps;
};
// 作业工具级联change事件
const toolHandleChange = () => {
  let checkArr = workToolRef.value.getCheckedNodes();
  let toolProps = [];
  checkArr.forEach((item) => {
    toolProps.push({ id: item.value, name: item.label });
  });
  return toolProps;
};
// 添加表单提交
const submitForm = () => {
  let toolId = [];
  let toolName = [];
  if (toolHandleChange().length) {
    toolHandleChange().forEach((item) => {
      toolId.push(item.id);
      toolName.push(item.name);
    });
  }
  addRef.value.validate((valid) => {
    if (valid) {
      $messageBox
        .confirm("您确定要进行提交吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
        .then(() => {
          addForm.objectIds = objectHandleChange().join(",");
          addForm.toolIds = toolId.join(",");
          addForm.toolNames = toolName.join(",");
          operationManageService.addOperation(addForm).then((res) => {
            if (res.code == 0) {
              $message.success(res.data);
              closeAddDialog();
              fetchData();
            } else {
              $message.error(res.err);
            }
          });
        });
    }
  });
};
// 编辑表单提交
const submitEditForm = () => {
  let toolId = [];
  let toolName = [];
  if (toolHandleChange().length) {
    toolHandleChange().forEach((item) => {
      toolId.push(item.id);
      toolName.push(item.name);
    });
  }
  editRef.value.validate((valid) => {
    if (valid) {
      $messageBox
        .confirm("您确定要进行提交吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
        .then(() => {
          editForm.toolIds = toolId.join(",");
          editForm.toolNames = toolName.join(",");
          operationManageService.updateOperation(editForm).then((res) => {
            if (res.code == 0) {
              $message.success(res.data);
              closeEditDialog();
              fetchData();
            } else {
              $message.error(res.err);
            }
          });
        });
    }
  });
};
// 关闭添加弹窗事件
const closeAddDialog = () => {
  pageBasicsData.isShowAddDialog = false;
  addRef.value.resetFields();
};
// 关闭编辑弹窗事件
const closeEditDialog = () => {
  pageBasicsData.isShowEditDialog = false;
  editRef.value.resetFields();
};
// 获取所属站点
const fetchDistricts = () => {
  dropdownService.getDistrict().then((res) => {
    if (res.code == 0) {
      pageBasicsData.districtList = res.data;
      if (pageBasicsData.districtList?.length) {
        pageBasicsData.screenForm.districtId =
          pageBasicsData.districtList[0].id;
        fetchData();
        fetchTree();
      } else {
        $message.error("暂无站点信息,请配置站点!");
      }
    }
  });
};
// 获取列表数据
const fetchData = () => {
  const { page, rows } = pageProps;
  operationManageService
    .oprationPageList({
      page,
      rows,
      ...pageBasicsData.screenForm,
    })
    .then((res) => {
      if (res.code == 0) {
        pageBasicsData.loading = false;
        tableData.value = res.data.rows;
        pageProps.records = res.data.records;
      }
    });
};
// 获取上级分类
const fetchParentObject = (id) => {
  dropdownService.getParentObject({ districtId: id }).then((res) => {
    if (res.code == 0) {
      pageBasicsData.superiorList = res.data;
    }
  });
};

// 左侧树结构点击事件（保留，供内部逻辑复用）
const nodeClick = ({ dom }) => {
  pageBasicsData.screenForm.objectName = dom.name;
  fetchData();
};
// 网格级联选择器 change 事件
const gridCascaderChange = (val) => {
  pageBasicsData.screenForm.objectName = val || '';
};
// 左侧树结构数据
const fetchTree = (id, isAdd) => {
  const { districtId } = pageBasicsData.screenForm;
  dropdownService
    .getObjectTree({ districtId: id ? id : districtId })
    .then((res) => {
      if (res.code == 0) {
        let newData = [];
        newData.push(res.data);
        if (!isAdd) {
          pageBasicsData.treeData = newData;
        } else {
          pageBasicsData.addTreeData = newData;
        }
      }
    });
};
// 作业工具数据
const fetchToolTree = (id, type) => {
  const { districtId } = pageBasicsData.screenForm;
  dropdownService
    .getToolTree({ districtId: id ? id : districtId })
    .then(async (res) => {
      if (res.code == 0) {
        let newData = [];
        newData.push(res.data);
        if (!type) {
          pageBasicsData.toolTreeData = newData;
          setTreeData(pageBasicsData.toolTreeData[0].childrenNode);
        } else {
          pageBasicsData.editToolTreeData = newData;
          setTreeData(pageBasicsData.editToolTreeData[0].childrenNode);
        }
      }
    });
};
// 递归设置树结构
const setTreeData = (arr) => {
  arr.forEach((item) => {
    if (item.level == 1) {
      item.disabled = true;
    }
  });
};
//查询
const restSearch = () => {
  pageProps.page = 1;
  fetchData();
  fetchTree();
};
// 清空搜索
const clearScreen = () => {
  screenFormRef.value.resetFields();
  gridCascaderValue.value = '';
  pageBasicsData.screenForm.objectName = '';
  fetchData();
  fetchTree();
};
// 自定义表格头
const fetchTableAttr = (tableAttr) => {
  tableHeader.value = tableAttr;
};
// 表格按钮
const rowButtonClick = ({ row, $column }) => {
  for (let i in row) {
    editForm[i] = row[i];
  }
  buttonsClickFun.data[$column.enName]();
};
const {
  tableData,
  rowButtons,
  pageProps,
  tableHeader,
  pageChange,
  buttonsClickFun,
  $message,
  $messageBox,
} = templateHooks(fetchData);
// #endregion 函数定义 end
</script>
<script>
export default {
  name: "WorkDataManage",
};
</script>
<style lang="scss" scoped>
.regional-grid {
  box-sizing: border-box;
  height: calc(100vh - var(--page-top-offset));
  padding: var(--spacing-md);
  background-color: var(--color-bg-card);
  overflow: auto;
  .grid-right-search {
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
  }
  .el-form {
    margin: 8px 0;
  }
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.dialog-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 30px;
  .dialog-item-left {
    margin-right: 30px;
    div {
      margin-bottom: 30px;
    }
  }
  .dialog-item-right {
    .el-button {
      margin-bottom: 26px;
    }
  }
}
.generated {
  display: flex;
  .generated-left {
    padding-right: 60px;
    padding-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #dcdfe6;
  }
  .generated-right {
    margin-left: 20px;
    padding-top: 13%;
  }
}
</style>
