<template>
  <div class="content">
    <div class="bg-white pl50 pt30 pr30 pb30">
      <div class="header">
        <div class="w-full flex h44 bg-primary-yellow items-center">
          <div class="w-1/4 font16 font-bold">车型</div>
          <div class="w-1/4 font16 font-bold">科目</div>
          <div class="w-1/4 font16 font-bold">成绩</div>
          <div class="w-1/4 font16 font-bold">考场时间</div>
        </div>
      </div>
      <div class="body">
        <div class="w-full" v-if="list.length==0">
          <a-empty description="暂无数据" :image="simpleImage" />
        </div>
        <div
          v-for="(item, index) in list"
          :key="index"
          :class="{
            'bg-primary-pink': index % 2 !== 0,
          }"
          class="w-full flex lh44 items-center"
        >
          <div class="w-1/4 font16 font-bold border-gray-right h-full">
            {{ item.type }}
          </div>
          <div class="w-1/4 font16 font-bold border-gray-right h-full">
            {{ item.kskm }}
          </div>
          <div class="w-1/4 font16 font-bold border-gray-right h-full">
            {{ item.score }}
          </div>
          <div class="w-1/4 font16 font-bold border-gray-right h-full">
            {{ item.createTime }}
          </div>
        </div>
        <div class="pt30">
          <div class="flex w-full justify-center">
            <div
              @click="changePageNum(pageNum - 1)"
              class="w80 lh36 border-yellow1 mr22 cursor-pointer"
            >
              《上一页
            </div>
            <div class="flex" v-if="pageTotalNum <= 7">
              <div
                class="border-yellow1 lh36 w36 mr22 cursor-pointer"
                v-for="(item, index) in pageTotalNum"
                @click="changePageNum(item)"
                :class="{
                  'bg-primary-pink': item == pageNum,
                }"
                :key="index"
              >
                {{ index + 1 }}
              </div>
            </div>
            <div class="flex" v-if="pageTotalNum > 7">
              <div
                :class="{
                  'bg-primary-pink': 1 == pageNum,
                }"
                @click="
                  () => {
                    pageNum = 1;
                  }
                "
                class="border-yellow1 lh36 w36 mr22 cursor-pointer"
              >
                {{ 1 }}
              </div>
              <div v-if="pageNum > 3" class="lh36 w36 mr22 font-bold">...</div>
              <div
                class="cursor-pointer"
                v-for="(item, index) in pageTotalNum"
                :key="index"
              >
                <div
                  @click="
                    () => {
                      pageNum = item;
                    }
                  "
                  v-if="
                    item > 1 &&
                    item < pageTotalNum &&
                    item <= pageNum + 2 &&
                    item >= pageNum - 2
                  "
                  :class="{
                    'bg-primary-pink': item == pageNum,
                  }"
                  class="lh36 w36 border-yellow1 mr22 overflow-hidden"
                >
                  {{ item }}
                </div>
              </div>
              <div
                v-if="pageNum + 1 < pageTotalNum"
                class="lh36 w36 mr22 font-bold"
              >
                ...
              </div>
              <div
                @click="
                  () => {
                    pageNum = pageTotalNum;
                  }
                "
                :class="{
                  'bg-primary-pink': pageTotalNum == pageNum,
                }"
                class="border-yellow1 lh36 w36 mr22 cursor-pointer"
              >
                {{ pageTotalNum }}
              </div>
            </div>

            <div
              @click="changePageNum(pageNum + 1)"
              class="w80 lh36 border-yellow1 cursor-pointer"
            >
              下一页》
            </div>
            <div class="lh36 ml10">共{{ pageTotalNum }}页</div>
            <div class="lh36 ml10">到</div>
            <div class="lh36 w36 ml10">
              <input
                class="outline-none w36 h36 text-center"
                v-model.number="inputPageNum"
                type="text"
              />
            </div>
            <div
              class="w61 lh36 bg-primary-yellow ml10 round5 cursor-pointer"
              @click="changePageNum(inputPageNum)"
            >
              确定
            </div>
            <span class="lh36 ml10">页</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Empty, message } from "ant-design-vue";
import { computed, defineComponent, ref } from "vue";
import api from "@/api";
import {scoreApi} from '@/api/score/type'
export default defineComponent({
  setup() {
    const pageTotal = ref(0);
    const pageSize = 10;
    const pageNum = ref(1);
    const pageTotalNum = computed(() => {
      return pageTotal.value % pageSize == 0
        ? pageTotal.value / pageSize
        : Math.floor(pageTotal.value / pageSize) + 1;
    });
    return {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      inputPageNum: ref(1),
      list: ref<scoreApi.scoreInfoListRes['rows']>([
      
      ]),
      pageTotal,
      pageNum,
      pageSize,
      pageTotalNum: pageTotalNum,
      changePageNum(newPageNum: number) {
        if (newPageNum < 1) {
          message.warn({
            content: "小于最小值",
          });
          return;
        }
        if (newPageNum > pageTotalNum.value) {
          message.warn({
            content: "超过最大值",
          });
          return;
        }
        pageNum.value = newPageNum;
      },
    };
  },
  mounted() {
    message.loading({
      content: "加载中",
    });
    api.score
      .scoreInfoList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
      .then((res) => {
        this.list = res.rows||[];
        console.log(res);
        this.pageTotal = res.total;
        message.destroy();
        message.success({
          content: "加载成功",
          duration: 1,
        });
        // this.pageTotal = res.total
      });
  },
  components: {
    aEmpty:Empty,
  },
  watch: {
    pageNum(newValue, oldValue) {
      if (newValue !== oldValue) {
        message.loading({
          content: "加载中",
        });
        api.score
          .scoreInfoList({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          })
          .then((res) => {
            this.list = res.rows||[];
            console.log(res);
            this.pageTotal = res.total;
            message.destroy();
            message.success({
              content: "加载成功",
              duration: 1,
            });
            // this.pageTotal = res.total
          });
      }
    },
  },
});
</script>

<style lang="scss" scoped>
.content {
  padding: 0 30px;
  padding-top: 21px;
  padding-bottom: 30px;

  .vertical-line {
    width: 5px;
    height: 20px;
    background: #f9de5b;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
  .bg-primary-yellow {
    background-color: #f9de5b;
  }
  .bg-primary-pink {
    background: #fff5cc;
  }
  .border-gray-right {
    border-right: 1px solid #e0e0e0;
  }
  .border-yellow1 {
    border: 1px solid #f9de5b;
  }
}
</style>