<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { verifyEmployee } from '@/api/appointment'
import type { IEmployee } from '@/api/types/appointment'

definePage({
  style: { navigationBarTitleText: '选择公司接待人员' },
})

const employeeName = ref('')
const employeePhone = ref('')
const verifying = ref(false)
const verifiedInfo = ref<IEmployee | null>(null)

onLoad((options?: any) => {
  if (options?.employee) {
    try {
      const data = JSON.parse(decodeURIComponent(options.employee))
      employeeName.value = data.name || ''
      employeePhone.value = data.phone || ''
      verifiedInfo.value = data as IEmployee
    } catch {}
  }
})

async function handleVerify() {
  if (!employeeName.value.trim()) { uni.showToast({ title: '请输入员工姓名', icon: 'none' }); return }
  if (!/^1[3-9]\d{9}$/.test(employeePhone.value)) { uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); return }
  verifying.value = true
  try {
    const res = await verifyEmployee(employeeName.value.trim(), employeePhone.value.trim())
    verifiedInfo.value = res as unknown as IEmployee
    uni.showToast({ title: '已匹配：' + res.name + '(' + res.department + ')', icon: 'success' })
  } catch {
    verifiedInfo.value = null
  } finally {
    verifying.value = false
  }
}

function confirmEmployee() {
  if (!verifiedInfo.value) { uni.showToast({ title: '请先验证员工信息', icon: 'none' }); return }
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  if (prevPage) {
    ;(prevPage as any).employeeResult = verifiedInfo.value
  }
  uni.navigateBack()
}
</script>

<template>
  <view class="min-h-screen bg-[#f5f7fa] px-4 pt-4">
    <!-- 输入区 -->
    <view class="card">
      <view class="card-title">公司接待人员信息</view>
      <view class="card-body">
        <view class="form-row">
          <text class="form-label">姓名</text>
          <view class="flex-1"><wd-input v-model="employeeName" placeholder="请输入员工姓名" clearable /></view>
        </view>
        <view class="form-row">
          <text class="form-label">手机号</text>
          <view class="flex-1"><wd-input v-model="employeePhone" placeholder="请输入员工手机号" type="number" :maxlength="11" clearable /></view>
          <wd-button :loading="verifying" @click="handleVerify" custom-style="margin-left:8px;flex-shrink:0">验证</wd-button>
        </view>
      </view>
    </view>

    <!-- 验证结果 -->
    <view v-if="verifiedInfo" class="card mt-3">
      <view class="card-body">
        <view class="px-4 py-3">
          <view class="flex items-center gap-2 mb-2">
            <wd-icon name="check" size="20" color="#18bc37" />
            <text class="text-base font-medium text-[#1a1a1a]">{{ verifiedInfo.name }}</text>
          </view>
          <view class="text-sm text-[#666] leading-relaxed">部门：{{ verifiedInfo.department }}</view>
          <view class="text-sm text-[#666] leading-relaxed">手机：{{ verifiedInfo.phone }}</view>
        </view>
      </view>
    </view>

    <!-- 提示 -->
    <view class="card mt-3">
      <view class="card-body">
        <view class="flex items-start gap-2 px-4 py-3">
          <wd-icon name="warning" size="16" color="#f59e0b" />
          <text class="flex-1 text-xs text-gray-500">请输入公司接待人员的真实姓名和手机号，系统将自动验证身份</text>
        </view>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="mt-6 px-4">
      <wd-button type="primary" size="large" block round :disabled="!verifiedInfo" @click="confirmEmployee">
        {{ verifiedInfo ? '选择该员工' : '请先验证员工信息' }}
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.card { background: #fff; border-radius: 12px; overflow: hidden; }
.card-title { font-size: 13px; font-weight: 600; color: #999; padding: 12px 16px 4px; letter-spacing: 0.5px; }
.card-body { padding: 4px 0; }
.form-row { display: flex; align-items: center; padding: 8px 16px; min-height: 44px; }
.form-label { font-size: 15px; color: #333; width: 5em; flex-shrink: 0; }
</style>