<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 右边班级树状 -->
      <el-col :span="6">
        <el-card class="box-card grade_tree">
          <el-tree
            v-loading="treeLoading"
            :data="gradeDataTree"
            :props="defaultProps"
            node-key="id"
            :default-expanded-keys="[defaultExpandedId]"
            @node-click="handleNodeClick"
          />
        </el-card>
      </el-col>
      <!-- 左边小组 -->
      <el-col :span="18">
        <Filter
          v-model="filterData"
          :config="filterConfig"
          @handleAction="handleFilterData"
          @updateSchool="hanldeUpdateSchool"
        />
        <!-- 表格 -->
        <Table :xbTable="xbTable" @tablePageChange="handleTablePageChange">
          <template v-slot:operation="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleView(scope.row)"
              >查看</el-button
            >
          </template>
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="GroupReport">
import router from "@/router";
import Filter from "@/views/smartCampus/components/Filter/index.vue";
import Table from "@/views/smartCampus/components/Table/index.vue";
import {
  getGradeClassTreeApi,
  getGroupReportApi,
  getTenantGradeClassTreeApi,
} from "@/api/smartCampus/index";
import useUserStore from "@/store/modules/user";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();

const filterData = ref({ tenantId: "" }); //过滤
const filterClassOrGradeId = ref({ gradeId: "", classId: "" }); //点击树状图筛选
const schoolList = ref([]);
const classStudents = ref([]); //班级学生

const filterConfig = computed(() => {
  return [
    {
      comName: "admin",
      label: "学校名称",
      prop: "tenantId",
      placeholder: "请选择",
      clearable: true,
    },
    {
      comName: "el-select",
      label: "学科",
      prop: "subject",
      clearable: true,
      options: [{ label: "英语", value: "英语" }],
      selectConfig: {
        label: "label",
        value: "value",
      },
    },
    {
      comName: "el-input",
      label: "学生姓名",
      placeholder: "请输入",
      prop: "stuName",
      clearable: true,
    },
  ];
});
const xbTable = ref({
  loading: false,
  columns: [
    { prop: "groupName", label: "小组名称" },
    { prop: "groupMember", label: "小组成员" },
    { prop: "groupNum", label: "小组人数" },
    { label: "操作", slot: "operation" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});

const defaultProps = {
  children: "children",
  label: "label",
};
const treeLoading = ref(false);
const defaultExpandedId = ref(""); // 默认展开
const gradeDataTree = ref([]);
// 树状图点击
const handleNodeClick = (data) => {
  if (!data.tenantId) {
    // 全校
    filterClassOrGradeId.value.classId = "";
    filterClassOrGradeId.value.gradeId = "";
    filterData.value.tenantId = data.id;
  } else if (data.id && !data.gradeId) {
    // 年级
    filterData.value.tenantId = data.tenantId;
    filterClassOrGradeId.value.gradeId = data.id;
    filterClassOrGradeId.value.classId = "";
  } else if (data.id && data.gradeId) {
    // 班级
    filterData.value.tenantId = data.tenantId;
    filterClassOrGradeId.value.classId = data.id;
    filterClassOrGradeId.value.gradeId = "";
  }
  xbTable.value.pagination.pageNum = 1;
  getList();
};
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  getGroupReportApi({
    ...xbTable.value.pagination,
    ...filterData.value,
    ...filterClassOrGradeId.value,
  }).then((res) => {
    xbTable.value.tableData = res.rows;
    xbTable.value.loading = false;
    xbTable.value.pagination.total = res.total;
  });
}

// 表格分页
function handleTablePageChange(val) {
  xbTable.value.pagination.pageSize = val.limit;
  xbTable.value.pagination.pageNum = val.page;
  getList();
}

// 过滤按钮
function handleFilterData(type) {
  switch (type.value) {
    case "search":
      getList();
      break;
    case "reset":
      xbTable.value.pagination.pageNum = 1;
      getList();
      break;
  }
}

/** 查看按钮操作 */
async function handleView(row) {
  router.push({
    path: "/smartCampus/studyReport/viewGroupReport/index/" + row.id,
  });
}

// 获取年级树状
function fetchGradeTree() {
  gradeDataTree.value = [];
  treeLoading.value = true;
  getTenantGradeClassTreeApi({ tenantId: filterData.value.tenantId }).then(
    (res) => {
      let data = res.data;
      if (data.length > 0) {
        defaultExpandedId.value = data[0].tenantId;
        gradeDataTree.value = data.map((item) => ({
          label: item.tenantName,
          children: item.gradeList,
          id: item.tenantId,
        }));
        for (let i in gradeDataTree.value) {
          gradeDataTree.value[i].children = gradeDataTree.value[i].children.map(
            (item) => ({
              ...item,
              label: item.gradeName,
              children: item.scClassVos,
            })
          );
          let classVos = gradeDataTree.value[i].children;
          for (let j in classVos) {
            classVos[j].children = classVos[j].children
              ? classVos[j].children.map((item) => ({
                  ...item,
                  label: item.className,
                }))
              : [];
          }
        }
      }
      treeLoading.value = false;
    }
  );
}
// 更新学校
function hanldeUpdateSchool() {
  filterClassOrGradeId.value.classId = "";
  filterClassOrGradeId.value.gradeId = "";
  defaultExpandedId.value = filterData.value.tenantId;

  fetchGradeTree();
  getList();
}
async function handleDifferentRole() {
  if (useUserStore().showAllTenant) {
    // 超管
    setTimeout(() => {
      schoolList.value = useUserStore().schoolList;
      filterData.value.tenantId =
        schoolList.value.length > 0 ? schoolList.value[0].id : "";
      fetchGradeTree();
      getList();
    }, 200);
  } else {
    fetchGradeTree();
    getList();
  }
}
handleDifferentRole();
</script>
<style lang="scss" scoped>
.grade_tree {
  height: 80vh;
  overflow-y: scroll;

  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #ddf2fd !important;
    border: 1px solid #3db2f1;
  }

  :deep(.el-tree-node__content) {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
