<script lang="ts" setup>
import type { IInvitation } from '@/api/types/appointment'
import { getInvitationDetail } from '@/api/appointment'

definePage({
  style: {
    navigationBarTitleText: '访客邀请',
  },
  // 邀请页不需要登录
  excludeLoginPath: true,
})

const invitation = ref<IInvitation | null>(null)
const loading = ref(true)

async function loadInvitation() {
  const pages = getCurrentPages()
  const current = pages[pages.length - 1] as any
  const code = current?.options?.code
  if (!code) {
    uni.showToast({ title: '无效的邀请码', icon: 'none' })
    loading.value = false
    return
  }
  try {
    invitation.value = await getInvitationDetail(code)
  } catch {
    uni.showToast({ title: '邀请不存在或已过期', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function goCreate() {
  if (!invitation.value) return
  uni.navigateTo({
    url: `/subpackages/appointment/appointment-form?invite_code=${invitation.value.invite_code}`,
  })
}

onLoad(() => {
  loadInvitation()
})
</script>

<template>
  <view class="invitation-page min-h-screen bg-[#f5f5f5]">
    <wd-loading v-if="loading" custom-class="flex justify-center py-20" />

    <template v-else-if="invitation">
      <!-- 邀请头部 -->
      <view class="bg-gradient-to-r from-purple-500 to-purple-700 px-5 py-8 text-center">
        <text class="text-2xl font-bold text-white">访客邀请</text>
        <text class="mt-2 block text-sm text-white/80">
          {{ invitation.employee?.name }} 邀请您来访
        </text>
      </view>

      <!-- 邀请详情 -->
      <view class="mx-3 mt-3 rounded-xl bg-white">
        <wd-cell-group title="邀请详情" border>
          <wd-cell title="邀请人" :value="invitation.employee?.name || '-'" />
          <wd-cell title="部门" :value="invitation.employee?.department || '-'" />
          <wd-cell v-if="invitation.visitor_name" title="访客姓名" :value="invitation.visitor_name" />
          <wd-cell v-if="invitation.visitor_phone" title="访客手机" :value="invitation.visitor_phone" />
          <wd-cell title="来访目的" :value="invitation.visit_type" />
          <wd-cell v-if="invitation.visit_area" title="预设区域" :value="invitation.visit_area" />
          <wd-cell title="有效期" :value="`${invitation.valid_from?.slice(0, 10)} ~ ${invitation.valid_until?.slice(0, 10)}`" />
          <wd-cell title="剩余次数" :value="`${invitation.max_use_count - invitation.used_count}/${invitation.max_use_count}`" />
        </wd-cell-group>
      </view>

      <!-- 使用邀请 -->
      <view v-if="invitation.is_active && invitation.used_count < invitation.max_use_count" class="px-3 pt-4">
        <wd-button type="primary" size="large" block @click="goCreate">
          使用邀请创建预约
        </wd-button>
      </view>
      <view v-else class="px-3 pt-4">
        <wd-button type="info" size="large" block disabled>
          邀请已失效
        </wd-button>
      </view>
    </template>

    <view v-else class="flex flex-col items-center justify-center py-20">
      <wd-icon name="warning" size="48px" color="#ccc" />
      <text class="mt-4 text-[#999]">邀请不存在或已过期</text>
    </view>
  </view>
</template>

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