<template>
  <view class="page">
    <u-navbar class="u-navbar" title="作业计划与实名制管控情况" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<scroll-view class="scroll-view" scroll-x="true">
		<view class="scroll-view-item" :class="hIndex == 1 ? 'active' : ''" @click="hIndex = 1">
			分公司
			<view class="activeLine" v-if="hIndex == 1"></view>
		</view>
		<view class="scroll-view-item" :class="hIndex == 2 ? 'active' : ''"  >
			项目
			<view class="activeLine" v-if="hIndex == 2"></view>
		</view>
		<view class="scroll-view-item" :class="hIndex == 3 ? 'active' : ''"  >
			分包合同
			<view class="activeLine" v-if="hIndex == 3"></view>
		</view>
		<view class="scroll-view-item" :class="hIndex == 4 ? 'active' : ''" @click="hIndex = 4">
			分包商
			<view class="activeLine" v-if="hIndex == 4"></view>
		</view>
	</scroll-view>
		 <view>
			 <web-view :src="webUrl1" v-if="hIndex==1" :fullscreen="false" :webview-styles="webviewStyles" @message="handleMessage1" style="overflow: auto;margin-top: 400rpx;"></web-view>
			 <web-view :src="webUrl2" v-if="hIndex==2" :fullscreen="false" :webview-styles="webviewStyles" @message="handleMessage2" style="overflow: auto;margin-top: 400rpx;"></web-view>
			 <web-view :src="webUrl3" v-if="hIndex==3" :fullscreen="false" :webview-styles="webviewStyles" style="overflow: auto;margin-top: 400rpx;"></web-view>
			 <web-view :src="webUrl4" v-if="hIndex==4" :fullscreen="false" :webview-styles="webviewStyles" style="overflow: auto;margin-top: 400rpx;"></web-view>
		 </view>
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		idNumber:uni.getStorageSync('realNameUser').idNumber, 
		hIndex:1,
		webUrl1:"/hybrid/html/planAndRealName/planAndRealName.html",
		webUrl2:"/hybrid/html/planAndRealName/planAndRealNameTwo.html",
		webUrl3:"/hybrid/html/planAndRealName/planAndRealNameThree.html",
		webUrl4:"/hybrid/html/planAndRealName/planAndRealNameFour.html",
		webviewStyles: {
			progress: false,
			width:'96%',
			height:'220',
			zIndex:'999',
			top:'140',
			left:'10',
			right:'10',
		},
    }
  },
  watch: {
	hIndex: function(newVal, oldVal) {
		this.getScal()//开启缩放
	}
  },
    onLoad() {
    },
    onShow() {
		//打开横屏
		// #ifdef APP-PLUS
		uni.showLoading({
			title: "加载中..."
		})
		setTimeout(() => {
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation('default');
			uni.hideLoading();
		}, 200)
		//#endif
		//开启缩放
		this.getScal()
	},
    onUnload() { 
		// #ifdef APP-PLUS
		plus.screen.lockOrientation('portrait-primary');
		// #endif
	}, 
	methods: {
		handleMessage1(e){
			console.log(e)
			this.hIndex=2
		},
		handleMessage2(e){ 
			// console.log(e)
			this.hIndex=3
		},
		getScal(){
				// #ifdef APP-PLUS
				const currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
				setTimeout(()=> {
					let wv = currentWebview.children()[0]
					wv.setStyle({scalable:true})
				}, 1000); //如果是页面初始化调用时，需要延时一下
				// #endif
		},
		// 返回
		leftClick() {
		  console.log('返回')
		  uni.navigateBack({
			delta: 1 // 返回
		  });
		}
    },

}
</script>

<style lang="scss"> 
.scroll-view {
	white-space: nowrap;
	width: 100%;
	background: #FFF;
}
 
.scroll-view-item {
	display: inline-block;
	width: 160rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	
	.activeLine{
		background:  #00337A;
		border-radius: 10upx;
		width: 160rpx;
		height: 6upx;
	}
}
.active {
	color: #333;
	font-weight: bolder;
	font-size: 32rpx;
}
.page {
	width: 100vw;
	height:100vh;
	background-color: #EFEFEF;
	box-sizing: border-box;
	.content{
		width: 100%;
		height: 80vh;
		padding-top: 20rpx;
		background: #EFEFEF;
 
		.view-box{
			width: 96%;
			height: auto;
			margin: 0rpx auto;
			background-color: #FFF;
			border-radius: 10rpx;
			padding-top: 20rpx;
			.title-view{
				font-size: 32rpx;
				font-weight: 600;
				margin-left: 20rpx;
			}
 
		} 
	} 
}
</style>
