<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">用户汇总</div>
      <div class="title_sub">User Summary</div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 学生汇总区域 -->
      <div class="sub_title">
        <div>
          学生汇总
          <span
            >/<span ref="totalStudentDom">{{ totalStudent }}</span
            >人</span
          >
        </div>
      </div>

      <!-- 搜索区域 -->
      <div class="sub_search">
        <div class="search_input">
          <input type="text" placeholder="请输入关键字" v-model="keyword" />
        </div>
        <div class="search_select">
          <el-cascader
            ref="cascader"
            v-model="classValue"
            :options="options_class"
            :props="props_class"
            placeholder="请选择年级班级"
            clearable
            @change="handleChangeClass"
          />
        </div>
        <div class="search_btn" @click="handleSearch">查询</div>
      </div>

      <!-- 学生汇总表格区域 -->
      <div class="student form">
        <el-table :data="tableDataStudent">
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            width="130"
            show-overflow-tooltip
          />
          <el-table-column
            prop="cardNo"
            label="编号"
            align="center"
            width="60"
          />
          <el-table-column
            prop="departMent"
            label="部门"
            align="center"
            width="150"
          />
          <el-table-column label="操作" align="center" width="60">
            <template #default="{ row }">
              <div class="check" @click="handleCheckMsg(0, row)">查看</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器区域 -->
      <div class="sub_pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          small
          background
          hide-on-single-page
          layout="prev, pager, next, jumper"
          :total="totalStudent"
          :pager-count="5"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { countUpNum } from "@/utils/countUpNum";
// 引入用户画像相关的接口
import { reqGetUserInfo, reqGetClassData } from "@/api/user/index";
// 引入解密函数
import { decryptDes } from "@/utils/des";

// 学生总数
const totalStudent = ref(0);
// DOM元素
const totalStudentDom = ref();

// 分页器当前页
const currentPage = ref(1);
// 每页多少条数据
const pageSize = ref(15);

// 学生表格数据
const tableDataStudent = ref([]);

// 弹窗输入框绑定数据
const keyword = ref();
// 年级id
const graderId = ref();
// 班级id
const classId = ref();
// 年级班级筛选框绑定数据
const classValue = ref();
// 年级班级数据
const options_class = ref([]);

const props_class = {
  checkStrictly: true,
  value: "id",
  label: "name",
};
const cascader = ref();

const router = useRouter();

onMounted(() => {
  if (sessionStorage.getItem("wanzai_currentPage")) {
    currentPage.value = Number(sessionStorage.getItem("wanzai_currentPage"));
  }
  if (sessionStorage.getItem("wanzai_keyword")) {
    keyword.value = sessionStorage.getItem("wanzai_keyword");
  }
  if (sessionStorage.getItem("wanzai_graderId")) {
    graderId.value = Number(sessionStorage.getItem("wanzai_graderId"));
  }
  if (sessionStorage.getItem("wanzai_classId")) {
    classId.value = Number(sessionStorage.getItem("wanzai_classId"));
  }
  if (
    sessionStorage.getItem("wanzai_graderId") &&
    sessionStorage.getItem("wanzai_classId")
  ) {
    classValue.value = [graderId.value, classId.value];
  }

  // 获取学生汇总数据
  getStudentInfo(1);

  // 获取年级班级数据
  getClassData();
});

