<template>
	<view>
		<!-- 搜索框 -->
		<view class="header">
			<!-- 搜索栏 -->
			<luyj-tree-search
				v-if="searchIf"
				:backgroundColor="searchBackgroundColor"
				:inputBackgroundColor="searchInputBackgroundColor"
				:radius="searchRadius"
				:iconColor="searchIconColor"
				:placeholder="searchPlaceholder"
				:placeholderStyle="searchPlaceholderStyle"
				:maxlength="searchMaxlength"
				:clearable="searchClearable"
				@confirm="confirmSearch"
			></luyj-tree-search>
			<!-- 面包屑导航 -->
			<luyj-tree-navigation :slabel="props.label" @inF="navigationInt" @clickItem="backTree"></luyj-tree-navigation>
			<!-- 面包屑导航 -->
		</view>
		<!-- 列表 -->
		<view>
			<view class="container-list" :style="{ 'padding-bottom': isCheck ? '160rpx' : 0, 'padding-top': searchIf ? '200rpx' : '90rpx' }">
				<luyj-tree-item
					v-for="(item, index) in tree"
					:key="index"
					:item="item"
					:isCheck="isCheck"
					:checkActiveColor="checkActiveColor"
					:checkNoneColor="checkNoneColor"
					:multiple="props.multiple"
					:checked="isChecked(item)"
					:nodes="props.nodes"
					:comparison="comparison"
					@clickItem="toChildren"
					@change="checkbox($event, item, index)"
				>
					<template slot="body">
						<slot v-bind:item="item" v-bind:slotObj="slotObj">
							<view class="word text-cut">{{ item[props.label] }}</view>
						</slot>
					</template>
				</luyj-tree-item>
			</view>
		</view>

		<!-- 确定按钮 -->
		<view
			v-if="isCheck"
			class="btn box_sizing"
			style="display: flex;
					align-items: center;
					justify-content: center;"
		>
			<button class="sureBtn" type="primary" @click="backConfirm">确认</button>
		</view>
	</view>
</template>

<script>
/**
 * luyj-tree 无限树形结构树、支持搜索选择。
 * @description  无限树形结构组件。支持搜索、选择(包括单选、多选)。面包屑类型导航。原插件地址：https://ext.dcloud.net.cn/plugin?id=2423。
 * @tutorial url https://ext.dcloud.net.cn/plugin?name=luyj-tree
 * @property {Boolean} searchIf 是否开启搜索 （默认值true）
 * @property {String} searchBackgroundColor 搜索框背景色(默认#FFFFFF)
 * @property {String} searchInputBackgroundColor 搜索框的输入框背景色(默认#EEEFF0)
 * @property {Number} searchRadius 搜索框的圆角值，单位rpx（默认40）
 * @property {String} searchPlaceholder 搜索框的内容物空时提示内容
 * @property {String} searchPlaceholderStyle 搜索框的placehoder的样式
 * @property {Number} searchMaxlength 搜索框的最大输入长度 ,设置为 -1 的时候不限制最大长度
 * @property {String} searchIconColor 搜索框的图标颜色（默认#B8B8B8）
 * @property {Boolean} searchClearable 搜索框是否显示清除按钮
 * @property {Array}  trees 传入的树形结构，每个对象必须包含唯一的id值(默认值【】)
 * @property {Boolean} isCheck 是否开启选择操作（默认值false）
 * @property {Object} slotObj 传入插槽的参数（因为插槽进行了循环，不能直接引用页面的参数，需要传递）
 * @property {Array} checkList 选中列表
 * @property {Boolean} parent 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)(默认值false)
 * @property {Array} parentList 父级列表
 * @property {String} checkActiveColor 选中时单选框的颜色 (默认#00AAFF)
 * @property {String} checkNoneColor 未选中时单选框的颜色（默认#B8B8B8)
 * @property {Object} props 参数配置。
 *  @property {String} id id列的属性名称
 * 	@param {String}  label 指定选项标签为选项对象的某个属性值(默认值:name)
 *  @param {String} children   指定选项的子选项为选项对象的某个属性名(默认值：children)
 *  @param {Boolean} multiple 值为true时为多选，为false时是单选(默认值true)
 *  @param {Boolean} checkStrictly(废弃) 需要在多选模式下才传该值，checkStrictly为false时，可让父子节点取消关联，选择任意一级选项。为true时关联子级，可以全选(默认值为false)
 *  @param {Boolean} nodes  在单选模式下，nodes为false时，可以选择任意一级选项，nodes为true时，只能选择叶子节点(默认值为true)
 * @property {Boolean} stepReload 是否“分页加载”数据
 * @property {Number} pageSize 分步加载生效时（当条数过大时，反应时间很长）
 * @return {Function} clickItem 点击导航栏事件
 * 	@value item 当前选中的item值
 *  @value 	realHasChildren 是否包含子级
 * @event {Function()} change 改变选择值时的方法
 * @event {Function()} sendValue 提交选择的方法
 * @event {Function()} backTree	选中导航栏时，返回其他层
 */
