<template>
	<view>
		<view style="padding:10px;color: #333;font-weight: 500;">
			<view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, false)">设置</button>
			<view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, false)">设置</button>
			<view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, true)">设置</button>
			<view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true)" >设置</button>
			<view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true, true)" >设置</button>
			<view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()" >设置</button>
			<!-- 异步加载demo -->
			<view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()" >设置</button>
		</view>
		<!-- 异步加载demo -->
		<next-tree :selectParent="false" :checkStrictly="true" funcMode="checkbox" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" />
		
		<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly" :selectParent="selectParent" :funcMode="funcMode" :treeData="treeData" @cancel="oncancel" @confirm="onconfirm">
			<!-- label插槽示意代码 -->
			<!-- <template v-slot:label="{data}">
				<view class="line-block">
					<image class="img" v-if="data.iconSrc" :src="data.iconSrc"></image>
					<text space="nbsp" v-if="data.prev">{{data.prev}}&nbsp;</text><text>{{data.label}}</text><text space="nbsp" v-if="data.post">&nbsp;{{data.post}}</text>
				</view>
			</template> -->
			<!-- <template #topBar>
				<view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
				<view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
					<button @click="checkedFunc('1-3-3-4')"  :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
					<button @click="checkedFunc('3-1-2')"  :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
					<button @click="checkedFunc('3-1-6')"  :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
				</view>
			</template> -->
		</next-tree>
	</view>
</template>
 
