<template>
	<view class="w-pull-down">
		<view class="mask" :class="{'show':isShowMask,'hide':!isShowMask}" @tap="togglePage()"></view>
		<view class="menu-list" :style="{height:isShowMask?'820upx':'88upx'}">
			<view class="choose-list" v-if="menuList.length>0">
				<view class="choose-li" :style="{width:(screenWidth-11-12)/menuList.length+'px',color:menuIndex===index?'#157ee4':'#333333','border-color':menuIndex===index?'#157ee4':'#ffffff'}" @tap="chooseMenu(index)" v-for="(item,index) in menuList"
				 :key='index'>
					{{item}}
				</view>
			</view>
			<view class="" v-if="isShowMask">
				<view class="menu-list-box" v-if="type=='select-line'">
					<scroll-view class="sub-menu-list" :style="{width:(screenWidth-10)/menuLength-3*(menuLength-1)/menuLength+'px'}" :scroll-y="true" v-for="(dataLi,dataIndex) in dataList"
					 :key='dataIndex' v-if="dataIndex<menuLength">
						<block v-for="(item,indexF) in dataList[dataIndex]" :key="indexF">
							<view class="menu-li" :class="indexF==indexList[dataIndex]?'active':''" :style="{color:color}" @tap="menuT(dataIndex,indexF,item[value])">
								<view class="ellipsisT">
									<text class="name" v-if="item.children">{{item[label]}}</text>
									<label class="" v-else :class="indexF==indexList[dataIndex]?'active':''" :style="{color:color}" @click.stop="checkboxChange(dataIndex,indexF,item[value])">
										<view class="ellipsisT">
											<!-- <radio :value="item[value]" :checked="checkValue==item[value]"/> -->
											<span class="labelName">{{item[label]}}</span>
											<u-icon class="checkIcon" name="checkmark" v-if="checkValue==item[value]"></u-icon>
										</view>
									</label>
									<u-icon name="arrow-right" v-if="item.children"></u-icon>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- {{menu}} -->
				<view class="more-menu-list" v-if="type=='select-list'">
					<view class="data-li" v-for="(dataLi,dataIndex)  in menu" :key='dataIndex'>
						<view class="topTit">
							{{dataLi.name}}
						</view>
						<view class="">
							<view class="content-li" :class="activeIf(contentLi.value,dataLi.value)>-1?'active':''" v-for="(contentLi,contentIndex)  in dataLi.list" :key='contentIndex' @tap="chooseData(contentLi.value,dataLi.value)">
								{{contentLi.label}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-list" v-if="isShowMask">
				<view class="button" @click="cancel">取消</view>
				<view class="button bgBtn" @click="confirm">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			maskCloseAble: {
				value: Boolean,
				default: false
			},
			menuIndex: {
				value: Number,
				default: 0
			},
			menuTop: {
				value: Number,
				default: 0
			},
			// menuLength: {
			// 	value: Number,
			// 	default: 4
			// },
			type:{
				value: String,
				default: ''
			},
			color: {
				value: String,
				default: '#000'
			},
			menuList: {
				value: Array,
				default: []
			},
			menu: {
				value: Array,
				default: []
			},
			url: {
				value: String,
				default: ''
			},
			label: {
				value: String,
				default: 'label'
			},
			value: {
				value: String,
				default: 'value'
			},
		},
		data() {
			return {
				menuLength:4,
				isShowMask: false,
				current: '',
				indexList: [0, 0, 0, 0],
				screenWidth: 0,
				screenHeight: 0,
				menuWidth: 0,
				result: '',
				dataList: [],
				chooseIndex:'',
				chooseList:[],
				checkValue:''
			};
		},
		watch:{
			menu(e) {
				
			},
			url(e){
				if(e&&this.menu.length==0){
					this.initPost()
				}
			},
			isShowMask(e){
				// if(e){
				// 	this.initData()
				// }
			},
			chooseIndex(e){
				if(e||e===0){
					if(this.type=='select-line'){
						this.indexList = [0, 0, 0, 0]
						this.initData()
					}else if(this.type=='select-list'){
						this.chooseList = []
					}
				}
			}
		},
		methods: {
			activeIf(value,valueF){
				let index = this.chooseList.findIndex((e)=>{
					return e.value==valueF
				})
				if(index<0){
					return index
				}else{
					let indexN = this.chooseList[index].list.indexOf(value);
					if(indexN<0){
						return indexN
					}else{
						return indexN
					}
				}
			},
			chooseData(value,valueF){
				let index = this.chooseList.findIndex((e)=>{
					return e.value==valueF
				})
				if(index<0){
					this.chooseList.push({
						'value':valueF,
						'list':[value]
					})
				}else{
					let indexN = this.chooseList[index].list.indexOf(value);
					if(indexN>-1){
						this.chooseList[index].list.splice(indexN,1)
						if(this.chooseList[index].list.length==0){
							this.chooseList.splice(index,1)
						}
					}else{
						this.$set(this.chooseList[index].list, this.chooseList[index].list.length+1, value);
					}
				}
				
			},
			checkboxChange(dataIndex, indexF, e) {
				if(this.checkValue==e){
					this.checkValue = ''
				}else{
					this.checkValue = e
				}
				this.$set(this.indexList, dataIndex, indexF);
				let value = this.dataList[dataIndex][indexF][this.value]
				// let index = this.checkList.indexOf(value);
				this.menuLength = dataIndex+1;
				// this.checkValue = value
				// if(index<0){
				// 	this.$set(this.checkList, this.checkList.length + 1, value)
				// }else{
				// 	this.checkList.splice(index,1)
				// }
			},
			confirm() {
				if(this.type=='select-line'){
					if (this.checkValue>0) {
						this.$emit('confirm', [this.checkValue])
						this.isShowMask = false
					}
				}else{
					if (this.chooseList.length>0) {
						this.$emit('confirm', this.chooseList)
						this.isShowMask = false
					}
				}
				

			},
			cancel() {
				this.isShowMask = false
			},
			togglePage() {
				if(this.maskCloseAble){
					this.isShowMask = false
				}
				// this.isShowMask = false
			},
			menuT(sequence, index) {
				this.checkValue = ''
				// if (sequence == 0) {
				// 	if (this.menu) {
				// 		this.menuLength = 1
				// 		if (this.menu[index].children) {
				// 			this.menuLength = 2
				// 			if (this.menu[index].children[0].children) {
				// 				this.menuLength = 3
				// 				if (this.menu[index].children[0].children[0].children) {
				// 					this.menuLength = 4
				// 				}
				// 			}
				// 		}
				// 	}
				// }
				if(this.dataList[sequence][index].children){
					this.menuLength = sequence+2
					if(this.dataList[sequence][index].children[0].children){
						this.menuLength = sequence+3
						if(this.dataList[sequence][index].children[0].children[0].children){
							this.menuLength = sequence+4
							// if(this.dataList[sequence][index].children[0].children[0].children[0].children){
							// 	this.menuLength = sequence+4
							// }
						}
					}
				}
				if (sequence + 1 == this.menuLength) {

				} else {
					this.$set(this.indexList, sequence, index)
					if (i + 1 < this.menuLength) {
						this.$set(this.indexList, i + 1, 0)
					}
					for (var i = sequence; i < this.menuLength; ++i) {
						if (i == 0) {
							this.$set(this.indexList, 1, 0)
							this.$set(this.dataList, i + 1, this.menu[this.indexList[i]].children)
						} else if (i == 1) {
							this.$set(this.indexList, 2, 0)
							this.$set(this.indexList, 3, 0)
							if(i>sequence||sequence===0){
								this.$set(this.dataList, i + 1, this.menu[this.indexList[0]].children[0].children)
							}else{
								this.$set(this.dataList, i + 1, this.menu[this.indexList[0]].children[this.indexList[i]].children)
							}
						} else if (i == 2) {
							this.$set(this.indexList, 3, 0)
							if(i>sequence||sequence===0){
								this.$set(this.dataList, i + 1, this.menu[this.indexList[0]].children[this.indexList[1]].children[0].children)
							}else{
								this.$set(this.dataList, i + 1, this.menu[this.indexList[0]].children[this.indexList[1]].children[
									this.indexList[i]].children)
							}
							
						} else if (i == 3) {}
					}
				}

			},
			chooseMenu(index) {
				if(this.chooseIndex === index){
					this.isShowMask = !this.isShowMask
					this.index = ''
					// this.menu = []
				}else{
					this.checkList = []
					this.$emit('choose', index)
					this.isShowMask = true
					this.chooseIndex = index
				}
			},
			initData(){
				this.checkValue = ''
				if(this.type=='select-line'){
					if (this.menu) {
						this.menuLength = 1
						if (this.menu[0].children) {
							this.menuLength = 2
							if (this.menu[0].children[0].children) {
								this.menuLength = 3
								if (this.menu[0].children[0].children[0].children) {
									this.menuLength = 4
								}
							}
						}
					}
					for (var i = 0; i < this.menuLength; ++i) {
						if (i == 0) {
							this.dataList[i] = this.menu
						} else if (i == 1) {
							if (this.menu) {
								this.dataList[i] = this.menu[0].children
							}
						} else if (i == 2) {
							if (this.menu[0].children) {
								this.dataList[i] = this.menu[0].children[0].children
							}
						} else if (i == 3) {
							if (this.menu[0].children[0].children) {
								this.dataList[i] = this.menu[0].children[0].children[0].children
							}
						}
					}
				}else if(this.type=='select-list'){
					this.dataList = this.menu
				}
			},
			initPost(code){
				uni.request({
				    url: this.url, //仅为示例，并非真实接口地址。
				    data: {
				        code: code
				    },
					method: 'POST',
				    success: (res) => {
						if(res.data.result){
							this.initPost(res.data.result[0].code)
						}else{
							console.log('结束')
						}
						
				    }
				});
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.screenWidth
					this.menuWidth = this.screenWidt / 4
					this.screenHeight = res.screenHeight
				}
			})
		}
	}