export default {
	name: 'luyj-tree',
	props: {
		// 是否开启搜索
		searchIf: {
			type: Boolean,
			default: () => true
		},
		// 搜索框背景色
		searchBackgroundColor: {
			type: String,
			default: '#FFFFFF'
		},
		// 搜索框的输入框内背景颜色
		searchInputBackgroundColor: {
			type: String,
			default: '#EEEFF0'
		},
		// 搜索框的图标的颜色
		searchIconColor: {
			type: String,
			default: '#B8B8B8'
		},
		// 搜索框的圆角值，单位rpx
		searchRadius: {
			type: Number,
			default: 40
		},
		// 搜索框的提示placeholder内容
		searchPlaceholder: {
			type: String,
			default: '搜索'
		},
		// 搜索框的placeholder的样式
		searchPlaceholderStyle: {
			type: String,
			default: ''
		},
		// 搜索框最大输入长度 ,设置为 -1 的时候不限制最大长度
		searchMaxlength: {
			type: Number,
			default: 140
		},
		// 搜索框是否显示清除按钮
		searchClearable: {
			type: Boolean,
			default: true
		},
		// 传入的树形结构数据，每个对象必须包含唯一的id值
		trees: {
			type: Array,
			default: () => {
				return [];
			}
		},
		//是否开启选择操作，值为false时仅展示，无操作
		isCheck: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		// 传入插槽的其他参数
		slotObj: {
			type: Object,
			default: () => {
				return null;
			}
		},
		// 选中列表
		checkList: {
			type: Array,
			default: () => []
		},
		// 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)
		parent: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		// 父级列表
		parentList: {
			type: Array,
			default: () => []
		},
		// 选中时单选框的颜色
		checkActiveColor: {
			type: String,
			default: '#00AAFF'
		},
		// 未选中时单选框的颜色
		checkNoneColor: {
			type: String,
			default: '#B8B8B8'
		},
		// 树的属性参数
		props: {
			type: Object,
			default: () => {
				return {
					id: 'id',
					label: 'name',
					children: 'children',
					multiple: false,
					checkStrictly: false, //不关联
					nodes: false // nodes为false时，可以选择任意一级选项；nodes为true时只能选择叶子节点
				};
			}
		},
		/**
		 * 是否懒加载树的值
		 */
		stepReload: {
			type: Boolean,
			default: false
		},
		// 每次循环加载的item的数据量
		pageSize: {
			type: Number,
			default: 50
		}
	},
	data() {
		return {
			// 导航条
			setIsre: null, // 导航条方法 - 设置是否搜索中方法
			getIsre: null, // 获取是否搜索中
			setTreeStack: null, // 导航条 - 设置导航
			concatTreeStack: null, // 导航条 - 拼接当前导航对象
			clearTreeStack: null, // 导航条- 清空导航条
			getTreeStack: null, // 导航条 - 获取导航条

			itemsLoading: false, // item是否在循环渲染中
			itemsStop: false, // 是否终止其他渲染
			tree: [], // 默认数组
			newNum: 0,
			oldNum: 0,
			allData: this.trees,
			parent_data: this.parentList || [], //选择父辈
			searchResult: [],
			newCheckList: this.checkList,
			nodePathArray: [], // 当前展示的路径
			// item名称对照表
			comparison: {
				value: this.props.id ? this.props.id : 'id', // 选中值名称
				label: this.props.label ? this.props.label : 'name', // 显示名称
				children: this.props.children ? this.props.children : 'children' // 子集名称
			}
		};
	},
	watch: {
		// 监听数据值的变化
		trees: function(val, oldval) {
			if (val != oldval) {
				var tree_stack = this.getTreeStack();
				this.allData = val; // 重新加载所有树
				// 重新加载当前树
				if (!Array.isArray(tree_stack)) {
					this.loadTree(val);
					return;
				}
				var length = tree_stack.length;
				if (length === 0) {
					if (typeof this.getIsre === 'function') {
						if (this.getIsre()) {
							return;
						}
					}
					this.loadTree(val);
				} else {
					let tempArray = val; // 存储当前值
					let children = this.props.children;
					for (var i = 0; i < length; i++) {
						var tempObject = tempArray.find(item => {
							return tree_stack[i].Value == item.Value;
						});
						if (Boolean(tempObject)) {
							tempArray = tempObject[children];
						} else {
							// 跳转到全部
							break;
						}
						if (i == length - 1) {
							this.loadTree(tempArray);
						}
					}
				}
			}
		},
		// 树的属性对照参数
		props: {
			handler: function(val) {
				this.comparison.value = this.props.id ? this.props.id : 'id';
				this.comparison.label = this.props.label ? this.props.label : 'name';
				this.comparison.children = this.props.children ? this.props.children : [];
			},
			deep: true
		},
		checkList: function(val, oldVal) {
			if (val != oldVal) {
				this.newCheckList = JSON.parse(JSON.stringify(val));
				return val;
			}
		}
	},
	created: function() {
		this.loadTree(this.trees);
	},
	// 实例被挂载后调用
	mounted() {
		let id = this.props.id;
		let children = this.props.children;
		// 关联子级的验证，暂时不使用
		// if (this.props.multiple && this.props.checkStrictly) {
		// 	if (this.newCheckList.length != 0) {
		// 		this.checkAllChoose();
		// 		return;
		// 	}
		// 	for (let i = 0; i < this.tree.length; i++) {
		// 		this.$set(this.tree[i], 'bx', 0)
		// 		this.$set(this.tree[i], 'qx', 0)
		// 	}
		// }
		// 初始化选中项
		if (!this.props.multiple && this.newCheckList.length > 0) {
			this.getNodeRoute(this.allData, this.newCheckList[0][id]);
			let arr = this.nodePathArray.reverse();
			if (arr.length == 0) {
				return;
			}

			this.concatTreeStack(arr); // 获取导航条的值
			// 加载当前列对应的数据
			var tree_stack = this.getTreeStack();
			var data = Boolean(tree_stack[tree_stack.length - 1][children]) ? tree_stack[tree_stack.length - 1][children] : [];
			this.loadTree(data);
		}
	},
	methods: {
		// ========================================== 添加方法 =====================================================================
		/** 当前选项是否选中
		 * @param {Object} item
		 */
		isChecked(item) {
			if (Array.isArray(this.newCheckList)) {
				let id = this.props.id;
				let temp = this.newCheckList.find(chcked => {
					return chcked[id] == item.id;
				});
				return Boolean(temp);
			}
			return false;
		},
		// =========================================== 初始化方法 ===================================================================
		/** 初始化导航条的方法
		 * @param {Object} e
		 */
		navigationInt: function(e) {
			this.setIsre = e.setIsre;
			this.getIsre = e.getIsre;
			this.concatTreeStack = e.concatTreeStack;
			this.pushTreeStack = e.pushTreeStack;
			this.clearTreeStack = e.clearTreeStack;
			this.getTreeStack = e.getTreeStack;
		},
		// =========================================== 监听事件 =====================================================================
		/** 选中当前的值
		 * @param {Object} e
		 * @param {Object} item 当前项
		 * @param {Object} index 低昂去索引
		 */
		checkbox(e, item, index) {
			var func = this.props.multiple ? this.checkboxChange : this.radioChange;
			func(e, item, index); // 执行选择操作
		},
		/**单选
		 * @param {Object} e 点击事件
		 * @param {Object} item 当前项的值
		 * @param {Object} index 索引
		 */
		radioChange: function(e, item, index) {
			var that = this;
			if (e.detail.value) {
				// 选中当前对象
				that.newCheckList = [];
				that.newCheckList.push(that.tree[index]);
			} else {
				// 移除其他对象
				var nIndex = that.newCheckList.indexOf(item);
				that.newCheckList.splice(nIndex, 1);
			}
			that.$emit('change', that.newCheckList);
		},
		/**异步检查复选框值的改变
		 * @param {Object} item
		 * @param {Object} index
		 * @param {Object} bx
		 * @param {Object} qx
		 */
		async checkboxChange(e, item, index, bx, qx) {
			let that = this;
			let findIdex = that.newCheckList.indexOf(item);
			if (e.detail.value) {
				// 点击选中
				if (findIdex == -1) {
					that.newCheckList.push(that.tree[index]);
				}
			} else {
				// 点击不选
				that.newCheckList.splice(findIdex, 1);
			}
			that.$emit('change', that.newCheckList);

			// if (findIdex > -1) { //反选
			// 	if (that.props.checkStrictly) { //关联子级
			// 		if (item[props.hasChilren]) { //用户
			// 			that.newCheckList.splice(findIdex, 1)
			// 		} else { //非用户，取消所有下一级
			// 			if (Boolean(item[props.children])) {
			// 				that.getIdBydelete(item[props.children]);
			// 			}
			// 		}
			// 	} else {
			// 		that.newCheckList.splice(findIdex, 1)
			// 	}
			// } else { //选中
			// 	if (!item[this.props.hasChilren] && that.props.checkStrictly) { //选中下一级
			// 		if (qx || bx) { //取消下级
			// 			if (Boolean(item[props.children])) {
			// 				await that.getIdBydelete(item[props.children]);
			// 			}
			// 			item.qx = 0;
			// 			item.bx = 0;
			// 		} else {
			// 			item.qx = 1;
			// 			item.bx = 0;
			// 			if (Boolean(item[props.children])) {
			// 				await that.chooseChild(item[props.children], item[this.props.id]);
			// 			}
			// 		}
			// 		that.$emit('change', that.newCheckList);
			// 		// that.$forceUpdate()
			// 		return;
			// 	}
			// 	// if(item[this.props.hasChilren]&&this.props.checkStrictly) this.getNodeRoute(this.allData,item[this.props.id]);
			// 	that.newCheckList.push({
			// 		...item
			// 	});
			// }
			// that.$emit('change', that.newCheckList)
		},
		// 取消下一级的选中
		getIdBydelete(arr) {
			arr.forEach(e => {
				if (true) {
					for (var i = 0; i < this.newCheckList.length; i++) {
						// 包含下一级
						if (e[this.props.id] == this.newCheckList[i][this.props.id]) {
							this.newCheckList.splice(i, 1);
							break;
						}
					}
				}
				if (false) {
					// 不包含下一级
					if (Boolean(item[props.children])) {
						this.getIdBydelete(e[props.children]);
					}
				}
			});
		},
		// 关联下一级,选中
		chooseChild(arr, pid) {
			let that = this;
			for (var i = 0, len = arr.length; i < len; i++) {
				let item = arr[i];
				if (true) {
					// 包含下一级
					that.newCheckList.push({
						...item,
						tree_stackId: pid
					});
				}
				if (false) {
					// 不包含下一级
					// !item[that.props.hasChilren]
					if (Boolean(item[props.children])) {
						this.chooseChild(item[props.children], item[this.props.id]);
					}
				}
			}
		},

		/**
		 * @param {Array} tree 目标树
		 * @param {Object} targetId 为目标节点id
		 */
		getNodeRoute(tree, targetId) {
			let children = this.props.children;
			let id = this.props.id;
			for (let index = 0; index < tree.length; index++) {
				if (Boolean(tree[index][children])) {
					if (tree[index][children]) {
						let endRecursiveLoop = this.getNodeRoute(tree[index][children], targetId);
						if (endRecursiveLoop) {
							this.nodePathArray.push(tree[index]);
							return true;
						}
					}
				}
				if (tree[index][id] === targetId) {
					return true;
				}
			}
		},

		/**跳转到子级
		 * @param {Object} item 选中的项
		 * @param {Boolean} realHasChildren 是否包含子级
		 */
		toChildren(item, realHasChildren) {
			this.$emit('clickItem', item, realHasChildren); // 点击导航栏事件
			// 不包含子级,不执行任何操作
			if (!realHasChildren) {
				return;
			}
			// 点击跳转下一级
			let id = this.props.id;
			let children = this.props.children; // 子级名称

			// 将当前item加入到导航列表
			if (item[children].length > 0) {
				this.loadTree(item[children]);
				this.pushTreeStack(item); // 添加导航
			}
			// 关联数据 - 暂时不使用
			// if (this.props.checkStrictly) {
			// 	this.checkAllChoose();
			// }
		},
		/** 搜索提交方法
		 * @param {Object} e
		 */
		confirmSearch(e) {
			var val = e.detail.value;
			this.searchResult = [];
			// 查找
			uni.showLoading({
				title: '正在查找'
			});
			this.search(this.allData, val);
			// 返回搜索结果
			uni.hideLoading();
			this.setIsre(true); // 设置导航条为搜索状态
			this.clearTreeStack(); // 清空导航条
			this.loadTree(this.searchResult);
		},
		/**搜索方法
		 * @param {Object} data 搜索数据
		 * @param {Object} keyword 搜索关键字
		 */
		search(data, keyword) {
			var that = this;
			let children = that.props.children;
			for (var i = 0, len = data.length; i < len; i++) {
				// try-catch(try-catch) - 没有label列，跳过继续执行
				try {
					if (data[i][that.props.label].indexOf(keyword) >= 0) {
						that.searchResult.push(data[i]);
					}
					if (Boolean(data[i][children])) {
						if (data[i][children].length > 0) {
							that.search(data[i][children], keyword);
						}
					}
				} catch (e) {
					console.warn(e);
				}
			}
		},
		/**
		 * 检查所有的选项
		 */
		checkAllChoose() {
			let o = false,
				t = true;
			this.tree.forEach((e, i) => {
				if (true) {
					// 包含下一级 !e[this.props.hasChilren]
					e.qx = o;
					e.bx = o;
					let num2 = this.computAllNumber(e[props.children]);
					// console.log(this.newNum,this.oldNum)
					if (this.newNum != 0 && this.oldNum != 0) {
						if (this.newNum == this.oldNum) {
							e.qx = t;
							e.bx = o;
						} else {
							e.qx = o;
							e.bx = t;
						}
					}
					if (this.newNum != 0 && this.oldNum == 0) {
						this.$set(this.tree[i], 'bx', o);
						this.$set(this.tree[i], 'qx', o);
					}
					// this.$forceUpdate()
					this.newNum = 0;
					this.oldNum = 0;
				}
			});
		},

		// 选中所选值
		computAllNumber(arr) {
			console.log('选中所选值');
			// for (let j = 0; j < arr.length; j++) {
			// 	var e = arr[j];
			// 	// if (arr[j][that.props.hasChilren]) {
			// 		this.newNum++;
			// 	// }
			// 	this.checkSum(e.id)
			// 	if (!e[that.props.hasChilren]) {
			// 		this.computAllNumber(e[props.children])
			// 	}
			// }
		},

		// 选中事件累计
		checkSum(id) {
			for (let i = 0; i < this.newCheckList.length; i++) {
				if (id == this.newCheckList[i].id) {
					this.oldNum++;
					break;
				}
			}
		},

		/** 返回到其他树层
		 * @param {Object} item 当前item值
		 * @param {Object} index 返回到其他索引
		 */
		backTree(item, index) {
			this.$emit('backTree', item, index);
			let that = this;
			if (index == -1) {
				// 全部
				that.loadTree(that.allData);
			} else if (index == -2) {
				// 搜索
				that.loadTree(that.searchResult); // 搜索结果
			} else {
				// 其他层级
				that.loadTree(item[that.props.children]); // tree的其他层级
			}
			// 关联数据
			// if (this.props.checkStrictly) {
			// 	this.checkAllChoose();
			// }
		},
		/**
		 * 点击确认按钮执行事件
		 */
		backConfirm() {
			this.$emit('sendValue', this.newCheckList, 'back');
		},
		// ======================================== 公共方法 ===============================================================
		/**加载Tree值
		 * @param {Array} datas 待复制的数组
		 * @param {Number} start 起始位置
		 * @description 加载tree值。当数据量大时，子项加载时间很长。可以多次渲染加载
		 */
		loadTree: function(datas, start = 0) {
			let that = this;
			if (!this.stepReload) {
				// 不进行多次渲染加载
				that.tree = datas;
			} else {
				// datas为null, 不进行渲染
				if (!Array.isArray(datas)) {
					that.tree = datas;
					return;
				} else if (datas.length === 0) {
					that.tree = datas;
					return;
				}
				// 进行多次渲染加载
				if (start === 0) {
					// 终止其他渲染
					if (that.itemsLoading) {
						that.itemsStop = true; //终止其他Item渲染
					}
					// 首次加载提醒
					uni.showLoading();
					that.tree = [];
					that.itemsLoading = true;
				}
				var length = datas.length;
				var end = Math.min(start + that.pageSize, length);
				var tempArray = datas.slice(start, end);
				that.tree = that.tree.concat(tempArray);
				that.$nextTick(function() {
					if (start == 0) {
						uni.hideLoading();
						that.itemsStop = false;
					}
					if (end < length && !that.itemsStop) {
						that.loadTree(datas, end);
					} else {
						that.itemsLoading = false;
					}
				});
			}
		}
		// =================================================================================================================
	}
};
</script>
<style lang="scss" scoped>
@import 'luyj-tree.scss';
@import 'icon.css';
</style>