<script>
let self = null;
export default {
	data () {
		return {
			funcMode: 'radio',
			selectParent: false,
			checkStrictly: false,
			activeId: '',
			localData:{
				'a1': [{id: 'a1-1', label: 'a1-1'}, {id: 'a1-2', label: 'a1-2',children: [] },{id: 'a1-3', label: 'a1-3'}],
				'b1': [{id: 'b1-1', label: 'b1-1',children: []}, {id: 'b1-2', label: 'b1-2'},{id: 'b1-3', label: 'b1-3'}],
				'c1': [{id: 'c1-1', label: 'c1-1'}, {id: 'c1-2', label: 'c1-2'},{id: 'c1-3', label: 'c1-3',children: []}],
				'a1-2': [{id: 'a1-2-1', label: 'a1-2-1'}, {id: 'a1-2-2', label: 'a1-2-2'}],
				'b1-1': [{id: 'b1-1-1', label: 'b1-1-1'}, {id: 'b1-1-2', label: 'b1-1-2'}],
				'c1-3': [{id: 'c1-3-1', label: 'c1-3-1'}, {id: 'c1-3-2', label: 'c1-3-2'}]
			},
			asyncTreeData: [{id: 'a1', label: 'a1', children: []},{id: 'b1', label: 'b1', children: []},{id: 'c1', label: 'c1', children: []}],		
			treeData: [
				{id: '1', label: '北京', checked: false},
				{id: '2', label: '上海', checked: false, children: [
					{id: '2-1', label: '上海-1', checked: false},
					{id: '2-2', label: '上海-2', checked: false},
					{id: '2-3', label: '上海-3', checked: false},
				] },
				{id: '3', label: '广州', children: [
						{id: '3-1', label: '海珠区', checked: false, children: [
							{id: '3-1-1', label: '海珠区-1', checked: false, disabled: true},
							{id: '3-1-2', label: '海珠区-2', checked: false},
							{id: '3-1-4', label: '海珠区-3', checked: false},
							{id: '3-1-5', label: '海珠区-4', checked: false},
							{id: '3-1-6', label: '海珠区-5', checked: false},
							{id: '3-1-7', label: '海珠区-6', checked: false},
							{id: '3-1-8', label: '海珠区-7', checked: false},
							{id: '3-1-9', label: '海珠区-8', checked: false},
							{id: '3-1-10', label: '海珠区-9', checked: false},
							{id: '3-1-11', label: '海珠区-10', checked: false},
						]},
						{id: '3-2', label: '番禺区', checked: false, children: [
							{id: '3-2-1', label: '番禺区-1', checked: false},
							{id: '3-2-2', label: '番禺区-2', checked: false},
							{id: '3-2-4', label: '番禺区-3', checked: false},
							{id: '3-2-5', label: '番禺区-4', checked: false},
							{id: '3-2-6', label: '番禺区-5', checked: false},
							{id: '3-2-7', label: '番禺区-6', checked: false},
							{id: '3-2-8', label: '番禺区-7', checked: false},
							{id: '3-2-9', label: '番禺区-8', checked: false},
							{id: '3-2-10', label: '番禺区-9', checked: false},
							{id: '3-2-11', label: '番禺区-10', checked: false},
						]},
						{id: '3-3', label: '黄埔区', checked: false, children: [
							{id: '3-3-1', label: '黄埔区-1', checked: false},
							{id: '3-3-2', label: '黄埔区-2', checked: false},
							{id: '3-3-3', label: '黄埔区-3', checked: false},
							{id: '3-3-4', label: '黄埔区-4', checked: false},
							{id: '3-3-5', label: '黄埔区-5', checked: false},
							{id: '3-3-6', label: '黄埔区-6', checked: false},
							{id: '3-3-7', label: '黄埔区-7', checked: false},
							{id: '3-3-8', label: '黄埔区-8', checked: false},
							{id: '3-3-9', label: '黄埔区-9', checked: false},
							{id: '3-3-10', label: '黄埔区-10', checked: false},
							{id: '3-3-12', label: '黄埔区-11', checked: false},
							{id: '3-3-13', label: '黄埔区-12', checked: false},
							{id: '3-3-13', label: '黄埔区-13', checked: false},
							{id: '3-3-14', label: '黄埔区-14', checked: false},
							{id: '3-3-15', label: '黄埔区-15', checked: false},
							{id: '3-3-16', label: '黄埔区-16', checked: false},
							{id: '3-3-17', label: '黄埔区-17', checked: false},
							{id: '3-3-18', label: '黄埔区-18', checked: false},
							{id: '3-3-19', label: '黄埔区-19', checked: false},
							{id: '3-3-20', label: '黄埔区-20', checked: false},
							{id: '3-3-21', label: '黄埔区-21', checked: false},
							{id: '3-3-22', label: '黄埔区-22', checked: false},
							{id: '3-3-23', label: '黄埔区-23', checked: false},
							{id: '3-3-24', label: '黄埔区-24', checked: false},
							{id: '3-3-25', label: '黄埔区-25', checked: false},
							{id: '3-3-26', label: '黄埔区-26', checked: false},
							{id: '3-3-27', label: '黄埔区-27', checked: false},
							{id: '3-3-28', label: '黄埔区-28', checked: false},
							{id: '3-3-29', label: '黄埔区-29', checked: false},
							{id: '3-3-30', label: '黄埔区-30', checked: false},
							{id: '3-3-31', label: '黄埔区-31', checked: false},
							{id: '3-3-32', label: '黄埔区-32', checked: false},
							{id: '3-3-33', label: '黄埔区-33', checked: false},
							{id: '3-3-34', label: '黄埔区-34', checked: false},
							{id: '3-3-35', label: '黄埔区-35', checked: false},
							{id: '3-3-36', label: '黄埔区-36', checked: false},					
						]},
					],
				}]
		}
	},
	methods: {
		openTree() {
			this.$refs.nextTreeAsyncRef.showTree = true
		},
		changeVerify(current, chooseList) {
			// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
			// 如果函数体不做return返回值，即验证通过，控件正常处理业务
			console.log('当前变化的数据', current)
			console.log('已选择的数据', chooseList)
			if(chooseList && chooseList.length > 4) {
				
				return '最多可以选择4个节点'
			}
		},
		checkedFunc(id) {
			if(this.activeId === id) {
				this.activeId = '';
				this.$refs.nextTreeRef.checkedFunc(id, false)
			} else {
				this.activeId = id;
				this.$refs.nextTreeRef.checkedFunc(id)	
			}
		},
		loadData(data) {
			const type = data.$type;	// 加载类型
			const source = data.source // 源数据
			// 同步实现的代码处理方式
			
			if (type === 'nodeLoad') {
				const  nodeItem = source;
				// 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
				
				// if(nodeItem && this.localData[nodeItem.id]) {
				// 	return this.localData[nodeItem.id]
				// } else {
				// 	return []
				// }
				// 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						if(nodeItem && self.localData[nodeItem.id]) {
							return resolve(self.localData[nodeItem.id])
						} else {
							return resolve([])
						}
					}, 1000)
				})	
			} else if(type === 'remoteSearch') {
				// ...doing
			}
			
		},
		
		getTitle(checked) {
			return `已选：${checked.length}项`
		},
		echoDefault() {
			const selectIds = ['2-1','3-3-35']
			this.checkedTreeData(this.treeData, selectIds)
			console.log('treeData的数据：', this.treeData)
			this.funcMode = 'checkbox'
			this.$refs.nextTreeRef.showTree = true
		},
		itemclick(_multiple, _selectParent, _checkStrictly = false) {
			this.funcMode = _multiple ? 'checkbox' : 'radio'
			this.selectParent = _selectParent
			this.checkStrictly = _checkStrictly
			this.$refs.nextTreeRef.showTree = true
		},
		checkedTreeData(treeData, selectIds) {
			// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
			// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
			(treeData || []).map(item => {
				if (selectIds.indexOf(item.id) !== -1) {
					item.checked = true
				} else {
					item.checked = false
				}
				if (item.children && item.children.length) {
					this.checkedTreeData(item.children, selectIds)
				}
			})
		},
		onconfirm(list) {
			console.log('选中项的数量列表list：', list)
		},
		oncancel() {
			// 清除treeData的选中状态
			this.checkedTreeData(this.treeData, [])
		}
	},
	created() {
		self = this
	}
}
</script>
<style lang="scss">
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}
</style>