<template>
	<label-slect-field :label="label">
		<view class="cell-box" @click="onSelect">
			<view class="content-flex">
				<slot />
			</view>
			<view class="icon-wrap">
				<image :src="icon" class="icon-img"></image>
			</view>
		</view>
	</label-slect-field>

</template>

<script setup>
import { labelSlectField } from '@/components/com/appointment/label-slect-field.vue'
const props = defineProps({
	label: { type: String, default: '' },
	icon: { type: String, default: '' }
})
const emit = defineEmits(['select'])
const onSelect = () => emit('select')
</script>

<style scoped lang="scss">
.time-row {
	display: flex;
}

.label-wrap {
	width: 130rpx;
	line-height: 60rpx;
	height: 60rpx;
}

.label-text {
	font-size: 28rpx;
	color: #515151;
	font-weight: 500;
	text-transform: none;
	font-style: normal;
	font-family: PingFang SC, PingFang SC;
}

.value-wrap {
	flex: 1;
	line-height: 60rpx;
	height: 60rpx;
}

.cell-box {
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 15rpx;
	border: 2rpx solid #515151;
	padding-left: 20rpx;
	display: flex;
}

.content-flex {
	flex: 1;
}

.icon-wrap {
	width: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-img {
	width: 40rpx;
	height: 40rpx;
}
</style>
