<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"
      ></uv-tabs>
    </uv-sticky>
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="px-base space-y-20rpx mt-30rpx">
        <view
          v-for="item in list"
          :key="item.id"
          class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
        >
          <view class="flex items-center justify-between">
            <view class="text-30rpx"> {{ item.type.name }} </view>
            <view
              :style="[
                {
                  color: statusFun(
                    item.workflow_check.check_status,
                    'statusExpense',
                    'color'
                  ),
                },
              ]"
              class="text-24rpx"
              >{{ item.workflow_check.check_status_text }}</view
            >
          </view>
          <view class="text-24rpx text-hex-999999 flex">
            <view class="w-140rpx">报销金额</view>
            <view class="text-primary">{{ item.expense }}</view>
          </view>
          <view class="text-24rpx text-hex-999999 flex">
            <view class="w-140rpx">报销时间</view>
            <view class="text-hex-333">{{ timeFormat(item.created_at) }}</view>
          </view>
          <view class="text-24rpx text-hex-999999">
            <view class="">
              <text class="w-140rpx inline-block">报销原因:</text>
              <text class="text-hex-333 leading-27rpx">{{ item.reason }}</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </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 useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
import { timeFormat } from '@climblee/uv-ui/libs/function'
import statusFun from '@/utils/status'
const { mescrollInit, downCallback, getMescroll } = useMescroll(
  onPageScroll,
  onReachBottom
)
const list = ref([])

const tabList = ref([
  {
    name: '我的报销',
  },
  {
    name: '报销审核',
  },
])

const upCallback = async (mescroll) => {
  const { size, num } = mescroll

  try {
    const resData = await http.get('/reimbursements', {
      params: {
        per_page: size,
        page: num,
      },
    })
    const curPageData = resData || []
    if (num === 1) list.value = []
    list.value = list.value.concat(curPageData)
    mescroll.endSuccess(curPageData.length)
  } catch (error) {
    console.log(error)
    mescroll.endErr() // 请求失败, 结束加载
  } finally {
    // firstloading.value = false
  }
}

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