<template>
  <view>
    <CuNavbar title="升职申请"> </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">
          <ListItem
            v-for="item in list"
            :key="item.id"
            :title="item.job.name"
            :status-text="statusFun(item.promotion_status, 'promotion_status', 'name')"
            :status-color="statusFun(item.promotion_status, 'promotion_status', 'color')"
            :body="[
              { label: '推荐人: ', value: item.invitor.name },
              { label: '申请时间: ', value: item.created_format },
            ]"
            @click.stop="applyDetail(item)"
          />
        </view>
      </template>
    </MescrollItem>
    <MescrollItem
      ref="mescrollItem1"
      :top="88"
      :i="1"
      :index="tabIndex"
      :apiUrl="tabList[1].apiUrl"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <ListItem
            v-for="item in list"
            :key="item.id"
            :title="item.job.name"
            :status-text="statusFun(item.promotion_status, 'promotion_status', 'name')"
            :status-color="statusFun(item.promotion_status, 'promotion_status', 'color')"
            :body="[
              { label: '申请人: ', value: item.employee.name },
              { label: '申请时间: ', value: item.created_format },
            ]"
            @click.stop="applyDetail(item)"
          />
        </view>
      </template>
    </MescrollItem>
    <MescrollItem
      ref="mescrollItem2"
      :top="88"
      :i="2"
      :index="tabIndex"
      :apiUrl="tabList[2].apiUrl"
      :params="tabList[2].params"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <ListItem
            v-for="item in list"
            :key="item.id"
            :title="item.check.subject.job.name"
            :status-text="statusFun(item.check_status, 'statusExpense2', 'name')"
            :status-color="statusFun(item.check_status, 'statusExpense2', 'color')"
            :body="[
              { label: '申请人: ', value: item.check.subject.employee.name },
              { label: '推荐人: ', value: item.check.subject.invitor.name },
              { label: '申请时间: ', value: item.check.subject.created_format },
            ]"
            @click.stop="checkDetail(item)"
          />
        </view>
      </template>
    </MescrollItem>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { ref } from 'vue'
import { onPageScroll, onReachBottom, onLoad } 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'
import ListItem from '@/components/list-item/index'

const tabList = ref([
  {
    name: '申请列表',
    apiUrl: '/hr/promotion/apply',
  },
  {
    name: '推荐列表',
    apiUrl: '/hr/promotion/invite',
  },
  {
    name: '审核列表',
    apiUrl: '/workflow',
    params: {
      subject_type: 'employee_promotions',
      include: 'check.subject.store,check.subject.invitor,check.subject.employee,check.subject.job',
    },
  },
])
const mescrollItem0 = ref(null)
const mescrollItem1 = ref(null)
const mescrollItem2 = ref(null)

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

onLoad(() => {
  uni.$on('refresh', () => {
    mescrollItem0?.value?.getMescroll()?.resetUpScroll()
    mescrollItem1?.value?.getMescroll()?.resetUpScroll()
    mescrollItem2?.value?.getMescroll()?.resetUpScroll()
  })
})

const goPath = (url) => {
  uni.navigateTo({
    url,
  })
}
const tabChange = ({ index }) => {
  tabIndex.value = index
  scrollToLastY()
}

const applyDetail = (item) => {
  let url = ''
  const tab = tabIndex.value
  if (
    (tab == 0 && item.promotion_status == 1) ||
    (tab == 1 && item.promotion_status == 2)
  ) {
    url = `/pages/work/create?id=${item.id}&type=${tab}`
  } else if (tab === 2) {
    url = `/pages/audits/detail?id=${item.id}`
  } else {
    url = `/pages/work/detail?id=${item.id}`
  }
  return uni.navigateTo({url})
}

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