<template>
	<view class="container">
		<view class="titleWrap">后勤保障服务清单与能力需求</view>
		<view class="main">
			<view class="modulesWrap">
				<view class="moduleWrap" v-for="(item,index) in kinds">
					<view class="subModuleWrap" v-for="(subItem,subIndex) in item.subSelectorList">
						<view class="moduleTitle">{{index+1}}.{{subIndex+1}} {{item.name}}/{{subItem.name}}</view>
						
						<view class="levelList">
							
							<view class="levelWrap" v-for="(levelItem,levelIndex) in subItem.levelList">
								<view class="levelTitle barber-item"  @click="chooseLevel(index, subIndex, levelIndex)">
									<text class="round" :class="choosedLevelIdList[index][subIndex].id == levelIndex ? 'barberactive' : ''"></text>
									<text class="input_left">{{ levelItem.name }}</text>
								</view>
								<!-- <view class="levelTitle">{{levelItem.name}}</view> -->
								
								<view class="uni-list prodsList" v-if="levelItem.prods && levelItem.prods.length>0">
									<checkbox-group style="word-break: keep-all;" @change="checkboxChange">
										
										 <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 v-else class="noProdWrap"> - </view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
			
			<view class="footer-box " @click="submit()">
				<!-- <image class="notCheck" src="../../static/food/notCheck.png" mode="widthFix"></image> -->
				<text>下一步</text>
			</view>
		</view>
					
				
	</view>
</template>
	
