<script setup lang="ts">
import { rightBottom } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";

import { useDataStore } from "@/stores/index";
const dataStore = useDataStore();
const { rankingDto,collageId } = storeToRefs(dataStore)

/**
 * @description: 计算报到率
 * @return {*}
 */
const getRate = (report: any, total: any) => {
  if (report && total) {
    return ((report / total) * 100).toFixed(1);
  } else {
    return 0;
  }
}

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 535, //单步运动停止的高度，与滚动盒子的高度进行适配
    limitScrollNum: 3,
    // singleWaitTime:3000, // 停顿间隔
    step: 1 //滚动速度，数字越大，滚动越快
  },
  scroll: true,
});

const comName = computed(() => {
  if (indexConfig.value.rightBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});


const onSelectData = (id: any) => {
  dataStore.setCollageId(id)
}
</script>

<template>

  <div class="right_bottom">
    <div class="table-title">
      <div class="title-item">序号</div>
      <div class="title-item">学院名称 </div>
      <div class="title-item">已报到人数</div>
      <div class="title-item">总人数</div>
      <div class="title-item">报到率</div>
    </div>
    <!-- <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }"> -->
    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
      <!-- <component :is="comName" :list="state.list" v-model="state.scroll"
        :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
        :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
      <template v-for="(item, i) in rankingDto">
        <div class="table-row" :class="{ 'table-row-active': item.collegeId === collageId }"
          @click="onSelectData(item.collegeId)">
          <div class="row-item">{{ i + 1 }}</div>
          <div class="row-item" :title=item.collegeName>{{ item.collegeName }}</div>
          <div class="row-item">{{ item.reportNumber }}</div>
          <div class="row-item">{{ item.totalNumber }}</div>
          <div class="row-item">{{ getRate(item.reportNumber, item.totalNumber) }}%</div>
          <!-- <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div> -->
        </div>
      </template>

      <!-- </component> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .table-title {
    display: flex;
    height: 50px;
    align-items: center;
    color: #545e70;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #33343F;

    .title-item {
      width: 100px;
      text-align: center;

    }
  }
}

.right_bottom_wrap {
  overflow: hidden;
  height: 530px;

  .table-row {
    display: flex;
    height: 50px;
    border-bottom: 1px solid #33343F;
    border-top: 1px solid #33343F;
    line-height: 50px;
    margin-bottom: 2px;
    color: #E6E6FB;
    cursor: pointer;

    &:hover {
      background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
    }

    .row-item {
      width: 100px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .table-row-active {
    background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);

  }
}

.overflow-y-auto {
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 0px;
}
</style>
