<template>
  <view>
    <CuNavbar title="补卡申请">
      <template #right>
        <view @click="goPath('/pages/make-card/create')" class="text-24rpx text-white">申请</view>
      </template>
    </CuNavbar>
    <uv-sticky bgColor="#fff">
      <uv-tabs
        :activeStyle="{ color: '#ee2c37' }"
        :scrollable="false"
        lineColor="#ee2c37"
        :list="tabList"
        @change="tabChange"
      ></uv-tabs>
    </uv-sticky>
    <MescrollItem ref="mescrollItem0" :top="88" :i="0" :index="tabIndex" :apiUrl="tabList[0].apiUrl">
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <view v-for="(item, i) in list" :key="i">
            <Item :item="item"></Item>
          </view>
        </view>
      </template>
    </MescrollItem>
  </view>
</template>
<script setup>
import CuNavbar from "@/components/cu-navbar/index"
import { ref } from "vue"
import { onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app"
import useMescrollMore from "@/uni_modules/mescroll-uni/hooks/useMescrollMore.js"
import MescrollItem from "@/components/mescroll-api/more.vue"
import Item from "./components/item.vue"
const tabList = ref([
  {
    name: "我的补卡",
    apiUrl: "/hr/sign-repairs"
  },
  {
    name: "补卡申请"
  }
])
const mescrollItem0 = ref(null)
const mescrollItem1 = ref(null)

const mescrollItems = [mescrollItem0, mescrollItem1]
const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(mescrollItems, onPageScroll, onReachBottom)
const goPath = url => {
  uni.navigateTo({
    url
  })
}
const tabChange = ({ index }) => {
  tabIndex.value = index
  scrollToLastY()
}
</script>
