<!-- 水库水情页面 -->
<template>
	<view class="reservoir-plan">
		<view class="menus-box">
			<view class="menus-item" v-for="(item,index) in menus" :key="index" :class="{'clicked':current===item.id}"
				@tap="handleChangeReservoir(item)">
				<text>{{item.title}}</text>
			</view>
		</view>
		<Overview :reservoirId="current"></Overview>
		<custom-date-select :range="range" @dateChange="handleDateSelect"></custom-date-select>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import Overview from './components/Overview.vue';
	import CustomDateSelect from '@/components/DateSelect/CustomDateSelect.vue';
	import moment from 'moment';
	const menus = [{
			title: "黑龙滩水库",
			id: "1"
		},
		{
			title: "李家沟水库",
			id: "2"
		}
	]
	const current = ref("1")
	const handleChangeReservoir = (item) => {
		current.value = item.id
	}
	const range = ref([moment().subtract(5,'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
	const handleDateSelect = (e)=>{
		console.log(e)
	}
</script>

<style lang="scss" scoped>
	.reservoir-plan {
		min-height: calc(100vh - var(--window-top) - 40rpx);
		background-color: $uni-user-page-bgc;
		padding: 20rpx;

		.menus-box {
			width: 100%;
			overflow-x: auto;
			display: flex;
			
			.menus-item{
				// width: 50%;
				flex: 0 0 50%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				
				text{
					// line-height: 80rpx;
					font-family: Source Han Sans;
					font-size: 40rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					font-feature-settings: "kern" on;
					border-bottom: 6rpx solid transparent;
					box-sizing: border-box;
					color: $uni-text-color;
					white-space: nowrap;
				}
			}
			
			.clicked {
				text{
					color: $uni-user-selected;
					border-bottom: 6rpx solid $uni-user-selected;
				}
			}
		}
	}
</style>