<template>
	<view class="info-card">
		<view class="header-row">
			<view>
				<text class="title">{{ title }}</text>
				<text class="code">{{ code }}</text>
			</view>
			<ServiceStatusTag v-if="statusText != ''" :text="statusText" :tone="statusTone"></ServiceStatusTag>
		</view>
		<view v-for="item in items" :key="item.label" class="info-line">
			<text class="info-label">{{ item.label }}</text>
			<text class="info-value">{{ item.value }}</text>
		</view>
	</view>
</template>

<script setup lang="uts">
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'

type ServiceInfoItem = {
	label: string
	value: string
}

defineProps({
	title: {
		type: String,
		default: ''
	},
	code: {
		type: String,
		default: ''
	},
	statusText: {
		type: String,
		default: ''
	},
	statusTone: {
		type: String,
		default: 'neutral'
	},
	items: {
		type: Array<ServiceInfoItem>,
		default: [] as Array<ServiceInfoItem>
	}
})
</script>

<style scoped>
.info-card {
	padding: 24rpx;
	border-radius: 20rpx;
	background: #f8fbfc;
}

.header-row {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12rpx;
}

.title {
	font-size: 34rpx;
	font-weight: 700;
	color: #16324f;
}

.code,
.info-label,
.info-value {
	margin-top: 10rpx;
	font-size: 26rpx;
	line-height: 38rpx;
}

.code,
.info-label {
	color: #66788a;
}

.info-value {
	color: #16324f;
	flex: 1;
	text-align: right;
}

.info-line {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 14rpx;
	border-top-width: 1rpx;
	border-top-style: solid;
	border-top-color: #e2e8f0;
	margin-top: 14rpx;
	gap: 24rpx;
}
</style>