<template>
	<view class="bar" v-if="visible">
		<button v-if="showAccept" class="btn primary" @click="$emit('accept')">接诊</button>
		<button v-if="showRefuse" class="btn warn" @click="$emit('refuse')">拒诊</button>
		<button v-if="showPrescription" class="btn primary" @click="$emit('prescription')">开方</button>
		<button v-if="showEnd" class="btn plain" @click="$emit('end')">结束诊断</button>
	</view>
</template>

<script>
/** 与 RegisterStatusEnum 对齐：1=已支付待接诊 2=接诊中；按钮等宽铺满避免挤在左侧 */
export default {
	name: 'ReceptionActionBar',
	props: {
		registerStatus: { type: Number, default: 0 },
		roomEnded: { type: Boolean, default: false }
	},
	computed: {
		visible() {
			if (this.roomEnded) return false;
			return this.showAccept || this.showRefuse || this.showPrescription || this.showEnd;
		},
		showAccept() {
			return this.registerStatus === 1;
		},
		showRefuse() {
			return this.registerStatus === 1;
		},
		showPrescription() {
			return this.registerStatus === 2;
		},
		showEnd() {
			return this.registerStatus === 2;
		}
	}
};
</script>

<style lang="scss" scoped>
.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	gap: 24rpx;
	background: #f7f8fa;
	border-top: 1rpx solid #eee;
}
.btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	margin: 0;
	padding: 0;
	font-size: 30rpx;
	border-radius: 40rpx;
	border: none;
	&::after {
		border: none;
	}
}
.primary {
	background: #6acdbb !important;
	color: #fff !important;
}
.warn {
	background: #ff9800 !important;
	color: #fff !important;
}
.plain {
	background: #fff !important;
	color: #333 !important;
	border: 1rpx solid #ddd !important;
	&::after {
		border: none;
	}
}
</style>
