<template>
	<view class="container">
		<view class="titleWrap">后勤保障服务清单与能力需求</view>
		
		<view class="main">
			<view v-for="(item,index) in kinds">
				<view class="moduleTitle">{{getChinese(index+1)}}、{{item.name}}</view>
				<view v-for="(subItem,subIndex) in item.subSelectorList">
					<view class="levelWrap"  v-for="(levelItem,levelIndex) in subItem.levelList">
						<view class="prodctionTitle">{{subIndex+1}}. {{subItem.name}}-{{levelItem.name}}</view>
						<view class="uni-list prodsList" v-if="levelItem.name != '跳过'">
							<checkbox-group style="word-break: keep-all;">
								 <label class="produnctionWrap" v-for="(prodItem,prodIndex) in levelItem.prods" :key="item.value">
									<checkbox disabled="true" class="productionCheckbox" :value="prodItem.value" :checked="prodItem.isChecked==1?true:false" />{{prodItem.name}}
								</label>
							</checkbox-group>	
						</view>
						<view class="uni-list skipWrap" v-if="levelItem.name == '跳过'">
							暂未选择产品
						</view>
					</view>
				</view>
			</view>
			
			<view>
				<view class="mid_view">
					<view class="tab_left">
						姓　名：<!-- <text style="color: red;position: absolute;">*</text> -->
					</view>
					<view class="tab_rig">
						<input class="tab_text"  v-model="userName" placeholder="请填写姓名" maxlength="10" />
					</view>
				</view>
				<view class="mid_view">
					<view class="tab_left">
						手机号：<!-- <text style="color: red;position: absolute;">*</text> -->
					</view>
					<view class="tab_rig">
						<input class="tab_text" v-model="userPhone" type="number"  placeholder="请填写手机号码" maxlength="11"/>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="footer-box left" @click="goBack()">
			<text>上一步</text>
		</view>
		<view class="footer-box right" @click="wxShare()">
			<text>确认</text>
		</view>
	</view>
</template>

<script>
	import { wechatJsSdk2,getChoosedProdunctions } from '@/common/api.js';
	import { callbackRequest, alertTip, sureAlterTip, getStorage ,setStorage,transformNum2Chinese,devEnv} from '@/common/util.js';
	export default {
		data() {
			return {
				kinds:[],
				choosedLevelIdList:[],
				choosedLevelIds:[],
				userId:'',
				userName:'',
				userPhone:'',
				applyId:'',
			}
		},
		onLoad:function (option) { //option为object类型，会序列化上个页面传递的参数
			let self = this;
			self.applyId = option.applyId;
			self.getChoosedProdunctions();
			
			if(!devEnv){
				self.getWechatJsSdk();
			}
			else{
				this.locationDetail='安徽省合肥市蜀山区';
			}
		},
		
		methods: {
			//获取微信sdk
			getWechatJsSdk(){
				let url = window.location.href.split("#")[0]; // 这里务必编码
				let data = {
					method:wechatJsSdk2,
					data:{
						url:url
					}
				}
				callbackRequest(data)
				.then(res => {
					
					if(res.data.returnCode == 1){
						let e = res.data.returnData;
						this.init(e);		
						
					}
					console.log("---end get location---")
				})
			},
			//分享信息
			wxShare(){
				var self = this;
				self.$wx.onMenuShareTimeline({
					title: '1', // 分享标题
					// desc: '2', // 分享描述
					link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: '', // 分享图标
					// type:'',
					// dataUrl:'',
					success:function(locationRes){
						console.log("分享成功")
					},
					fail:function(){
						console.log("分享失败")
					}
				})
			},
			init(e){
				let _this = this;
				this.$wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: e.appId, // 必填，公众号的唯一标识
					timestamp: e.timestamp, // 必填，生成签名的时间戳
					nonceStr: e.noncestr, // 必填，生成签名的随机串
					signature: e.signature,// 必填，签名
					jsApiList: ["onMenuShareTimeline"
								] // 必填，需要使用的JS接口列表
						});
						this.$wx.ready(function(){				
							console.log("验证通过")
							_this.$wx.checkJsApi({
									 jsApiList:["onMenuShareTimeline"
										] , // 需要检测的JS接口列表，所有JS接口列表见附录2,
									 success: function(res) {
										console.log(res);
										
										
									 },
									 fail:function(e){
										 console.log(e);
										 
									 }
								});
						});
					this.$wx.error(function(res){
						console.log("验证失败")
						
					});
			
			},
			getChoosedProdunctions(){
				let self = this;
				let data = {
					method: getChoosedProdunctions,
					data: { 
							applyId: self.applyId
						  }
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						let result = res.data.returnData;
						this.kinds = result.list;
						console.log(this.kinds);
						
						
						if(result){
							this.userId=result.userId;
							this.userName=result.userName;
							this.userPhone=result.userPhone;
						}
					}
				});
			},
			
			goBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			getChinese(value){
				return transformNum2Chinese(value);
			},
		},
	}
</script>

<style lang="scss">
	
	uni-checkbox-group uni-label{
		width: 33% !important;
		 display: inline-flex;
		 padding:20upx 0;
		 text-align: left;
		 line-height: 46upx;
		 display:inline-block;
	  }
	
	.container {
		min-height: 100vh;
		overflow: hidden;
		background: #f8f8f8;
		
		.produnctionWrap{
			font-size: 24upx;
			text-align: center;
		}
		.productionCheckbox{
			 transform:scale(0.7);
		}
		
		.titleWrap{
			text-align: center;
			font-weight: 600;
			font-size: 36upx;
			padding:20upx 0upx;
			border-bottom: solid #CFCFCF 1px;
		}
		
		.main {
			position: absolute;
			// margin: 42upx 40upx 0;
			width: 100%;
			height:100%;
		}
		
		.moduleTitle{
			text-align: center;
			margin: 24upx 0;
		}
		
		.prodctionTitle{
			text-align: left;
			margin-left: 30upx;
			font-size: 30upx;
			margin-top: 20upx;
		}
		
		.levelWrap{
			border-bottom:1px solid #eee;
		}
		
		.skipWrap{
			text-align: center;
			font-size: 30upx;
			margin:20upx 0;
		}
		
		.right{
			right:20upx;
		}
		
		.left{
			left:20upx;
		}
		
		.footer-box {
			position: fixed;
			bottom: 5upx;
			border-radius: 10upx;
			width: 45%;
			height: 80upx;
			background: #348ff1;
			text-align: center;
			line-height: 80upx;
			
			text {
				font-size: 30upx;
				color: #fff;
				vertical-align: middle;
				padding-left: 10upx;
			}
		}
		
		.mid_view {
			padding: 3vw 0;
			display: flex;
			border-bottom: 1px solid #eee;
			font-size: 26upx;
		}
		
		.tab_left {
			width: 25vw;
			text-align: right;
			margin-right: 3vw;
			line-height:50rpx;
		}
		
		.tab_rig {
			width: 55vw;
			line-height:50rpx;
			input{
				height: 50rpx;
			}
		}
		
		.tab_text{
			font-size:26upx;
		}
	}
</style>
