<template>
	<view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#f0f0f0'}">
		<u-navbar title="小玉潭水库1" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
		<u-tabs :list="list1" @click="click" style="background-color: #fff;margin-top: 45px;"></u-tabs>
		<view class="" style="padding: 5px;">
			<view class="swiper-content">
				<text class="num">{{nowNum}}/{{15}}</text>
				<u-swiper :list="list2" @change="change" @click="click"></u-swiper>
				<text class="time">2024-08-12 11:00</text>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				show: false,
				model: {
					stm: '',
					etm: ''
				},
				nowNum:1,
				customStyle: {
					background: '#000'
				},
				list2: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				list1: [{
					name: '监测信息',
				}, {
					name: '基础信息',
				}, {
					name: '特征参数'
				}, {
					name: '库容曲线'
				}, {
					name: '责任人'
				}]
			};
		},
		onLoad() {
			console.log('小玉潭水库');
			this.getList()
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			change(e){
				console.log(e);
				this.nowNum = e.current+1
			},
			getList(){
				uni.$http.post('/gunshiApp/xyt/attResBase/list',this.model).then(res=>{
					console.log(res,'res');
				})
			},
			confirm(e) {
				console.log(e);
				this.model.start = e[0]
				this.model.end = e[1]
				this.show = false
			},
			cancel() {
				this.show = false
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/wtcl/detail/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-content{
		position: relative;
		.num{
			    position: absolute;
			    top: 4px;
			    left: 4px;
			    z-index: 1;
			    background-color: #000;
			    color: #fff;
			    padding: 0 4px;
			    border-radius: 6px;
			    opacity: .4;
			    font-size: 12px;
		}
		.time{
			position: absolute;
			background-color: #000;
			opacity: .4;
			color: #fff;
			bottom: 0;
			width:100%;
			padding: 4px;
		}
	}
</style>