<template>
	<view class="uni-select__selector" :style="{height:treeConfig.height+'px'}" v-if="showSelector&&loadding"> 
		<scroll-view scroll-y="true" class="uni-select__selector-scroll">
			<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
				<text class="empty-text">{{emptyTips}}</text>
			</view>
			<node-item v-else :value="dataValue" :multiple="multiple" :mixinDatacomResData="mixinDatacomResData" :level="1" @change="handleChange"></node-item>
		</scroll-view>
	</view>
</template>

<script>
	import {getTreeInfo} from '@/common/api/system/dictionary/index.js';
	import {changeApiOptions } from '@/common/api/magic-api/useApiRequest.js';
	import NodeItem from './node-item.vue'
	export default {
			name: "uni-checked-tree", 
			data() {
				return { 
					emptyTips: '无数据',
					dataValue:this.treeConfig.isMultiple?[]:'', 
					mixinDatacomResData: [], 
					channels: [],
					loadding:true,
					apiKey:'value',
					apiLabel:'label'
				};
			},
			components:{
				NodeItem
			},
			props: { 
				value: {
					type: [String, Number],
					default: ''
				},
				modelValue: {
					type: [String, Number],
					default: ''
				},
				showSelector:  {
					type: Boolean,
					default: true
				},  
				childIcon: {
					type: String,
					default: ''
				},
	      disabled: {
					type: Boolean,
					default: false
				},
				parentIcon:{
					type: String,
					default: ''
				}, 
				treeConfig:{
					type: Object,
					default(){
						return {}
					}
				}, 
			},
			async created() {
				this.initData()
				this.loadding=false;
				if(this.treeConfig?.id) { 
					let formState = await getTreeInfo({id:this.treeConfig.id});
					let config = JSON.parse(formState.data.config);
					if (formState.data.type == 1) {  
						let data = [];
						config.staticData.forEach((element, index) => {
							let res = this.getItem(element, index, element.value);
							data.push(res);
						});
						this.channels = data;
						this.mixinDatacomResData = this.getDataList();
					} else {
						this.apiLabel=config.apiData.apiColumns[0].dataIndex
						this.apiKey=config.apiData.apiColumns[1].dataIndex
						let data  = [];
						let apiData = await changeApiOptions(config.apiData.apiConfig)  
						apiData.data.data.forEach((element, index) => {
							let res = this.getItem(element, index, element[this.apiKey]);
							data.push(res);
						});
						this.channels=data;
						this.mixinDatacomResData  = this.getDataList();
					}
				}  
				this.loadding=true;
			},
			computed: {
				multiple(){
					return this.treeConfig.isMultiple
				}
			},
			watch: { 
				 value(){
					 this.initData()
				 },
				 modelValue(){
					 this.initData() 
				 },
			},
			methods: {
				initData() {
					let defValue = '';
					this.dataValue =this.multiple?[]:''; 
					if (this.value) {
						defValue = this.value 
					}else if(this.modelValue){
						defValue = this.modelValue
					}
					if(defValue){
						this.dataValue = this.multiple ?defValue.split(','):defValue 
					}  
				},
				getDataList() {
					// 解除引用关系，破坏原引用关系，避免污染源数据 
					return JSON.parse(JSON.stringify(this.channels)) 
				},
				getItem(item, index, rowKey)  {
					let childrenArr  = [];
					if (item.children.length > 0) { 
						item.children.forEach((element, index2) => {
							let key = index + '---' + index2;
							let rowKey2 = rowKey + '---' + element[this.apiKey];
							childrenArr.push(this.getItem(element, key, rowKey2));
						});
					}  
					return { 
						label: item[this.apiLabel],
						index: index,
						key: rowKey, 
						collpse:item.children.length > 0?false:undefined,
						//checked:1,
						children: childrenArr,
					};
				}, 
				change(val ) { 
					// TODO 兼容 vue2
					this.$emit("input", val);
					// TODO　兼容　vue3
					this.$emit("update:modelValue", val);
					this.$emit('change',val )
				},
				clearTag(idx){ 
					this.dataValue.splice(idx,1) 
				},
				handleChange(item) { 
					if(this.multiple){
						item.checked.forEach(o=>{
							let obj=this.dataValue.find(k=>k==o)
							if(!obj) this.dataValue.push(o) 
						})
						item.unchecked.forEach(o=>{
							let idx=this.dataValue.findIndex(k=>k==o)
							if(idx>=0) this.clearTag(idx)
						})
						this.change(this.dataValue.join(','))  
					}else{ 
						this.dataValue=item.key
						this.change(item.key )
					}
				}, 
			}
		}
</script>

<style>
	.uni-select__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */ 
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
		padding: 10px 0;
		overflow: hidden;
	}
	
	.uni-select__selector-scroll {
		/* #ifndef APP-NVUE */ 
		box-sizing: border-box;
		/* #endif */
		height: 100%;
	}
	
	.uni-select__selector-empty {
		/* #ifndef APP-NVUE */ 
		cursor: pointer;
		/* #endif */
		line-height: 35px;
		font-size: 14px; 
		/* border-bottom: solid 1px $uni-border-3; */
		padding: 0px 10px;
		margin-top: -10px;
	}
	 
	.uni-select__selector-empty:last-child {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}
	.empty-text{
		color: #999;
		font-size: 12px;
		
	} 
</style>