<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">
		<view class="item-flex">
			<uni-icons v-if="item.children?.length>0"
				:type="!item.collpse?'ant-design:caret-down-filled':'ant-design:caret-right-filled'" :size="12" color="#BBBEC9"
				custom-prefix="antfont" @click="()=>{item.collpse=!item.collpse}"></uni-icons>
			<view @click.stop="change(item)" class="item-text" 
				:class="{'uni-select__selector__disabled': item.disable,'uni-select__selector__checked':getChecked(item.key)}">{{item.label}}</view>
		</view>
		<node-item v-if="item.children?.length>0" :collpse="item.collpse" :value="value" :multiple="multiple" :mixinDatacomResData="item.children" :level="level+1"  @initchange="handleinit" @change="handlechange"></node-item>
	</view>
</template>

<script>
	export default {
		name: "node-item",
		emits: [ 
			"change",'initchange'
		],
		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
			}, 
		},
		async created() { 
			this.initData()
		},
		computed: {
			
		},
		watch: {  
			value(){
				this.initData()
			},
		},
		methods: {
			initData(){
				if(this.multiple){ 
					if(this.value?.length>0){
						this.value.forEach(o=>{
							const def = this.mixinDatacomResData.find(item => item.key === o)
							if(def){  this.$emit('initchange', def) }
						}) 
					}
				}else{
					const def = this.mixinDatacomResData.find(item => item.key === this.value)
					if(def) this.$emit('initchange', def) 
				} 
			},
			change(item) {  
				 this.$emit('change', item ) 
			},
			handlechange(v) { 
				 this.$emit('change', v) 
			},
			handleinit(v) { 
				 this.$emit('initchange', v) 
			},
			getChecked(item){ 
				if(Array.isArray(this.value)){
					let obj= this.value.find(o=>{return o==item})
					return obj?true:false
				}else{
					return this.value==item
				}
			}
		}
	}
</script>

<style>
	.uni-select__selector-item {
		cursor: pointer;
		margin: 0px 10px;
		padding: 0px 10px ;
		color: #253954;
		line-height: 30px; 
		font-size: 14px;
		word-break: break-all;
	}
 
	.isLeaf{ 
		margin-left: 16px;
	}
	.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 */
	}
	.item-flex{
		display: flex;
		margin: 4px 0;
	}
	.item-text{
		flex: 1;
		padding: 0 4px;
		margin-left: 6px;
	}
	.uni-select__selector__disabled {
		opacity: 0.4;
		cursor: default;
	}
	.uni-select__selector__checked{
		background-color: #f0f7ff;
	}
</style>