<template>
  <view class="container">
    <view class="card">
      <view class="card-header-row">
        <text class="item-name">{{ detail.examination_item_name }}</text>
        <view class="status-tag" :class="getStatusClass(detail.status)">{{ getStatusText(detail.status) }}</view>
      </view>
    </view>

    <view class="card" v-if="detail">
      <view class="card-title">患者信息</view>
      <view class="card-row"><text class="card-label">姓名</text><text class="card-value">{{ detail.patient_name }}</text></view>
      <view class="card-row"><text class="card-label">性别</text><text class="card-value">{{ getGenderText(detail.patient_gender) }}</text></view>
      <view class="card-row"><text class="card-label">年龄</text><text class="card-value">{{ detail.patient_age }}岁</text></view>
      <view class="card-row"><text class="card-label">患者类型</text><text class="card-value">{{ detail.patient_type_name || '-' }}</text></view>
    </view>

    <view class="card">
      <view class="card-title">检查信息</view>
      <view class="card-row"><text class="card-label">检查项目</text><text class="card-value">{{ detail.examination_item_name }}</text></view>
      <view class="card-row"><text class="card-label">执行科室</text><text class="card-value">{{ detail.examination_department_name || '-' }}</text></view>
      <view class="card-row"><text class="card-label">申请科室</text><text class="card-value">{{ detail.apply_department_name || '-' }}</text></view>
      <view class="card-row"><text class="card-label">申请医生</text><text class="card-value">{{ detail.apply_doctor_name || '-' }}</text></view>
      <view class="card-row"><text class="card-label">申请时间</text><text class="card-value">{{ formatTime(detail.apply_time) }}</text></view>
      <view class="card-row" v-if="detail.clinical_diagnosis"><text class="card-label">临床诊断</text><text class="card-value">{{ detail.clinical_diagnosis }}</text></view>
    </view>

    <view class="card" v-if="detail.exam_item_detail">
      <view class="card-title">检查须知</view>
      <view class="card-row" v-if="detail.exam_item_detail.fasting_status === 1">
        <text class="warning-text">⚠️ 此检查需要空腹</text>
      </view>
      <view class="tips-content" v-if="detail.exam_item_detail.check_tips">
        {{ detail.exam_item_detail.check_tips }}
      </view>
      <view class="tips-content" v-else>暂无特殊注意事项</view>
    </view>

    <view class="card" v-if="detail.appointment_info">
      <view class="card-title">预约信息</view>
      <view class="card-row"><text class="card-label">预约时间</text><text class="card-value highlight">{{ formatTime(detail.appointment_info.appointment_time) }}</text></view>
      <view class="card-row"><text class="card-label">检查室</text><text class="card-value">{{ detail.appointment_info.resource_name || '-' }}</text></view>
    </view>

    <view class="bottom-bar" v-if="detail.status === 0">
      <view class="btn-primary" @tap="goSelectPlan">去预约</view>
    </view>
    <view class="bottom-bar" v-if="detail.status === 1 && detail.appointment_info">
      <view class="btn-danger" @tap="handleCancel">取消预约</view>
      <view class="btn-warning" @tap="handleReschedule">改约</view>
    </view>
  </view>
</template>

<script>
import { getApplicationDetail } from '../../services/application'
import { cancelAppointment } from '../../services/appointment'
import { formatTime, getStatusText, getStatusClass, getGenderText } from '../../utils/format'

export default {
  data() {
    return { detail: {}, applicationId: '' }
  },
  onLoad(options) {
    this.applicationId = options.id
    this.loadDetail()
  },
  methods: {
    formatTime, getStatusText, getStatusClass, getGenderText,
    async loadDetail() {
      try {
        const res = await getApplicationDetail({ application_id: this.applicationId })
        this.detail = res.data || {}
      } catch (e) {}
    },
    goSelectPlan() {
      uni.navigateTo({ url: `/pages/appointment/select-plan?application_ids=${this.applicationId}` })
    },
    handleCancel() {
      uni.showModal({
        title: '取消预约',
        content: '确定要取消此预约吗？',
        editable: true,
        placeholderText: '请输入取消原因（可选）',
        success: async (res) => {
          if (res.confirm) {
            try {
              await cancelAppointment({
                appointment_id: this.detail.appointment_info.id,
                cancel_reason: res.content || '患者主动取消'
              })
              uni.showToast({ title: '取消成功', icon: 'success' })
              setTimeout(() => uni.navigateBack(), 1500)
            } catch (e) {}
          }
        }
      })
    },
    handleReschedule() {
      uni.navigateTo({
        url: `/pages/reschedule/select-plan?appointment_id=${this.detail.appointment_info.id}&application_id=${this.applicationId}`
      })
    }
  }
}
</script>

<style scoped>
.card-header-row { display: flex; justify-content: space-between; align-items: center; }
.item-name { font-size: 36rpx; font-weight: 700; color: #333; }
.tips-content { font-size: 26rpx; color: #666; line-height: 1.8; padding: 12rpx 0; }
.warning-text { color: #FF9800; font-weight: 500; font-size: 28rpx; }
.highlight { color: #2B7FD2; font-weight: 600; }
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); background: #FFF; box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.06); display: flex; gap: 20rpx; }
.bottom-bar .btn-primary, .bottom-bar .btn-warning, .bottom-bar .btn-danger { flex: 1; }
</style>
