<template>
  <div class="container">
    <!-- 成绩统计区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        亲密度汇总
      </div>

      <!-- 时间筛选区域 -->
      <div class="box_search">
        <el-date-picker
          style="width: 280px"
          v-model="timeValue"
          type="daterange"
          value-format="YYYY-MM-DD"
          start-placeholder="请选择开始日期"
          end-placeholder="请选择结束日期"
          @change="changeTime"
        />
      </div>

      <div class="box_form form box_form2">
        <el-table :data="likeList" height="210">
          <el-table-column label="排名" align="center" width="50">
            <template #="scope">
              {{
                ((currentPage - 1) * pageSize + scope.$index + 1)
                  .toString()
                  .padStart(2, 0)
              }}
            </template>
          </el-table-column>

          <el-table-column label="姓名" align="center">
            <template #="{ row }">
              <div class="name" @click="clickName(row)">
                {{ row.relationName }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="gradeName" label="年级" align="center" />

          <el-table-column
            prop="className"
            label="班级"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column prop="count" label="亲密值" align="center" />
        </el-table>
      </div>

      <div class="pag">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          small
          :pager-count="5"
          hide-on-single-page
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 考评记录区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        考评记录
      </div>

      <div class="box_form form">
        <el-table :data="tableData" height="290">
          <el-table-column
            prop="term"
            label="考评时间"
            align="center"
            width="150"
          />
          <el-table-column prop="scoreLevel" label="考评等级" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

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

const $emit = defineEmits(["changeStudent"]);

const $route = useRoute();

// 用户id
const userId = ref();
// 用户信息
const userInfo = ref();

// 绑定时间数据
const timeValue = ref([]);

// 当前页
const currentPage = ref(1);
//  每页多少条
const pageSize = ref(4);
// 总条数
const total = ref(0);

// 亲密度列表
const likeList = ref([]);

// 考评记录数组
const tableData = ref<any>([]);

onMounted(() => {
  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
  userInfo.value = obj;
  userId.value = obj.id;

  // 获取亲密度列表
  getLikeList();

  // 获取考评记录数据
  getEvaluateData();
});

// 获取亲密度列表
const getLikeList = async () => {
  const res = await reqGetLikeList({
    userId: userId.value,
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    startTime: timeValue.value?.length ? timeValue.value[0] + " 00:00:00" : "",
    endTime: timeValue.value?.length ? timeValue.value[1] + " 00:00:00" : "",
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    likeList.value = result.list;
    total.value = result.totalCount;
  }
};

// 获取考评记录数据
const getEvaluateData = async () => {
  const res = await reqGetEvaluateData({
    cardNo: userInfo.value.cardNo,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    tableData.value = result;
  }
};

// 时间改变回调
const changeTime = () => {
  // console.log(timeValue.value);
  currentPage.value = 1;
  getLikeList();
};

// 分页器页数改变回调
const handleCurrentChange = (v: number) => {
  // console.log(v);
  currentPage.value = v;
  getLikeList();
};

// 点击表格名字触发的回调
const clickName = (row: any) => {
  // console.log(row);
  // userId.value = row.relationId;
  // $emit("changeStudent", userId.value);
  // timeValue.value = [];
  // currentPage.value = 1;
  // getLikeList();
  // getEvaluateData();
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  height: 834px;
  color: #fff;

  .container_box {
    padding: 17px 0 0 22px;
    width: 500px;
    height: 412px;
    background-image: url(@/assets/images/box-bg5.png);
    background-size: 100% 100%;

    .box_title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      img {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    .box_search {
      padding-left: 28px;
      margin-top: 30px;
      height: 35px;
    }

    .box_form {
      padding-left: 28px;
      padding-right: 44px;
      margin-top: 48px;
      height: 287px;
      overflow: hidden;

      .name {
        cursor: pointer;
      }
    }

    .box_form2 {
      margin-top: 30px;
      height: 210px;
    }

    .pag {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      margin-left: -20px;
      width: 465px;
    }
  }
}

/*最外层透明*/
.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: #d0deee;
  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 3px;
  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__total),
::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-range-input),
::v-deep(.el-input__inner) {
  color: #fff;
}
</style>