<script>
	import { getAllProdunctions,getCatagoryList,getProductionList } from '@/common/api.js';
	import { callbackRequest, alertTip, sureAlterTip, getStorage ,setStorage} from '@/common/util.js';
	export default {
		data() {
			return {
				subArray:[],
				tempObj:{},
				choosedLevelIdList:[
					[
						{
							'id':'3',
							"value":''
						},
						{
							'id':'2',
							"value":''
						},
						{
							'id':'1',
							"value":''
						},
					],
					[
						{
							'id':'1',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
					],
					[
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
					],
					[
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
						{
							'id':'0',
							"value":''
						},
					],
					
					
					
				],
				kinds: [
					{
						id: '1',
						name: '通行',
						subSelectorList:[
							{
								id:'1001',
								name:'访客管理',
								levelList:[
									
									{
										id:'100101',
										value:'100101',
										name:'低配',
										prods:[
											{
												'value':'10001',
												'name':'实名认证',
												'checked':0
											},
											{
												'value':'10002',
												'name':'自助登记',
												'checked':1
											},
											{
												'value':'10003',
												'name':'大屏播报',
												'checked':0
											},
											{
												'value':'10004',
												'name':'移动预约',
												'checked':0
											},
											{
												'value':'10005',
												'name':'访客授权',
												'checked':0
											},
											{
												'value':'10006',
												'name':'智能引导',
												'checked':0
											}
										]
									},
									{
										id:'100102',
										value:'100102',
										name:'中配',
										prods:[
											{
												'value':'10001',
												'name':'实名认证',
												'checked':0
											},
											{
												'value':'10002',
												'name':'自助登记',
												'checked':1
											},
											{
												'value':'10003',
												'name':'大屏播报',
												'checked':0
											},
											{
												'value':'10004',
												'name':'移动预约',
												'checked':0
											},
											{
												'value':'10005',
												'name':'访客授权',
												'checked':0
											},
											{
												'value':'10006',
												'name':'智能引导',
												'checked':0
											}
										]
									},
									{
										id:'100103',
										value:'100103',
										name:'高配',
										prods:[
											{
												'value':'10001',
												'name':'实名认证',
												'checked':1
											},
											{
												'value':'10002',
												'name':'自助登记',
												'checked':1
											},
											{
												'value':'10003',
												'name':'大屏播报',
												'checked':1
											},
											{
												'value':'10004',
												'name':'移动预约',
												'checked':1
											},
											{
												'value':'10005',
												'name':'访客授权',
												'checked':1
											},
											{
												'value':'10006',
												'name':'智能引导',
												'checked':1
											}
										]
									},
									{
										id:'100104',
										value:'100104',
										name:'不选',
										prods:[]
									},
								]
							},
							{
								id:'1002',
								name:'会议管理',
								levelList:[
									
									{
										id:'100201',
										value:'100201',
										name:'低配',
										prods:[
											{
												'value':'10001',
												'name':'实名认证',
												'checked':0
											},
											{
												'value':'10002',
												'name':'自助登记',
												'checked':1
											},
											{
												'value':'10003',
												'name':'大屏播报',
												'checked':0
											},
											{
												'value':'10004',
												'name':'移动预约',
												'checked':0
											},
											{
												'value':'10005',
												'name':'访客授权',
												'checked':0
											},
											{
												'value':'10006',
												'name':'智能引导',
												'checked':0
											}
										]
									},
									{
										id:'100202',
										value:'100202',
										name:'中配',
										prods:[
											{
												'value':'10001',
												'name':'实名认证',
												'checked':0
											},
											{
												'value':'10002',
												'name':'自助登记',
												'checked':1
											},
											{
												'value':'10003',
												'name':'大屏播报',
												'checked':0
											},
											{
												'value':'10004',
												'name':'移动预约',
												'checked':0
											},
											{
												'value':'10005',
												'name':'访客授权',
												'checked':0
											},
											{
												'value':'10006',
												'name':'智能引导',
												'checked':0
											}
										]
									},
									{
										id:'100203',
										value:'100203',
										name:'高配',
										prods:[
											{
												'id':'10001',
												'name':'实名认证',
												'checked':0
											},
											{
												'id':'10002',
												'name':'自助登记',
												'checked':1
											},
											{
												'id':'10003',
												'name':'大屏播报',
												'checked':0
											},
											{
												'id':'10004',
												'name':'移动预约',
												'checked':0
											},
											{
												'id':'10005',
												'name':'访客授权',
												'checked':0
											},
											{
												'id':'10006',
												'name':'智能引导',
												'checked':0
											}
										]
									},
								]
							},
						]
					},
					{
						id: '2',
						name: '办公',
						subSelectorList:[
							{
								id:'2001',
								name:'访客管理1',
								levelList:[
									{
										id:'200104',
										value:'200204',
										name:'不选'
									},
									{
										id:'200101',
										value:'200201',
										name:'低配'
									},
									{
										id:'200102',
										value:'200102',
										name:'中配'
									},
									{
										id:'200103',
										value:'200103',
										name:'高配'
									},
								]
							},
							{
								id:'2002',
								name:'会议管理1',
								levelList:[
									{
										id:'200204',
										value:'200204',
										name:'不选'
									},
									{
										id:'200201',
										value:'200201',
										name:'低配'
									},
									{
										id:'200202',
										value:'200202',
										name:'中配'
									}
									
								]
							},
						]
					},
					
				]
			}
		},
		onShow() {
			this.getCatagoryList();
		},
		methods:{
			checkboxChange(){
				
			},
			chooseLevel(index,subItemIndex, levelIndex){
				
				this.choosedLevelIdList[index][subItemIndex].id=levelIndex;
				// console.log(this.choosedLevelIdList)
			},
			getCatagoryList(){
				let data = {
					method: getAllProdunctions,
					data: { userId: this.userId }
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						let result = res.data.returnData;
						this.kinds = result.list;
						console.log(this.kinds);
						
						this.tempObj = {};
						for(var i=0;i<result.list.length;i++){
							let mainModule = result.list[i];
							this.subArray = [];
							for(var j=0;j<mainModule.subSelectorList.length;j++){
								this.choosedLevelIdList[i][j].id=0;
								this.choosedLevelIdList[i][j].value='';
							}
						}
						console.log(this.choosedLevelIdList);
					}
				});
			},
			submit(){
				let self = this;
				setStorage('kinds', self.kinds);
				setStorage('choosedLevelIdList', self.choosedLevelIdList);
				uni.navigateTo({
				    url: './production_apply'
				});
			},
		}
	}
	
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	
	uni-checkbox-group uni-label{
		width: 100% !important;
		 display: inline-flex;
		 padding:20upx 0;
		 text-align: center;
		 line-height: 46upx;
		 display:inline-block;
	  }
	  
	.container {
		min-height: 100vh;
		overflow: hidden;
		background: #f8f8f8;
		
		.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%;
			
			.modulesWrap{
				padding-bottom:80upx;
			}
			
			.moduleWrap{
				width: 100%;
				
			}
			
			.subModuleWrap{
				width:100%;
				margin: 20upx 0;
				border-bottom: 1px solid #cfcfcf;
			}
			
			.moduleTitle{
				text-align: center;
				margin: 12px 0;
			}
			
			.levelList{
				width:100%;
				display: flex;
			}
			
			.levelWrap{
				// width:25%;
				min-width: 25%;
			}
			
			.levelTitle{
				text-align: center;
				font-size: 26upx;
			}
			
			.barberactive {
			    background: #007aff !important;
			}
			
			.barber-item{
				padding-right:30rpx;
				line-height:40rpx;
				
				
				.round {
				    width: 32upx;
				    height: 32upx;
				    border-radius: 50%;
				    background: #cccccc;
				    display: inline-block;
				    margin-right: 10upx;
					vertical-align:middle;
					border-radius: 32upx;
					
				}
				
				.input_left{
					vertical-align: middle;
					font-size:28rpx;
					color:#555;
				}
			}
			
			.produnctionWrap{
				font-size: 24upx;
				text-align: center;
				
			}
			.productionCheckbox{
				 transform:scale(0.7);
			}
			
			.noProdWrap{
				text-align: center;
			}
			
			.footer-box {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 80upx;
				background: #348ff1;
				text-align: center;
				line-height: 80upx;
				image {
					width: 50upx;
					vertical-align: middle;
				}
				text {
					font-size: 30upx;
					color: #fff;
					vertical-align: middle;
					padding-left: 10upx;
				}
			}
			
			
		}
		
		
	}
</style>
