<template>
  <view>
    <CuNavbar title="报销管理">
      <template #right>
        <view
          @click="goPath('/pages/expense-account/submit')"
          class="text-24rpx text-white"
          >申请</view
        >
      </template>
    </CuNavbar>
    <uv-sticky bgColor="#fff">
      <uv-tabs
        :activeStyle="{ color: '#ee2c37' }"
        :scrollable="false"
        lineColor="#ee2c37"
        :list="tabList"
        :current="tabIndex"
        @change="tabChange"
      ></uv-tabs>
    </uv-sticky>
    <view class="px-base space-y-20rpx mt-30rpx">
      <MescrollItem
        ref="mescrollItem0"
        :top="88"
        :i="0"
        :index="tabIndex"
        :apiUrl="tabList[0].apiUrl"
      >
        <template v-slot="{ list }">
          <Item v-for="item in list" :key="item.id" :item="item" @click="detail" />
        </template>
      </MescrollItem>
      <MescrollItem
        ref="mescrollItem1"
        :i="1"
        :top="88"
        :index="tabIndex"
        :apiUrl="tabList[1].apiUrl"
        :params="tabList[1].params"
      >
        <template v-slot="{ list }">
          <Item v-for="item in list" :key="item.id" :item="item" @click="checkDetail" />
        </template>
      </MescrollItem>
    </view>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescrollMore from '@/uni_modules/mescroll-uni/hooks/useMescrollMore.js'
import { timeFormat } from '@climblee/uv-ui/libs/function'
import statusFun from '@/utils/status'
import MescrollItem from '@/components/mescroll-api/more.vue'
import Item from './item.vue'

const mescrollItem0 = ref(null)
const mescrollItem1 = ref(null)

const mescrollItems = [mescrollItem0, mescrollItem1]
const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(
  mescrollItems,
  onPageScroll,
  onReachBottom
)

const tabList = ref([
  {
    name: '我的报销',
    apiUrl: '/reimbursements',
  },
  {
    name: '报销审核',
    apiUrl: '/workflow',
    params: { subject_type: 'reimbursements', include: 'employee,type' }
  },
])

const tabChange = ({ index }) => {
  tabIndex.value = index
  scrollToLastY()
}

const goPath = (url) => {
  uni.navigateTo({
    url,
  })
}

// 跳转详细页
const detail = (item) => {
  console.log(item.id)
}
// 跳转审核页
const checkDetail = (item) => {
  console.log(item.id)
}
</script>
