<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 class="more" @click="handleClickMore(0)">查看更多 ></div>
      </div>
      <!-- 学生汇总表格区域 -->
      <div class="student form">
        <el-table :data="tableData">
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            width="130"
            show-overflow-tooltip
          />
          <el-table-column prop="num" label="编号" align="center" width="60" />
          <el-table-column
            prop="class"
            label="部门"
            align="center"
            width="150"
          />
          <el-table-column label="操作" align="center" width="60">
            <template #default="{ row }">
              <div class="check" @click="handleCheckMsg(0)">查看</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 教师汇总区域 -->
      <div class="sub_title">
        <div>
          教师汇总
          <span
            >/<span ref="totalTeacherDom">{{ totalTeacher }}</span
            >人</span
          >
        </div>
        <div class="more" @click="handleClickMore(1)">查看更多 ></div>
      </div>
      <!-- 教师汇总表格区域 -->
      <div class="teacher form">
        <el-table :data="tableData">
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            width="130"
            show-overflow-tooltip
          />
          <el-table-column prop="num" label="编号" align="center" width="60" />
          <el-table-column
            prop="class"
            label="部门"
            align="center"
            width="150"
          />
          <el-table-column label="操作" align="center" width="60">
            <template #default="{ row }">
              <div class="check" @click="handleCheckMsg(1)">查看</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 查看更多弹窗区域 -->
    <div v-if="showPop" class="popup">
      <div class="pop_box">
        <!-- 标题区域 -->
        <div class="pop_title">
          <span>{{ popType === 0 ? "学生" : "教师" }}汇总</span>
        </div>

        <!-- 关闭按钮区域 -->
        <div class="pop_close" @click="handleClose">×</div>

        <!-- 内容区域 -->
        <div class="pop_content">
          <!-- 搜索区域 -->
          <div class="pop_search">
            <div class="search_input">
              <input type="text" placeholder="请输入关键字" />
            </div>
            <div class="search_btn">查询</div>
          </div>

          <!-- 表格区域 -->
          <div class="pop_form form">
            <el-table :data="tableDataPop">
              <el-table-column label="序号" align="center" width="80">
                <template #default="{ $index }">
                  <div>{{ ($index + 1).toString().padStart(2, 0) }}</div>
                </template>
              </el-table-column>

              <el-table-column prop="name" label="姓名" align="center" />
              <el-table-column prop="num" label="编号" align="center" />
              <el-table-column prop="class" label="部门" align="center" />

              <el-table-column label="操作" align="center">
                <template #default="{ row }">
                  <div class="pop_check" @click="clickPopCheck">查看</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页器区域 -->
          <div class="pop_pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              small
              background
              layout="prev, pager, next, jumper"
              :total="1000"
              :pager-count="5"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { countUpNum } from "@/utils/countUpNum";

const totalStudent = ref(4500);
const totalTeacher = ref(4500);

const totalStudentDom = ref(4500);
const totalTeacherDom = ref(4500);

// 是否展示弹窗
const showPop = ref(false);

// 分页器当前页
const currentPage = ref(1);

// 每页多少条数据
const pageSize = ref(10);

// 弹窗类型 0为学生弹窗 1为教师弹窗
const popType = ref(0);

// 表格数据
const tableData = [
  {
    name: "张三张三张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
  {
    name: "张三",
    num: "123",
    class: "七(5)班",
  },
];

// 弹窗表格数据
const tableDataPop = [
  {
    name: "张三",
    num: "2051",
    class: "七四班",
  },
  {
    name: "李四",
    num: "2051",
    class: "七四班",
  },
  {
    name: "王五",
    num: "2051",
    class: "七四班",
  },
  {
    name: "老六",
    num: "2051",
    class: "七四班",
  },
  {
    name: "张三",
    num: "2051",
    class: "七四班",
  },
  {
    name: "李四",
    num: "2051",
    class: "七四班",
  },
  {
    name: "王五",
    num: "2051",
    class: "七四班",
  },
  {
    name: "老六",
    num: "2051",
    class: "七四班",
  },
  {
    name: "张三",
    num: "2051",
    class: "七四班",
  },
  {
    name: "李四二",
    num: "2051",
    class: "七四班",
  },
];

const router = useRouter();

onMounted(() => {
  countUpNum(totalStudentDom.value, totalStudent.value);
  countUpNum(totalTeacherDom.value, totalTeacher.value);
});

// 点击表格查看按钮回调 0学生 1教师
const handleCheckMsg = (value: number) => {
  if (value === 0) {
    router.push("student");
  } else {
    router.push("teacher");
  }
};

// 点击查看更多按钮回调 0学生 1教师
const handleClickMore = (value: number) => {
  showPop.value = true;
  popType.value = value;
};

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

// 点击弹窗关闭按钮回调
const handleClose = () => {
  showPop.value = false;
};

// 弹窗表格查看按钮回调
const clickPopCheck = () => {
  // showPop.value = false;
  handleCheckMsg(popType.value);
};
</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;
      }
    }

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

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

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

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

  .popup {
    z-index: 999;
    position: absolute;
    top: -83px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1920px;
    height: 1080px;
    background-color: rgba(0, 0, 0, 0.6);

    .pop_box {
      position: relative;
      padding: 15px 47px 0 24px;
      width: 585px;
      height: 646px;
      border-radius: 16px;
      border: 1px solid #8c8c8c;
      background-color: rgba(31, 58, 87, 0.8);

      .pop_title {
        height: 34px;
        background-image: url(@/assets/images/pop-title-bg.png);
        background-size: 100% 100%;

        span {
          margin-left: 24px;
          color: #bbe2fe;
        }
      }

      .pop_close {
        position: absolute;
        top: 14px;
        right: 48px;
        width: 24px;
        height: 24px;
        line-height: 18px;
        text-align: center;
        color: #a6a6a6;
        font-size: 25px;
        border-radius: 2px;
        border: 1px solid #a6a6a6;
        cursor: pointer;
      }
      .pop_content {
        padding: 37px 0 0 17px;
        height: 580px;
        overflow: hidden;

        .pop_search {
          display: flex;
          justify-content: space-between;
          height: 32px;
          .search_input {
            padding: 0 10px;
            width: 430px;
            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_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;
          }
        }

        .pop_form {
          margin-top: 22px;
          height: 445px;
          overflow: hidden;

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

        .pop_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;
}
</style>