// 获取学生汇总数据
const getStudentInfo = async (type: number) => {
  const res = await reqGetUserInfo({
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    identityId: 2,
    key: keyword.value,
    graderId: graderId.value,
    classId: classId.value,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    tableDataStudent.value = res.data.list;
    totalStudent.value = res.data.total;
    // 让数字跳动
    if (type == 1) {
      countUpNum(totalStudentDom.value, totalStudent.value);
    }
  }
};

// 获取年级班级数据
const getClassData = async () => {
  const res: any = await reqGetClassData();

  if (res.code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    options_class.value = result;
  }
};

// 分页器当前页修改时的回调
const handleCurrentChange = (value: number) => {
  currentPage.value = value;
  getStudentInfo(2);
};

// 年级班级筛选框切换回调
const handleChangeClass = (v: any) => {
  // console.log(v);

  if (!v) {
    graderId.value = "";
    classId.value = "";
    // sessionStorage.setItem("wanzai_graderId", "");
    // sessionStorage.setItem("wanzai_classId", "");
    return;
  }

  graderId.value = v[0];
  classId.value = v[1];

  // 选择后关闭筛选框
  cascader.value.togglePopperVisible();
};

// 查询按钮绑定回调
const handleSearch = () => {
  currentPage.value = 1;
  getStudentInfo(2);
};

// 点击表格查看按钮回调 0学生 1教师
const handleCheckMsg = (value: number, row: any) => {
  sessionStorage.setItem("wanzai_currentPage", currentPage.value.toString());
  if (keyword.value) {
    sessionStorage.setItem("wanzai_keyword", keyword.value);
  } else {
    sessionStorage.setItem("wanzai_keyword", "");
  }

  if (graderId.value) {
    sessionStorage.setItem("wanzai_graderId", graderId.value);
  } else {
    sessionStorage.setItem("wanzai_graderId", "");
  }

  if (classId.value) {
    sessionStorage.setItem("wanzai_classId", classId.value);
  } else {
    sessionStorage.setItem("wanzai_classId", "");
  }

  if (value === 0) {
    router.push({
      name: "student",
      query: {
        obj: encodeURIComponent(JSON.stringify(row)),
      },
    });
  } else {
    router.push({
      name: "teacher",
      query: {
        obj: encodeURIComponent(JSON.stringify(row)),
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 435px;
  height: 951px;
  color: #fff;
  background-image: url(@/assets/images/box-bg.png);

  .title {
    display: flex;
    align-items: center;
    width: 430px;
    height: 47px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/title-bg.png);
    background-size: 100% 100%;

    .title_text {
      margin-left: 38px;
      font-size: 20px;
      text-shadow: 0px 0px 9px #158eff;
    }

    .title_sub {
      margin-left: 19px;
      font-size: 12px;
      color: #215a8e;
    }
  }

  .content {
    padding: 20px 19px 0 14px;
    height: 904px;

    .sub_title {
      display: flex;
      justify-content: space-between;
      padding-left: 28px;
      height: 35px;
      line-height: 18px;
      color: #abd6ff;
      font-weight: bold;
      background-image: url(@/assets/images/title-bg2.png);
      background-size: 100% 100%;

      span {
        margin-left: 5px;
        font-size: 12px;
        font-weight: 400;
      }

      .more {
        font-weight: 400;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .sub_search {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      height: 32px;

      .search_input {
        padding: 0 10px;
        width: 130px;
        border-radius: 2px;
        border: 1px solid #9c9c9c;
        background-color: rgba(48, 75, 95, 0.5);

        input {
          width: 100%;
          height: 100%;
          background-color: transparent;
          border: none;
          outline: none;
          color: #fff;
          font-size: 14px;
        }
      }

      .search_select {
        width: 170px;
      }

      .search_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 58px;
        font-size: 14px;
        background-image: linear-gradient(
          rgba(29, 242, 228, 1),
          rgba(61, 198, 239, 0.4),
          rgba(26, 94, 232, 1)
        );
        cursor: pointer;
      }
    }

    .student {
      margin: 22px 0;
      height: 660px;
      overflow: hidden;

      .check {
        color: #ede27b;
        cursor: pointer;
      }
    }

    .teacher {
      padding-top: 20px;
      height: 390px;
      overflow: hidden;

      .check {
        color: #ede27b;
        cursor: pointer;
      }
    }

    .sub_pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      height: 35px;
    }
  }
}

/*最外层透明*/
.form ::v-deep(.el-table),
.form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form ::v-deep(.el-table th),
.form ::v-deep(.el-table tr),
.form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  color: white;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  height: 40px;
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .cell) {
  padding: 0;
}

// 修改分页器未选中时的样式
::v-deep(.el-pagination.is-background .btn-next),
::v-deep(.el-pagination.is-background .btn-prev),
::v-deep(.el-pagination.is-background .el-pager li:not(.disabled)) {
  margin: 0 1px;
  background-color: transparent;
  border: 1px solid #707070;
  color: #fff;
}

// 修改分页器选中时的样式
::v-deep(
    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active
  ) {
  color: #70b7fa;
  border: 1px solid #70b7fa;
}

::v-deep(.el-pagination__goto),
::v-deep(.el-pagination__classifier) {
  color: #fff;
}

::v-deep(.el-input__wrapper) {
  background: transparent;
  background-color: rgba(48, 75, 95, 0.5);
}

::v-deep(.el-input__inner) {
  color: #fff;
}

::v-deep(.el-input__inner::placeholder) {
  color: #606266;
}
</style>
