<template>
	<view class="reservoir-overview">
		<view class="overview-box">
			<!-- 水位 -->
			<view class="water-level top-pannel">
				<view class="title">
					水库水位
				</view>

				<uni-tooltip :content="`${overviewData.level.value}${overviewData.level.unit}`" placement="top">
					<view class="value">
						{{overviewData.level.value}}{{overviewData.level.unit}}
					</view>
				</uni-tooltip>
				<view class="status">
					<text>较前日</text>
					<image style="width: 12rpx; height: 24rpx;" src="/static/images/index/reservoir/up.svg"
						mode="scaleToFill"></image>
					<text>{{overviewData.level.change}}{{overviewData.level.unit}}</text>
				</view>
			</view>
			<!-- 库容 -->
			<view class="water-capacity top-pannel">
				<view class="title">
					水库库容
				</view>
				<uni-tooltip :content="`${overviewData.capacity.value}${overviewData.capacity.unit}`" placement="top">
					<view class="value">
						{{overviewData.capacity.value}}{{overviewData.capacity.unit}}
					</view>
				</uni-tooltip>
				<view class="status">
					<text>较前日</text>
					<image style="width: 12rpx; height: 24rpx;" src="/static/images/index/reservoir/up.svg"
						mode="scaleToFill"></image>
					<text>{{overviewData.capacity.change}}{{overviewData.capacity.unit}}</text>
				</view>
			</view>
		</view>
		<view class="remark">
			<view class="item">
				<view class="label">
					数据来源：
				</view>
				<view class="value">
					{{overviewData.source}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					检查时间：
				</view>
				<view class="value">
					{{overviewData.time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		reactive,
		ref,
		watch
	} from 'vue'
	const props = {
		reservoirId: {
			type: String,
			default: '1'
		}
	}
	export default defineComponent({
		props,
		setup(props) {
			const saveId = ref(props.reservoirId)
			watch(
				() => props.reservoirId,
				(newVal) => {
					console.log(newVal)
					saveId.value = newVal
				}, {
					immediate: true
				}
			)
			const overviewData = reactive({
				source: "黑龙滩水库管理站/自动站监测",
				time: "2024-03-29 15:00",
				level: {
					status: 1,
					value: "480.61",
					change: "0.1",
					unit: "m³"
				},
				capacity: {
					status: 1,
					value: "3033",
					change: "33",
					unit: "万m³"
				}
			})
			return {
				overviewData
			}
		}
	})
</script>

<style lang="scss" scoped>
	.reservoir-overview {
		margin-top: 28rpx;
		padding: 40rpx;
		border-radius: 12rpx;
		opacity: 1;
		background: linear-gradient(180deg, #EEF8FF 0%, #FFFFFF 100%);

		.overview-box {
			display: flex;
			justify-content: space-between;

			.top-pannel {
				width: 50%;
				border-right: 2rpx dotted $uni-text-color-grey;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;

				&:last-child {
					border: none;
				}

				.title {
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: 500;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}

				.value {
					width: 100%;
					font-family: Source Han Sans;
					font-size: 60rpx;
					font-weight: bold;
					font-feature-settings: "kern" on;
					background: linear-gradient(180deg, #41B1F7 0%, #0671DD 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.status {
					padding: 0 10rpx;
					border-radius: 199998rpx;
					background: linear-gradient(180deg, rgba(65, 177, 247, 0.08) 0%, rgba(6, 113, 221, 0.08) 100%);
					display: flex;
					align-items: baseline;
					
					text{
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 500;
						font-feature-settings: "kern" on;
						background: linear-gradient(180deg, #41B1F7 0%, #0671DD 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}
			}
		}
		
		.remark{
			margin-top: 20rpx;
			
			.item{
				padding: 10rpx 0;
				display: flex;
				
				.label{
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-feature-settings: "kern" on;
					color: $uni-text-color-grey;
				}
				.value{
					font-family: 思源黑体;
					font-size: 28rpx;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}
			}
		}
	}
</style>