<template>
  <div>
    <div class="title">
      部门管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div>
          部门名称&ensp;&ensp;<el-input v-model="deptName" style="width: 375px" size="large" placeholder="输入部门名称" />
        </div>

        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;部门状态&ensp;&ensp;<el-select
            v-model="status"
            placeholder="请选择"
            size="large"
            style="width: 240px"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
          <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
          <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
        </div>
      </div>
    </div>
    <div class="card cardbottom">
      <el-button type="primary" v-if="BUTTONS.departmentadd" size="large" color="#0052d9" @click="newaddition">新增</el-button>

      <div>&ensp;</div>
      <el-table
        :data="tableData[0].children"
        ref="multipleTableRef"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="deptName" label="部门名称" />
        <el-table-column prop="leader" label="部门负责人" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="deptType" label="状态">
          <template #default="scope">
            <div v-if="scope.row.status == 0">正常</div>
            <div v-else>停用</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button v-if="BUTTONS.departmentedit" color="#0052d9" type="primary" @click="newition(scope.row)">编辑</el-button>
            <el-button v-if="BUTTONS.delete" @click="onremove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElTable } from "element-plus";
import { other } from "@/api/interface";
import { platformdeptlist, platformdeptremove } from "@/api/home/Multisite";
import { useHandleData } from "@/hooks/useHandleData";
import { useAuthButtons } from "@/hooks/useAuthButtons";
const { BUTTONS } = useAuthButtons();
const deptName = ref("");
const status = ref("");
import { useRouter } from "vue-router";
const router = useRouter();
const options = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "1",
    label: "正常"
  },
  {
    value: "0",
    label: "停用"
  }
]);

const query = (val: any) => {
  console.log(val);
  if (val == 0) {
    getplatformuserlist();
  } else {
    (deptName.value = ""), (status.value = "");
    getplatformuserlist();
  }
};
const newaddition = () => {
  router.push({
    path: "/department/addition",
    query: {
      type: "部门新增", // 传递的参数
      id: ""
    }
  });
};
// 编辑
const newition = (row: any) => {
  router.push({
    path: "/department/addition",
    query: {
      type: "部门编辑", // 传递的参数
      id: row.id
    }
  });
}; // 删除
const onremove = async (row: any) => {
  await useHandleData(platformdeptremove, { ids: row.id }, "删除");
  await getplatformuserlist();
};

const tableData = ref();
interface tableData1 {
  deptName: string;
  deptType: string;
  orderNum: number;
  id: number;
  createTime: string;
  children: any[];
}
const getplatformuserlist = async () => {
  let obj = {
    deptName: deptName.value,
    status: status.value
  };
  const { data } = await platformdeptlist(obj);
  // tableData.value = data;
  console.log(data);
  tableData.value = buildTree(data);
};

const buildTree = (data: other.tableData1[]) => {
  const tree: other.tableData1[] = [];
  const map: { [key: string]: other.tableData1 } = {};

  // 创建一个map以便快速找到item
  data.forEach((item: other.tableData1) => {
    map[item.id] = { ...item, children: [] };
  });

  data.forEach((item: { parentId: string; id: string | number }) => {
    if (item.parentId === "0") {
      // 根节点，假设根节点的 parentId 是空字符串或者其他标识
      tree.push(map[item.id]);
    } else {
      // 子节点
      if (map[item.parentId]) {
        map[item.parentId].children.push(map[item.id]);
      }
    }
  });

  return tree;
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<tableData1[]>([]);

const handleSelectionChange = (val: tableData1[]) => {
  multipleSelection.value = val;
};
const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
