<template>
	<view class="site-switch-header">
		<view class="selector-row">
			<uni-data-picker
				placeholder="请选择"
				popup-title="业态选择"
				:step-searh="true"
				:value="siteId"
				:clear-icon="false"
				:localdata="siteTypeOptions"
				:ellipsis="false"
				@change="handleChange"
			/>
			<view class="site-count-badge">{{ displaySiteCount }}</view>
		</view>
		<view class="info">
			<view class="list">
				<uni-icons type="location" color="#fff" size="20"></uni-icons>
				{{ siteAddress || '-' }}
			</view>
			<view class="list">
				<uni-icons type="calendar" color="#fff" size="20"></uni-icons>
				{{ runningTime || '-' }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			siteId: {
				type: [String, Number],
				default: ''
			},
			siteTypeOptions: {
				type: Array,
				default: () => []
			},
			siteAddress: {
				type: String,
				default: '-'
			},
			runningTime: {
				type: String,
				default: '-'
			},
			siteCount: {
				type: [String, Number],
				default: 0
			}
		},
		computed: {
			displaySiteCount() {
				const count = Number(this.siteCount || 0)
				if (!Number.isFinite(count) || count <= 0) {
					return '0'
				}
				return count > 99 ? '99+' : String(count)
			}
		},
		methods: {
			handleChange(data) {
				this.$emit('change', data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.site-switch-header {
		background: linear-gradient(to right, #547ef4, #679ff5);
		padding: 30rpx 30rpx;
		padding-bottom: 100rpx;
		color: #fff;

		.selector-row {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}

		.site-count-badge {
			min-width: 48rpx;
			height: 48rpx;
			padding: 0 12rpx;
			border-radius: 999rpx;
			background: #ff4d4f;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			line-height: 1;
			font-weight: 700;
			color: #fff;
			box-sizing: border-box;
			flex-shrink: 0;
			box-shadow: 0 6rpx 14rpx rgba(255, 77, 79, 0.28);
		}

		.info {
			color: #fff;
			font-size: 26rpx;
			line-height: 30rpx;
			vertical-align: middle;
			margin-top: 20rpx;

			>.list {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				&:not(:last-child) {
					margin-bottom: 20rpx;
				}

				>.uni-icons {
					margin-right: 10rpx;
				}
			}
		}

		.uni-data-tree {
			::v-deep {
				.uni-data-tree-dialog {
					color: #333;

					.selected-item,
					.dialog-title {
						color: #333;
					}
				}

				.input-value {
					border: none;
					padding-left: 0;

					.selected-area {
						width: 90%;
						flex: none;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						.selected-list {
							color: #fff;
						}
					}

					.text-color {
						color: #fff;
						font-size: 34rpx;
						line-height: 36rpx;
						font-weight: bolder;
					}

					.arrow-area {
						transform: rotate(-135deg);

						.input-arrow {
							border-color: #fff;
						}
					}
				}
			}
		}
	}
</style>
