<template>
  <!-- <headers title="我的班级" /> -->
  <u-tabs
    :list="tabsState.list"
    :is-scroll="false"
    v-model="tabsState.current"
    bg-color="#f5f5f5"
    @change="tabsChange"
  />
  <uni-search-bar
    placeholder="姓名/单位/电话"
    bgColor="#ffffff"
    clearButton="auto"
    cancelButton="none"
    @confirm="search"
    @clear="clear"
  />
  <view v-if="addressBookList.length" class="address-book-item-container">
    <text style="margin-bottom: 20rpx; display: block"
      >为你找到{{ listQuery.total }}个的同学</text
    >
    <block v-for="(item, i) in addressBookList" :key="i">
      <addressBookItem
        :addressBookItem="item"
        :buttonTitle="tabsState.current ? '' : '查看评价'"
        @tapButton="tapButton"
      />
    </block>
    <view style="padding: 20rpx">
      <u-loadmore :status="status" icon-type="flower" />
    </view>
  </view>
  <view v-else class="empty">
    <u-empty text="暂无数据" mode="list"></u-empty>
  </view>
</template>

<script setup lang="ts">
// import headers from "@/components/header/index.vue"
import addressBookItem from "./components/addressBookItem.vue"
import { getClassBook } from "@/api/class"
import { useGlobalStore } from "@/store/useStore"

const globalStore = useGlobalStore()

const listQuery = reactive({
  Phone: globalStore.Phone,
  classId: "",
  courseId: "",
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  type: 0,
  Name: "",
})

const tabsState = reactive({
  list: [
    {
      name: "已评价",
    },
    {
      name: "未评价",
    },
  ],
  current: 0,
})
const status = ref("loadmore")
const addressBookList = ref([] as any)

onLoad((options: any) => {
  listQuery.classId = options.classId
  listQuery.courseId = options.courseId
  init()
})

const search = (val: any) => {
  listQuery.Name = val.value
  tabsChange(tabsState.current)
}

const clear = () => {
  listQuery.Name = ""
  tabsChange(tabsState.current)
}

const tabsChange = (index: number) => {
  addressBookList.value = []
  listQuery.pageIndex = 1
  listQuery.pageSize = 10
  if (index) {
    listQuery.type = 1
  } else listQuery.type = 0
  init()
}

const tapButton = (classId: string, studentId: string, courseId: string) => {
  uni.navigateTo({
    url:
      "/pages/course/evaluate?classId=" +
      classId +
      "&courseId=" +
      courseId +
      "&studentId=" +
      studentId,
  })
}

const init = async () => {
  status.value = "loading"
  const { data: res } = await getClassBook(listQuery)
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore"
    else status.value = "nomore"
    addressBookList.value = res.data
    listQuery.total = res.total
  }
}
// 上拉加载数据
onReachBottom(() => {
  // 判断是否还有下一页数据
  if (listQuery.pageIndex * listQuery.pageSize >= listQuery.total)
    return (status.value = "nomore")
  // // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (status.value === "loading") return
  listQuery.pageIndex += 1
  init()
})
</script>

<style lang="scss" scoped>
.address-book-item-container {
  padding: 0 30rpx;

  .uni-searchbar {
    padding: 0;
    margin: 20rpx 0;
  }
}
</style>
