<template>
	<view v-if="info" class="panel">
		<view class="head-row" v-if="info.user_patient">
			<image class="avatar" :src="patientAvatarSrc" mode="aspectFill" />
			<view class="head-meta">
				<view class="row name-row">
					<text class="v name">{{ info.user_patient.name }}</text>
					<text class="sub" v-if="info.user_patient.age">{{ info.user_patient.age }}岁</text>
				</view>
				<view class="row" v-if="info.order_no">
					<text class="k">订单号</text>
					<text class="v">{{ info.order_no }}</text>
				</view>
			</view>
		</view>
		<view class="row" v-else-if="info.order_no">
			<text class="k">订单号</text>
			<text class="v">{{ info.order_no }}</text>
		</view>
		<view class="row" v-if="healthLine"><text class="k">健康问卷</text><text class="v">{{ healthLine }}</text></view>
		<view v-if="registerOrder" class="block">
			<text class="block-title">本次挂号</text>
			<view v-if="registerOrder.order_no" class="row">
				<text class="k">挂号单号</text>
				<text class="v order-font">{{ registerOrder.order_no }}</text>
			</view>
			<view v-if="registerOrder.price != null && registerOrder.price !== ''" class="row">
				<text class="k">费用</text>
				<text class="v price">¥{{ registerOrder.price }}</text>
			</view>
			<view v-if="registerOrder.status != null && registerOrder.status !== ''" class="row">
				<text class="k">挂号状态</text>
				<text class="v">{{ registerStatusText(registerOrder.status) }}</text>
			</view>
			<view v-if="registerOrder.pay_status != null && registerOrder.pay_status !== ''" class="row">
				<text class="k">支付状态</text>
				<text class="v">{{ registerOrder.pay_status }}</text>
			</view>
			<view v-for="(sub, six) in childOrders" :key="six" class="sub-order">
				<text class="sub-order-label">子订单</text>
				<text class="sub-order-no">{{ sub.order_no || sub.no || '—' }}</text>
				<text v-if="sub.status != null" class="sub-order-st">{{ sub.status }}</text>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 在线问诊顶部患者信息面板：头像 + 基本信息 + 本次挂号摘要
 */
export default {
	name: 'PatientDetailPanel',
	props: {
		info: { type: Object, default: null }
	},
	computed: {
		/** 有就诊人头像用真实图，否则按性别默认 nan/nv */
		patientAvatarSrc() {
			const up = this.info && this.info.user_patient;
			if (up && up.avatar) return up.avatar;
			const sex = up ? Number(up.sex) : 0;
			return require(`@/static/image/${sex % 2 === 0 ? 'nv' : 'nan'}.png`);
		},
		healthLine() {
			const h = this.info && this.info.user_patient_health_inquiry;
			if (!h) return '';
			if (typeof h === 'string') return h;
			return h.summary || h.chief_complaint || '';
		},
		registerOrder() {
			const i = this.info;
			if (!i) return null;
			return i.register_order || null;
		},
		childOrders() {
			const ro = this.registerOrder;
			if (!ro) return [];
			const raw = ro.child_orders || ro.sub_orders || ro.orders;
			return Array.isArray(raw) ? raw : [];
		}
	},
	methods: {
		registerStatusText(status) {
			const map = { 0: '待就诊', 1: '已缴费', 2: '已就诊', 3: '已取消', 4: '已退费' };
			const n = Number(status);
			return map[n] != null ? map[n] : String(status);
		}
	}
};
</script>

<style lang="scss" scoped>
.panel {
	padding: 16rpx 24rpx;
	background: #fff;
	border-radius: 12rpx;
	margin: 16rpx 24rpx;
}
.head-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 8rpx;
}
.avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: #e8f5f2;
	flex-shrink: 0;
}
.head-meta {
	flex: 1;
	min-width: 0;
}
.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 8rpx;
	font-size: 26rpx;
}
.name-row {
	margin-bottom: 4rpx;
}
.k {
	color: #888;
	margin-right: 12rpx;
}
.v {
	color: #333;
}
.v.name {
	font-weight: 600;
}
.sub {
	margin-left: 16rpx;
	color: #666;
	font-size: 24rpx;
}
.block {
	margin-top: 16rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid #f0f0f0;
}
.block-title {
	display: block;
	font-size: 26rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 12rpx;
}
.order-font {
	font-family: Courier, monospace;
	font-size: 24rpx;
}
.price {
	color: #ef4444;
	font-weight: 600;
}
.sub-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 24rpx;
	color: #666;
	margin-top: 8rpx;
	padding: 12rpx;
	background: #f9fafb;
	border-radius: 8rpx;
}
.sub-order-label {
	color: #999;
	margin-right: 8rpx;
}
.sub-order-no {
	flex: 1;
	color: #333;
}
.sub-order-st {
	margin-left: 12rpx;
}
</style>
