<template>
  <view>
    <CuNavbar title="请假申请">
      <template #right>
        <view
          @click="goPath('/pages/ask-leave/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 in list" :key="item.id"
            class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
            @click="applyDetail(item)"
          >
            <view class="text-30rpx">请假申请</view>
            <view class="text-24rpx text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">请假类型</view>
              <view class="">{{ item.type?.name }}</view>
            </view>
            <view class="text-24rpx text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">请假事由</view>
              <view class="">{{ item.reason }}</view>
            </view>
            <view class="flex items-center text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">申请时间</view>
              <view class="text-24rpx">{{ item.created_format }}</view>
            </view>
            <view :style="{ color: statusFun( item.workflow_check.check_status,'statusExpense','color')}" class="text-24rpx">{{ item.workflow_check.check_status_text }}</view>
          </view>
        </view>
      </template>
    </MescrollItem>
    <MescrollItem
      ref="mescrollItem1"
      :top="88"
      :i="1"
      :index="tabIndex"
      :apiUrl="tabList[1].apiUrl"
      :params="tabList[1].params"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <view
            v-for="item in list" :key="item.id"
            class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
            @click="checkDetail(item)"
          >
            <view class="text-30rpx">请假申请</view>
            <view class="text-24rpx text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">申请人</view>
              <view class="">{{ item.check.subject.employee.name }}</view>
            </view>
            <view class="text-24rpx text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">请假类型</view>
              <view class="">{{ item.check.subject.type.name }}</view>
            </view>
            <view class="text-24rpx text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">请假事由</view>
              <view class="">{{ item.check.subject.reason }}</view>
            </view>
            <view class="flex items-center text-hex-999999 flex">
              <view class="text-24rpx w-140rpx">申请时间</view>
              <view class="text-24rpx">{{ item.check.subject.created_format }}</view>
            </view>
            <view :style="{ color: statusFun( item.check_status,'statusExpense','color')}" class="text-24rpx">{{ item.check_status_text }}</view>
          </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 statusFun from '@/utils/status'
const tabList = ref([
  {
    name: '我的请假',
    apiUrl: '/hr/holidays',
  },
  {
    name: '请假审核',
    apiUrl: '/workflow',
    params: {
      subject_type: 'holiday_applies',
      include: 'check.subject.employee,check.subject.type',
    },
  },
])
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()
}

const applyDetail = (item) => {
  uni.navigateTo({
    url: `/pages/ask-leave/detail?id=${item.id}`,
  })
}

const checkDetail = (item) => {
  uni.navigateTo({
    url: `/pages/audits/detail?id=${item.id}&type=${item.check.subject_type}`
  })
}

</script>
