<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>
		<uniQk v-if="tabsVal==='uniQk'" ref="childRef1"></uniQk>
		<uniXq v-if="tabsVal==='uniXq'" ref="childRef2"></uniXq>
	</view>
</template>

<script>	
	import moment from 'moment'
	import uniQk from './qk.vue';
	import uniXq from './xq.vue';

	export default {
		components: { uniQk, uniXq },
		data() {
			return {
				tabsOptions:[
					{
						name:'运行情况',
						components:'uniQk'
					},
					{
						name:'工程险情',
						components:'uniXq'
					}
				],
				tabsVal:'uniQk'
			};
		},
		methods: {
			tabsChange(item) {
				this.tabsVal = item.components
				console.log(this.tabsVal);
			},
			refresh(fun) {
				console.log('执行刷新')
				fun()
			}
		},
		onShow() {
			if(this.tabsVal==='uniQk'){
				this.$refs.childRef1.submit();
			}else{
				this.$refs.childRef2.submit();
			}
		},
	}
</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>