</script>

<style lang="scss">
	.w-pull-down {
		//遮罩层
		.mask {
			z-index: 10;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: transparent;
			-webkit-transition: background-color .15s linear;
			transition: background-color .15s linear;
		}

		.show {
			background-color: rgba(0, 0, 0, 0.5);
		}

		.hide {
			display: none;
		}

		.choose-list {
			// position: fixed;
			position: absolute;
			z-index: 99;
			left: 0;
			width:100%;
			height: 92upx;
			padding: 0 20upx;
			background: #fff;
			border-bottom: 2upx solid #f7f7f7;
			border-top: 2upx solid #f7f7f7;
			.choose-li {
				display: inline-block;
				text-align: center;
				height: 88upx;
				line-height: 88upx;
				border-bottom: 2px solid;
			}
		}
		.menu-list-box{
			min-height: 726upx;
			display: flex;
			flex-direction: row;
		}
		.btn-list {
			width: 100%;
			height: 80upx;
			display: flex;
			flex-direction: row;
			.button {
				width: 50%;
				text-align: center;
				height: 80upx;
				display: inline-block;
				line-height: 80upx;
				margin: 0;
				background: #fff;
				color: #000;
			}
			.bgBtn{
				background: #ffcf53;
			}
		}

		//展示区域
		.menu-list {
			width: 100%;
 			background-color: #fff;
			z-index: 99;
			position: fixed;
			left: 0;
			padding: 10upx;
			padding-bottom: 0;

			.sub-menu-list {
				height: 620upx;
				background-color: #f9f9f9;
				margin-right: 6upx;
				padding: 10upx 0;
				padding-top: 88upx;

				.menu-li {
					padding: 10upx;
					border-bottom: 1upx solid #f0f0f0;
					.ellipsisT{
						width: 100%;
						overflow: hidden;//溢出隐藏
						text-overflow: ellipsis;
						white-space: nowrap;//强制不换行
						display: flex;
						justify-content: space-between;
						.checkIcon{
							margin-left: 10upx;
						}
						.labelName{
							overflow: hidden;//溢出隐藏
							text-overflow: ellipsis;
							white-space: nowrap;//强制不换行
						}
						label{
							width: 100%;
						}
					}
					.name{
						width: 100%;
						overflow: hidden;//溢出隐藏
						text-overflow: ellipsis;
						white-space: nowrap;//强制不换行
					}
				}
				.active {
					background-color: #147bdf;
					color: #fff!important;
				}
				//radio
				.uni-radio {
					width: 36upx !important;
					height: 36upx !important;
				}
			}
			.sub-menu-list:last-child{
				margin-right: 0;
			}
			.more-menu-list{
				height: 638upx;
				overflow-y: scroll;
				margin-top: 88upx;
				padding: 0 40upx;
				.data-li{
					margin: 10upx 0;
					.topTit{height: 80upx;line-height: 80upx;font-size: 30upx;color: #333333;}
					.content-li{
						padding: 0 40upx;
						height: 60upx;
						line-height: 60upx;
						border: solid 2upx #ececec;
						color: #333333;
						margin-right: 22upx;
						margin-top: 16upx;
						font-size: 26rpx;
						display: inline-block;
						text-align: center;
						border-radius: 30upx;
					}
					.active{
						border: solid 2rpx #147bdf;
						color: #147bdf;
					}
				}
			}
		}
	}
</style>
