<template>
  <view class="train-container">
    <!-- tabs标签 -->
    <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-model="Name"
      placeholder="培训名称"
      bgColor="#ffffff"
      clearButton="auto"
      cancelButton="none"
      @confirm="search"
      @clear="clear"
    />
    <!-- 内容 -->
    <view v-if="trainList.length">
      <text class="fund"
        >为你找到{{
          tabsState.current ? registeredQuery.total : listQuery.total
        }}个可报名的培训</text
      >
      <block v-for="(item, index) in trainList" :key="index">
        <trainItem
          :trainItem="item"
          :current="tabsState.current"
          @initTrain="tabsChange"
        />
      </block>
      <view 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>
  <!-- <view class="circle circle-primary">
    <view class="details">开始签到</view>
  </view> -->
</template>

<script setup lang="ts">
import trainItem from "./components/trainItem.vue";
import { getTrainAll, getTrainList } from "@/api/trainRegistration";
import { useGlobalStore } from "@/store/useStore";

const globalStore = useGlobalStore();

const tabsState = reactive({
  list: [
    {
      name: "报名中",
    },
    {
      name: "已报名",
    },
  ],
  current: 0,
});
const Name = ref();
const listQuery = reactive({
  Phone: globalStore.infoData.FMOBILE,
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  Name: "",
});

const registeredQuery = reactive({
  FSTUDENTID: globalStore.infoData.FSTUDENTID,
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  Name: "",
});

const status = ref("loadmore");

const trainList = ref([] as any);

const tabsChange = (index: number) => {
  trainList.value = [];
  if (index) {
    Name.value = registeredQuery.Name;
    initRegistered();
  } else {
    Name.value = listQuery.Name;
    init();
  }
};

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

const clear = (val: any) => {
  if (tabsState.current) {
    registeredQuery.Name = "";
  } else {
    listQuery.Name = "";
  }
  tabsChange(tabsState.current);
};

const initRegistered = async () => {
  status.value = "loading";
  const { data: res } = await getTrainList(registeredQuery);
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore";
    else status.value = "nomore";
    trainList.value = [...trainList.value, ...res.data];
    registeredQuery.total = res.total;
    //  console.log(trainList.value)
  }
};

// 上拉加载数据
onReachBottom(() => {
  if (tabsState.current) {
    // 判断是否还有下一页数据
    if (
      registeredQuery.pageIndex * registeredQuery.pageSize >=
      registeredQuery.total
    )
      return (status.value = "nomore");
    // // 判断是否正在请求其它数据，如果是，则不发起额外的请求
    if (status.value === "loading") return;
    registeredQuery.pageIndex += 1;
    initRegistered();
  } else {
    // 判断是否还有下一页数据
    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 } = await getTrainAll(listQuery);
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore";
    else status.value = "nomore";
    trainList.value = [...trainList.value, ...res.data];
    listQuery.total = res.total;
  }
};

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.train-container {
  padding: 0 32rpx 32rpx;
}

.circle {
  position: relative;
  width: 325rpx;
  height: 325rpx;
  border-radius: 50%;
  margin: 20px auto;

  .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36rpx;
    font-weight: 400;
  }
}
</style>
