<template>
	<view v-show="!collpse" class="uni-select__selector-item" :class="{'first-level':level==1,'isLeaf':!item.children||item.children?.length<=0,'isChild':level>1}" v-for="(item,index) in mixinDatacomResData"
		:key="index" @click.stop="change(item)"> 
		<view class="item-text" :class="{'uni-select__selector__disabled': item.disable,'checked':!multiple&&getChecked(item)==2}">
			<view style="display: inline;" @click.stop="()=>{item.collpse=!item.collpse}"><uni-icons v-if="item.children?.length>0"
				:type="!item.collpse?'ant-design:caret-down-filled':'ant-design:caret-right-filled'" :size="12" :color="!multiple&&getChecked(item)==2?'#FFF':'#BBBEC9'"
				custom-prefix="antfont" ></uni-icons></view>
			<view style="transform: scale(0.7);-webkit-tap-highlight-color: transparent;
    display: inline-block;
    cursor: pointer;" v-if="multiple">
				<view class="uni-checkbox-wrapper">
					<view class="uni-checkbox-input " :class="{'checked':getChecked(item)==2}">
						<uni-icons v-if="getChecked(item)==2" type="ant-design:check-outlined" custom-prefix="antfont" color="#fff" size="12" />
						<view v-if="getChecked(item)==3" class="halfcheck"></view>
					</view>
				</view>
			</view>
			{{item.label}} 
		</view>
		<node-item v-if="item.children?.length>0" :parent="item" :value="value" :collpse="item.collpse" :multiple="multiple" :mixinDatacomResData="item.children" :level="level+1" @change="handleChange"></node-item>
	</view>
</template>

<script>
	export default {
		name: "node-item",
		emits: [ 
			"change",
		],
		data() {
			return { 
			};
		},
		props: {
			value: {
				type: [String,Array],
				default: ''
			},
			level: {
				type: Number,
				default: 1
			},
			mixinDatacomResData: {
				type: Array,
				default () {
					return []
				}
			},
			childIcon: {
				type: String,
				default: ''
			},
			parentIcon: {
				type: String,
				default: ''
			},
			multiple: {
				type: Boolean,
				default: false
			},
			collpse: {
				type: Boolean,
				default: false
			}, 
			parent:{
				type: Object,
				default: null
			}, 
		},
		async created() {

		},
		computed: {

		},
		watch: { 
		},
		methods: {
			change(item) { 
				item.collpse=!item.collpse;
				if(this.multiple){
					let checked=[];
					let unchecked=[]
					let obj= this.value.find(o=>{return o==item.key})
					if(obj){
						unchecked.push(item.key);
						if(this.parent?.children.length>0){ 
							unchecked.push(this.parent.key) 
						} 
						this.findChildren(item,unchecked)
					}else{
						checked.push(item.key)
						if(this.parent?.children.length>0){
							let arr=0; //子级选中的个数
							this.parent.children.forEach(o=>{
								let temp= this.value.find(k=>{return k==o.key&&k!=item.key})
								if(temp) arr+=1
							})
							if(arr+1==this.parent.children.length){					
								checked.push(this.parent.key) 				
							} 
						}
						this.findChildren(item,checked)
					}
					this.$emit('change', {checked,unchecked} ) 
				}else{
					this.$emit('change', item ) 
				}
			},
			findChildren(item,checked){
				if(item.children?.length>0){
					item.children.forEach(o=>{
						checked.push(o.key)
						if(o.children?.length>0){
							this.findChildren(o,checked)
						}
					})
				}
			},
			handleChange(v) {
				if(this.multiple){
					if(this.parent&&v.unchecked.length>0){
						v.unchecked.push(this.parent.key)
					}
					if(this.parent&&v.checked.length>0){
						if(this.parent?.children.length>0){
							let arr=0; //子级选中的个数
							this.parent.children.forEach(o=>{
								let temp= v.checked.find(k=>{return k==o.key})
								if(temp) arr+=1
							})
							if(arr==this.parent.children.length){					
								v.checked.push(this.parent.key) 				
							} 
						}
					}
				} 
				 this.$emit('change', v) 
			},
			checkChildren(item ){
				let arr=0
				if(item.children?.length>0){
					for(let i=0;i<item.children.length;i++){
						let o= item.children[i]
						let temp= this.value.find(k=>{return k==o.key})
						if(temp){
							arr+=1;  
						} 
						if(o.children?.length>0){
							arr+=this.checkChildren(o)
						} 
					} 
				} 
				return arr;
			},
		 	getChecked(item){

				if(Array.isArray(this.value)){
					let flag=1;  //1未选种，2选中，3半选
					let obj= this.value.find(o=>{return o==item.key})
					if(!obj&&item.children.length>0){
						let arr=0; //子级选中的个数 
						item.children.forEach(o=>{
							let temp= this.value.find(k=>{return k==o.key})
							if(temp) arr+=1 
						})
						
						if(arr>0){
							flag=3
							if(arr==item.children.length) flag=2
						} else{
							let chilArr=0; 
							for(let i=0;i<item.children.length;i++){
								let o= item.children[i] 
								chilArr+=this.checkChildren(o) 
							}  
							flag=chilArr>0?3:1;
						}
					}else if(obj){
						flag=2
					}
					return flag
				}else{
					return this.value==item.key?2:1
				}
			}
		}
	}
</script>

<style lang="less">
	.uni-select__selector-item {
		cursor: pointer; 
		padding: 0px 10px; 
		color: #253954;
		line-height: 30px; 
		font-size: 14px;
		word-break: break-all;
	}

	.uni-select__selector-item.first-level { 
		border-radius: 5px; 
	}
	.isLeaf{ 
		margin-left: 12px;
	}
	.isChild{ 
		padding-bottom: 0;
		margin-bottom: 0;
		margin-right: 0;
		padding-right: 0;
	}
	.first-level.isLeaf{
		border-left: 0;
		margin-left: 10px;
		padding-bottom: 0; 
	}

	.uni-select__selector-item:last-child {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}

	.uni-select__selector__disabled {
		opacity: 0.4;
		cursor: default;
	}
	.uni-checkbox-input{
		text-align: center;
		line-height: 22px;
		.halfcheck{
			width: 10px;
			height: 10px;
			background-color:#5e95ff ;
			display: inline-block;
		}
	}
	.uni-checkbox-input.checked{
		background-color: #5e95ff;
		border-color: #5e95ff;
	}
	.item-text{
		padding: 0 5px;
		&.checked{
			background-color: #5e95ff;
			color: #fff;
		}
	}
</style>