<template>
	<view class="site-switch-header">
		<uni-data-picker
			placeholder="请选择"
			popup-title="业态选择"
			:step-searh="true"
			:value="siteId"
			:clear-icon="false"
			:localdata="siteTypeOptions"
			:ellipsis="false"
			@change="handleChange"
		/>
		<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: '-'
			}
		},
		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;

		.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>
