<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar
			title="预警" 
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
		</u-navbar>
		<u-tabs 
			:list="tabsOptions" 
			@click="tabsChange" 
			:scrollable=false
			class="tabsClass"
			:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
			:inactiveStyle="{color: '#606266',fontSize: '16px'}"
			lineColor="transparent"
			itemStyle="height: 44px"
		>
		</u-tabs>
		<uniSh v-if="tabsVal==='uniSh'"></uniSh>
		<uniSk v-if="tabsVal==='uniSk'"></uniSk>
		<uniHd v-if="tabsVal==='uniHd'"></uniHd>
	</view>
</template>

<script>	
	import moment from 'moment'
	import uniSh from './sh.vue';
	import uniSk from './sk.vue';
	import uniHd from './hd.vue';

	export default {
		components: { uniSh, uniSk, uniHd },
		data() {
			return {
				tabsOptions:[
					{
						name:'水库预警',
						components:'uniSk'
					},
					{
						name:'河道预警',
						components:'uniHd'
					},
					{
						name:'山洪预警',
						components:'uniSh'
					},
				],
				tabsVal:'uniSk'
			};
		},
		methods: {
			tabsChange(item) {
				this.tabsVal = item.components
				console.log(this.tabsVal);
			}
		}
	}
</script>

<style lang="scss" scoped>
.myTitleStyle{
	font-size: 30px;
	background-color: red;
	height: 200px;
}
.tabsClass{
	margin-top: 44px;
	height: 44px;
	padding: 0 40px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
</style>
