<template>
  <view>
    <van-tabs
      :active="data.ExamStatus"
      title-inactive-color="#444444"
      title-active-color="#00ACF9"
      line-height="0"
      @change="changeTab"
    >
      <van-tab title="全部" :name="0"></van-tab>
      <van-tab title="未开始" :name="1"></van-tab>
      <van-tab title="已开始" :name="2"></van-tab>
      <van-tab title="已缺考" :name="4"></van-tab>
      <van-tab title="已完成" :name="3"></van-tab>
    </van-tabs>
    <view class="exampaper-con">
      <van-empty description="暂无数据" v-if="examList.length === 0" />
      <scroll-view
        :scroll-top="0"
        scroll-y="true"
        class="scroll-box"
        @scrolltolower="lower"
        v-if="examList.length > 0"
      >
        <view
          v-for="(item, index) in examList"
          :key="index"
          class="exam-item"
          :style="{
            'background-image': item.PicList[0]
              ? `url(${item.PicList[0]})`
              : `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
          }"
          @click="
            jumpPage(
              item.PaperId,
              item.Id,
              item.Exam_Student_Id,
              item.ExamStatus
            )
          "
        >
          <view class="testName">
            {{ item.PaperName }}
          </view>
          <view class="testTime"> 考试时间:{{ item.ExamStartTime }} </view>
          <view class="teacherInfo-bg"></view>
          <view class="teacherInfo flex flex_between_center">
            <view class="flex flex_start_center">
              <text class="rank" style="margin-right: 20rpx;" v-if="item.MyRank>0">排名:#{{item.MyRank}}</text>
			  <text class="rank" v-if="item.TotalScore>0">得分:{{item.TotalScore}}</text>
            </view>
            <view
              class="exam-status"
              :class="{
                'status-blue': item.ExamStatusStr == '未开始',
                'status-green': item.ExamStatusStr == '已开始',
                'status-black': item.ExamStatusStr == '完成',
                'status-red': item.ExamStatusStr == '缺考',
              }"
            >
              {{ item.ExamStatusStr }}
            </view>
          </view>
        </view>
        <Loadmore :state="pageState" />
      </scroll-view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import Loadmore from "../../components/loadmore.vue";
import { getPaperList } from "../../api/exam";
export default {
  components: {
    Loadmore,
  },
  setup() {
    let data = reactive({
      pageState: "more",
      examList: [],
      msg: {
        PageIndex: 1,
        PageSize: 10,
        ExamStatus: 0,
        GuestId: 0,
      },
      PageCount: 0,
      timer: null, //防抖
    });
    let methods = {
      changeTab(e) {
        data.msg.ExamStatus = e.detail.name;
        data.msg.PageIndex = 1;
        methods.getList();
      },
      jumpPage(PaperId, Id, SId, ExamStatus) {
        if (ExamStatus == 5) {
          uni.navigateTo({
            url:
              "/pages/exam/examScore?PaperId=" +
              PaperId +
              "&&Id=" +
              Id +
              "&&Exam_Student_Id=" +
              SId +
              "&&ExamStatus=" +
              ExamStatus +
              "&&GuestId=" +
              this.msg.GuestId,
          });
        } else {
          uni.navigateTo({
            url:
              "/pages/exam/examPaper?PaperId=" +
              PaperId +
              "&&Id=" +
              Id +
              "&&Exam_Student_Id=" +
              SId +
              "&&ExamStatus=" +
              ExamStatus +
              "&&GuestId=" +
              this.msg.GuestId,
          });
        }
      },
      lower(e) {
        if (data.msg.PageIndex < data.PageCount) {
          data.pageState = "loading";
          if (data.timer) clearTimeout(data.timer);
          data.timer = setTimeout(() => {
			data.msg.PageIndex++;
            that.getList();
          }, 1000);
        } else {
          data.pageState = "none";
        }
      },
      async getList() {
        data.pageState = "loading";
        let res = await getPaperList(data.msg);
        if (res) {
          if (data.timer) data.timer = null;
          data.PageCount = res.Data.PageCount;
          if (data.msg.PageIndex === 1) {
            data.examList = res.Data.PageData;
          } else {
            data.examList = [...data.examList,...res.Data.PageData];
          }
          if (data.msg.PageIndex >= res.Data.PageCount) {
            data.pageState = "none";
          } else {
            data.pageState = "more";
          }
        }
      },
    };
    onMounted(() => {});
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(optipns) {
    uni.setNavigationBarTitle({
      title: "试卷列表",
    });
    this.msg.GuestId = optipns.Id;
    console.log(146, optipns);
    this.getList();
  },
};
</script>

<style scoped>
/deep/.van-tab {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
}
/deep/.van-tab--active {
  font-size: 26rpx !important;
  font-weight: bold !important;
}
.exampaper-con {
  height: calc(100vh - 100rpx);
  box-sizing: border-box;
  margin-top: 10rpx;
}
.exam-item {
  height: 250rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  overflow: hidden;
  /* background-color: #333333; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 60rpx;
  padding-left: 44rpx;
  position: relative;
  margin-bottom: 30rpx;
}

.testName {
  font-size: 40rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0f1b35;
  margin-bottom: 20rpx;
}

.testTime {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #0f1b35;
}
.teacherInfo-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70rpx;
  background-image: linear-gradient(90deg, #000000, #ffffff);
  opacity: 0.4;
  z-index: 1;
}
.teacherInfo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70rpx;
  z-index: 2;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.teacherName {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 10rpx;
}
.exam-status {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #00acf9;
}
.scroll-box {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx 40rpx;
}
.status-blue {
  color: #00acf9;
}
.status-green {
  color: #00df9f;
}
.status-black {
  color: #111111;
}
.status-red {
  color: #ff3816;
}
.rank{
	font-size: 26rpx;
	font-weight: 500;
	color: #111;
}
</style>
