<script setup lang="ts">
import type { RecordEntry } from '@af-mobile-client-vue3/components/data/UserDetail/recordEntries'
import type { BaseUser } from '@af-mobile-client-vue3/components/data/UserDetail/types'
import UserDetail from '@af-mobile-client-vue3/components/data/UserDetail/index.vue'
import { showToast, Dialog as VanDialog, NavBar as VanNavBar } from 'vant'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 从路由参数获取用户ID
const userInfoId = route.params.userInfoId as string

// 返回上一页
function handleBack() {
  router.back()
}

// 记录点击处理
function handleRecordClick(entry: RecordEntry, user: BaseUser) {
  showToast(`点击了${entry.title}，用户：${user.f_user_name}`)
}

// 业务办理点击处理
function handleBusinessClick(user: BaseUser) {
  VanDialog.alert({
    title: '业务办理',
    message: `为用户 ${user.f_user_name}（${user.f_userinfo_code}）办理业务`,
  })
}

// 打印处理
function handlePrint(user: BaseUser) {
  showToast(`打印用户 ${user.f_user_name} 的档案`)
}
</script>

<template>
  <div class="user-detail-page">
    <!-- 导航栏 -->
    <VanNavBar
      title="用户详情"
      left-text="返回"
      left-arrow
      @click-left="handleBack"
    />

    <!-- 用户详情组件 -->
    <UserDetail
      :user-info-id="userInfoId"
      :show-recent-time="true"
      :show-bottom-buttons="true"
      business-button-text="立即办理"
      @record-click="handleRecordClick"
      @business-click="handleBusinessClick"
      @print="handlePrint"
    />
  </div>
</template>

<style scoped lang="less">
.user-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .van-nav-bar {
    flex-shrink: 0;
  }

  :deep(.user-detail) {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
