<template>
  <view class="course-container">
    <u-tabs
      :list="tabsState.list"
      :is-scroll="false"
      v-model="tabsState.current"
      :active-item-style="{ fontSize: '34rpx', color: '#000000' }"
      font-size="28"
      bar-width="72"
      bar-height="6"
      bg-color="#fbfcff"
      inactive-color="#cecfcf"
      active-color="#05a8ff"
      @change="tabsChange"
    />
    <!-- 搜索 -->
    <uni-search-bar
      v-show="tabsState.current !== 0"
      placeholder="班级名称"
      bgColor="#ffffff"
      clearButton="auto"
      cancelButton="none"
      @confirm="search"
      @clear="clear"
    />
    <view v-show="tabsState.current === 2" class="tag">
      <text
        v-for="(item, i) in tagList"
        :key="i"
        class="tag-item"
        :class="item.type === 'primary' ? 'tag-active' : ''"
        @click="changeTagType(i)"
        >{{ item.name }}
      </text>
    </view>
    <!-- 内容 -->
    <view v-if="courseList.length">
      <text v-show="tabsState.current" class="fund"
        >为你找到{{ listQuery.total }}个的课程</text
      >

      <block v-for="(item, index) in courseList" :key="index">
        <courseItem
          :courseItem="item"
          :current="tabsState.current"
          @init="tabsChange"
        />
      </block>
      <view v-if="tabsState.current" style="padding: 20rpx">
        <u-loadmore :status="status" icon-type="flower" />
      </view>
    </view>
    <u-empty
      v-else
      text="暂无数据~"
      icon-size="506"
      :margin-top="220"
      src="../../static/img/noData.png"
    ></u-empty>
  </view>
</template>

<script setup lang="ts">
import courseItem from "./components/courseItem.vue";
import useQqMaps from "@/utils/QqMaps";
import { getCourse } from "@/api/course";
import { useStudentStore } from "@/stores/modules/studentStore";

const globalStore = useStudentStore();

const tabsState = reactive({
  list: [
    {
      name: "上课中",
    },
    {
      name: "未开始",
    },
    {
      name: "已下课",
    },
  ],
  current: 0,
});

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

const status = ref("loadmore");

const listQuery = reactive({
  Phone: globalStore.infoData.FMOBILE,
  type: 0,
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  classId: "",
  Name: "",
  KqType: 0, // 0 全部，1 正常，2 缺勤，3 请假
});

const courseList: any = ref([] as any);

const { initQqMaps } = useQqMaps();

//点击标签
const tabsChange = (index: number) => {
  courseList.value = [];
  listQuery.pageIndex = 1;
  listQuery.pageSize = 10;
  switch (index) {
    case 0:
      listQuery.type = 0;
      break;
    case 1:
      listQuery.type = 1;
      break;
    default:
      listQuery.KqType = 0;
      tagList.value.map((item: any, i: number) => {
        if (!i) item.type = "primary";
        else item.type = "info";
      });
      listQuery.type = 2;
      break;
  }
  init();
};

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

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

const changeTagType = (index: number) => {
  if (index === listQuery.KqType) return;
  tagList.value.map((item: any, i: number) => {
    if (index === i) item.type = "primary";
    else item.type = "info";
  });
  listQuery.KqType = index;
  courseList.value = [];
  listQuery.pageIndex = 1;
  listQuery.pageSize = 10;
  init();
};

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

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

onMounted(async () => {
  await initQqMaps();
  await uni.$on("refresh", (data: any) => {
    if (data.refresh) {
      tabsChange(tabsState.current);
    }
  });
});

init();
</script>

<style lang="scss" scoped>
.course-container {
  padding: 0 30rpx 30rpx;
  padding-top: 20rpx;

  .tag {
    margin-bottom: 48rpx;

    .tag-item {
      margin-right: 24rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      padding: 8rpx 24rpx;
      font-weight: 400;
      color: #aeaeae;
      background: #ffffff;
    }

    .tag-active {
      background: #ddf3ff;
      color: #05a8ff;
    }
  }
}

:deep(uni-modal) {
  z-index: 99999 !important;
}
</style>
