<template>
  <!-- <headers title='考勤详情' /> -->
  <div class="deatils-container">
    <uni-search-bar
      placeholder="课程名称/班级名称"
      bgColor="#ffffff"
      clearButton="auto"
      cancelButton="none"
      @confirm="search"
      @clear="clear"
    />
    <!-- <view class="tag">
      <u-tag
        v-for="(item, i) in tagList"
        :key="i"
        :text="item.name"
        shape="circle"
        mode="plain"
        :type="item.type"
        @click="changeTagType(i)"
      />
    </view> -->
    <view v-if="detailList.length">
      <text style="margin-bottom: 20rpx; display: block"
        >为你找到{{ listQuery.total }}个的班级</text
      >

      <block v-for="(item, index) in detailList" :key="index">
        <detailsItem :detailItem="item" @init="refresh" />
      </block>
      <view style="padding: 20rpx">
        <u-loadmore :status="status" icon-type="flower" />
      </view>
    </view>
    <view v-else class="empty">
      <u-empty text="暂无数据" mode="list" />
    </view>
  </div>
</template>

<script setup lang="ts">
import { getStateList } from "@/api/course"
import detailsItem from "./components/detailsItem.vue"

const tagList = ref([
  { type: "primary", name: "全部" },
  { type: "info", name: "正常" },
  { type: "info", name: "缺勤" },
  { type: "info", name: "请假" },
  { type: "info", name: "补签" },
])

const detailList = ref([] as any)

const listQuery = reactive({
  courseId: "",
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  Name: "",
})

const status = ref("loadmore")

// 上拉加载数据
onReachBottom(() => {
  // 判断是否还有下一页数据
  if (listQuery.pageIndex * listQuery.pageSize >= listQuery.total)
    return (status.value = "nomore")
  // // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (status.value === "loading") return
  listQuery.pageIndex += 1
  init()
})

const changeTagType = (index: number) => {
  tagList.value.map((item: any, i: number) => {
    if (index === i) item.type = "primary"
    else item.type = "info"
  })
}

const search = (val: any) => {
  listQuery.Name = val.value
  init()
}

const clear = () => {
  listQuery.Name = ""
  init()
}

const init = async () => {
  status.value = "loading"
  const { data: res } = await getStateList(listQuery)
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore"
    else status.value = "nomore"
    detailList.value = [...detailList.value, ...res.data]
    listQuery.total = res.total
  }
}

const refresh = () => {
  detailList.value = []
  init()
}

onLoad((options: any) => {
  listQuery.courseId = options.courseId
  init()
})
</script>

<style lang="scss" scoped>
.deatils-container {
  padding: 30rpx;

  .tag {
    margin-bottom: 30rpx;

    .u-tag {
      margin-right: 20rpx;
    }
  }
}
</style>
