<script lang="ts" setup>
import type { IAppointment } from '@/api/types/appointment'
import { getLeaderAppointments } from '@/api/appointment'
import { APPOINTMENT_STATUS_MAP } from '@/utils/constants'

definePage({
  style: {
    navigationBarTitleText: '领导追溯',
  },
})

const tabs = [
  { title: '全部', value: -1 },
  { title: '审核中', value: 0 },
  { title: '已通过', value: 1 },
]

const activeTab = ref(-1)
const list = ref<IAppointment[]>([])
const page = ref(1)
const total = ref(0)
const loading = ref(false)
const noMore = ref(false)

async function loadData(reset = false) {
  if (loading.value) return
  if (!reset && noMore.value) return

  loading.value = true
  if (reset) {
    page.value = 1
    list.value = []
    noMore.value = false
  }

  try {
    const params: Record<string, any> = { page: page.value, page_size: 10 }
    if (activeTab.value >= 0) {
      params.status = activeTab.value
    }
    const res = await getLeaderAppointments(params)
    if (reset) {
      list.value = res.list || []
    } else {
      list.value.push(...(res.list || []))
    }
    total.value = res.total
    if (list.value.length >= total.value) {
      noMore.value = true
    }
  } catch {
    // ignore
  } finally {
    loading.value = false
  }
}

function onTabChange(e: any) {
  activeTab.value = e?.detail?.value ?? e
  loadData(true)
}

function goDetail(id: number) {
  uni.navigateTo({ url: `/subpackages/appointment/appointment-detail?id=${id}` })
}

onLoad(() => {
  loadData(true)
})

onReachBottom(() => {
  if (!noMore.value) {
    page.value++
    loadData()
  }
})
</script>

<template>
  <view class="trace-page min-h-screen bg-[#f5f5f5]">
    <wd-tabs v-model="activeTab" @change="onTabChange">
      <wd-tab v-for="tab in tabs" :key="tab.value" :title="tab.title" :name="tab.value" />
    </wd-tabs>

    <view class="px-3 py-2">
      <wd-loading v-if="loading" custom-class="flex justify-center py-10" />

      <view v-else-if="list.length === 0" class="py-20 text-center text-[#999]">
        暂无预约记录
      </view>

      <view
        v-for="item in list"
        :key="item.id"
        class="mb-3 rounded-xl bg-white p-4 shadow-sm"
        @click="goDetail(item.id)"
      >
        <view class="mb-2 flex items-center justify-between">
          <wd-tag :type="APPOINTMENT_STATUS_MAP[item.status]?.color === '#18bc37' ? 'success' : 'primary'">
            {{ APPOINTMENT_STATUS_MAP[item.status]?.text || '未知' }}
          </wd-tag>
          <text class="text-sm text-[#999]">{{ item.visit_type }}</text>
        </view>
        <view class="text-sm text-[#666]">
          <view class="mb-1">被访人：{{ JSON.parse(item.employee_info || "{}")?.name }}（{{ JSON.parse(item.employee_info || "{}")?.department }}）</view>
          <view class="mb-1">访客：{{ JSON.parse(item.visitor_info || "{}")?.name }} {{ JSON.parse(item.visitor_info || "{}")?.phone }}</view>
          <view class="mb-1">时间：{{ item.visit_start_time?.slice(0, 16) }}</view>
        </view>
      </view>

      <view v-if="noMore && list.length > 0" class="py-4 text-center text-[#ccc]">
        没有更多了
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.trace-page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
