<template>
	<view>
		<view class="header">
			<search v-if="searchIf" ref="sea" @confirm="confirmSearch" @add="addGroup" />
			<view class="title">
				<scroll-view scroll-x style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft">
					<view v-for="(item,index) in tree_stack" class="inline-item" :key="index">
						<view class="inline-item" v-if="index==0" @click="backTree(item,-1)">
							<text :class="[(index==tree_stack.length-1&&!isre)?'none':'active']">全部</text>
						</view>
						<view v-if="index==0&&isre" @click="backTree(item,-2)"
							:class="[index==tree_stack.length-1&&isre]?'none inline-item':'active inline-item'">
							<!-- <i class="iconfont icon-z043 iconclass" />-->
							<view style="display: inline-block;">
								<u-icon name="arrow-right" color="#D0D4DB" size="14"></u-icon>
							</view>
							搜索结果
						</view>
						<view class="inline-item" @click="backTree(item,index)" v-if="index!=0">
							<!-- <i class="iconfont icon-z043 iconclass" /> -->
							<view style="display: inline-block;">
								<u-icon name="arrow-right" color="#D0D4DB" size="14"></u-icon>
							</view>
							<text :class="index==tree_stack.length-1?'none inline-ite':'active'">
								{{item[props.label]}}
							</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view>
			<view class="container-list">
				<u-swipe-action>
					<template v-for="(item, index) in tree">
						<u-swipe-action-item v-if="item.type=='user'" :options="options2"
							:disabled="item.type=='system'?true:false" :key="item.id" @click="operateClick"
							:name="item.type+item.id">
							<view class="common" @click="handleClick(item,index)">
								<label class="content">
									<view class="list-item" v-show="isCheck">
										<!-- 多选 -->
										<view class="checkbox" v-if="props.multiple" @click.stop="handleClick(item,-1)">
											<span v-if="isSelect(item)">
												<i v-if="item.bx&&newCheckList.length!=0"
													class="iconfont icon-banxuanzhongshousuo1-shi icons" />
												<i v-else class="iconfont icon-xuanzhong txt icon-selected" />
											</span>
											<i v-else-if="item.qx" class="iconfont icon-xuanzhong txt icon-selected" />
											<i v-else-if="item.bx"
												class="iconfont icon-banxuanzhongshousuo1-shi icons" />
											<i style="color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt" />
										</view>
										<!-- 单选 -->
										<view class="checkbox" v-else-if="(props.nodes?item.user?true:false:true)"
											@click.stop="handleClick(item,-1)">
											<i v-if="radioSelect(item)" class="txt iconfont icon-selected" />
											<i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1" />
										</view>
									</view>
									<view class="avator" v-if="isAvator&&item.user" @click.stop="goDetails(item)">
										<img
											:src="item.avatar?(item.avatar.indexOf('http')!=-1?item.avatar:basePicUrl+item.avatar):avatorUrl">
									</view>
									<view class="lable-text">{{item[props.label]}}</view>
									<view class="right">
										<!-- 	<i v-if="!item.user&&item.children.length>0"
										class="iconfont icon-z043 iconclass"></i> -->
										<u-icon v-if="!item.user&&item.children.length>0" name="arrow-right"></u-icon>
									</view>
								</label>
							</view>
						</u-swipe-action-item>
						<u-swipe-action-item v-else :options="options1"
							:disabled="item.type=='system'?true:false" :key="item.id" @click="operateClick"
							:name="item.type+item.id">
							<view class="common" @click="handleClick(item,index)">
								<label class="content">
									<view class="list-item" v-show="isCheck">
										<!-- 多选 -->
										<view class="checkbox" v-if="props.multiple" @click.stop="handleClick(item,-1)">
											<span v-if="isSelect(item)">
												<i v-if="item.bx&&newCheckList.length!=0"
													class="iconfont icon-banxuanzhongshousuo1-shi icons" />
												<i v-else class="iconfont icon-xuanzhong txt icon-selected" />
											</span>
											<i v-else-if="item.qx" class="iconfont icon-xuanzhong txt icon-selected" />
											<i v-else-if="item.bx"
												class="iconfont icon-banxuanzhongshousuo1-shi icons" />
											<i style="color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt" />
										</view>
										<!-- 单选 -->
										<view class="checkbox" v-else-if="(props.nodes?item.user?true:false:true)"
											@click.stop="handleClick(item,-1)">
											<i v-if="radioSelect(item)" class="txt iconfont icon-selected" />
											<i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1" />
										</view>
									</view>
									<view class="avator" v-if="isAvator&&item.user" @click.stop="goDetails(item)">
										<img
											:src="item.avatar?(item.avatar.indexOf('http')!=-1?item.avatar:basePicUrl+item.avatar):avatorUrl">
									</view>
									<view class="lable-text">{{item[props.label]}}</view>
									<view class="right">
										<!-- 	<i v-if="!item.user&&item.children.length>0"
										class="iconfont icon-z043 iconclass"></i> -->
										<u-icon v-if="!item.user&&item.children.length>0" name="arrow-right"></u-icon>
									</view>
								</label>
							</view>
						</u-swipe-action-item>
					</template>
				</u-swipe-action>
			</view>
		</view>
		<u-picker :show="isShow" :columns="columns" keyName="groupName" title="将联系人添加至" closeOnClickOverlay
			@confirm="removeSure" @cancel="isShow=false" @close="isShow=false"></u-picker>
		<u-modal :show="isShow1" :content='content' showCancelButton closeOnClickOverlay @confirm="deleteSure"
			@cancel="isShow1=false" @close="isShow1=false"></u-modal>
		<!-- <view class="btn box_sizing">
			<button class="sureBtn" type="primary" @click="backConfirm">确认</button>
		</view> -->
	</view>
</template>

<script>
	import search from './search/index.vue'
	import {
		deleteAddress,
		myAddressList,
		addAddressBook
	} from "@/common/api/api.js"
	export default {
		name: "treeComponent",
		data() {
			return {
				basePicUrl: this.$basePicUrl,
				content: "",
				value: "",
				isShow1: false,
				isShow: false,
				isre: false,
				tree: Object.freeze(this.treeNone),
				newNum: 0,
				oldNum: 0,
				catchTreeNone: [...this.treeNone],
				tree_stack: [1],
				searchResult: [],
				newCheckList: this.checkList,
				scrollLeft: 999,
				nodePathArray: [],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c',
					}
				}],
				options2: [{
					text: '添加至',
					style: {
						backgroundColor: '#3c9cff',
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c',
					}
				}],
				columns: [],
			}
		},
		components: {
			search
		},
		computed: {
			isSelect() {
				return (item) => {
					const checkList = this.newCheckList
					if (checkList.length == 0) {
						this.props.checkStrictly ? (item.bx = 0, item.qx = 0) : ''
						return false
					}
					const i = checkList.findIndex(e => {
						return item[this.keyCode] == e[this.keyCode]
					}) > -1
					return i && !item.qx
				}
			},
			radioSelect() {
				const list = this.newCheckList
				return (item) => {
					return list.length > 0 && item[this.keyCode] == list[0][this.keyCode]
				}
			},
			keyCode() {
				return this.keyValue
			}
		},
		created() {
			this.Init()
		},
		methods: {
			goDetails(item) {
				this.$emit("toPerson", item);
			},
			// 移动联系人
			removeSure(data) {
				console.log(data.value[0]);
				let params = {
					"addressUserId": this.personId,
					"createBy": "",
					"createTime": "",
					"groupName": "",
					"gruopId": data.value[0].id,
					"id": "",
					"type": "1",
					"updateBy": "",
					"updateTime": "",
					"userId": ""
				}
				addAddressBook(params).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "添加成功",
							icon: "success",
							duration: 2000
						})
						this.isShow = false;
						this.$emit("reload")
					} else {
						uni.showToast({
							title: "添加失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			//删除联系人
			deleteSure() {
				deleteAddress(null, "?id=" + this.personId).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "删除成功",
							icon: "success",
							duration: 2000
						})
						this.isShow1 = false;
						this.$emit("reload")
					} else {
						uni.showToast({
							title: "删除失败",
							icon: "none",
							duration: 2000
						})
					}
				})

			},
			sure() {
				this.show = false;
			},
			operateClick(data) {
				if (data.name.indexOf('user') != -1) {
					this.personId = data.name.replace("user", "");
					if (data.index == 0) {
						//移动 联系人
						//请求自建分组列表
						myAddressList().then(res => {
							if (res.code == 200) {
								this.columns = [
									[...res.result.records]
								];
								this.isShow = true;
							} else {
								uni.showToast({
									title: "获取自建分组失败",
									icon: "none",
									duration: 2000
								})
							}
						})

					} else {
						//删除联系人
						this.content = "是否要删除该联系人"
						this.isShow1 = true;
					}

				}
				if (data.name.indexOf('my') != -1) {
					//删除自建分组
					this.personId = data.name.replace("my", "");
					this.content = "是否要删除该分组"
					this.isShow1 = true;
				}
			},
			addGroup(value) {
				this.$emit("add", value)
			},
			// 初始化
			Init() {
				if (this.newCheckList.length !== 0) {
					let {
						tree_stack,
						props,
						catchTreeNone,
						newCheckList
					} = this
					if (props.multiple) {
						if (props.checkStrictly) {
							this.checkAllChoose();
						}
					} else {
						this.getNodeRoute(catchTreeNone, newCheckList[0][this.keyCode])
						let arr = this.nodePathArray.reverse()
						console.log(arr)
						if (arr.length == 0) return
						this.tree_stack = tree_stack.concat(arr);
						this.tree = this.tree_stack[this.tree_stack.length - 1].children;
					}
				}
			},
			// 点击项目处理
			handleClick(item, index) {
				console.log(item);
				let children = item[this.props.children]
				if (index > -1 && children && children.length > 0) {
					console.log(index)
					this.toChildren(item)
				} else if (this.props.multiple) {
					this.checkboxChange(item, index, item.bx, item.qx)
				} else {
					this.checkbox(item, index)
				}
			},
			// 获取路径
			getPath() {
				const {
					keyCode,
					tree_stack,
					props
				} = this
				const path = [...tree_stack].map(e => {
					const item = Object.assign({}, e)
					delete item[props.children]
					return item
				})
				return path.slice(1, path.length) || []
			},
			//多选
			async checkboxChange(item, index, bx, qx) {
				let that = this;
				const {
					props
				} = that
				if (!props.multiple) return;
				let findIdex = that.newCheckList.findIndex(e => item[this.keyCode] == e[this.keyCode]);
				const path = this.getPath()
				if (findIdex > -1) { //反选
					if (props.checkStrictly) { //关联子级
						if (item.user) { //用户
							that.newCheckList.splice(findIdex, 1)
						} else { //非用户，取消所有下一级
							that.getIdBydelete(item.children)
						}
					} else {
						that.newCheckList.splice(findIdex, 1)
					}
				} else { //选中
					if (!item.user && props.checkStrictly) { //选中下一级
						if (qx || bx) { //取消下级
							await that.getIdBydelete(item.children);
							item.qx = 0;
							item.bx = 0;
						} else {
							item.qx = 1;
							item.bx = 0;
							const {
								id,
								name,
								user
							} = item
							const newObj = {
								id,
								name,
								user
							}
							const pathList = this.tree_stack.length === 1 ? [newObj, ...path] : [...path, newObj]
							await that.chooseChild(item.children, pathList);
						}
						this.$forceUpdate()
						return
					}
					that.newCheckList.push({
						...item,
						path
					});
				}
			},
			// 取消下一级的选中
			getIdBydelete(arr) {
				arr.forEach(e => {
					if (e.user) {
						for (var i = 0; i < this.newCheckList.length; i++) {
							if (e[this.keyCode] == this.newCheckList[i][this.keyCode]) {
								this.newCheckList.splice(i, 1)
								break;
							}
						}
					} else {
						this.getIdBydelete(e.children)
					}
				})
			},

			// 关联下一级,选中
			chooseChild(arr, path) {
				let that = this;
				const oldPath = [...path]
				for (var i = 0, len = arr.length; i < len; i++) {
					let item = arr[i];
					if (item.user) {
						that.newCheckList.push({
							...item,
							path: oldPath
						})
					} else {
						const newItem = {
							...item
						}
						delete newItem[that.props.children]
						const newPath = [...oldPath, newItem]
						that.chooseChild(item.children, newPath)
					}
				}
			},

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

			//单选
			checkbox(item, index) {
				const path = this.getPath()
				this.$set(this, 'newCheckList', [{
					...item,
					path
				}])
				if (item.user) {
					//直接发起聊天
					console.log("12432");
					this.$emit("toChat", item)
				}
			},
			//到下一级
			toChildren(item) {
				if (item.user) return
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				let children = that.props.children;
				if (!item.user && item[children].length > 0 && !(that.tree_stack[0][this.keyCode] == item[this.keyCode])) {
					that.tree = item[children];
					that.tree_stack.push(item);
				}
				this.$nextTick(() => {
					uni.hideLoading()
					this.scrollLeft += 200;
				})
				if (this.props.checkStrictly) this.checkAllChoose();
			},
			//搜索
			confirmSearch(val) {
				this.searchResult = []
				this.search(this.catchTreeNone, val)
				this.isre = true
				this.tree_stack.splice(1, 1000)
				uni.showLoading({
					title: '正在查找'
				})
				setTimeout(() => {
					this.tree = this.searchResult
					uni.hideLoading()
				}, 300)
			},
			search(data, keyword) {
				var that = this
				let children = that.props.children
				for (var i = 0, len = data.length; i < len; i++) {
					if (data[i].name.indexOf(keyword) >= 0) {
						that.searchResult.push(data[i])
					}
					if (!data[i].user && data[i][children].length > 0) {
						that.search(data[i][children], keyword)
					}
				}
			},

			checkAllChoose() {
				let o = false,
					t = true;
				this.tree.forEach((e, i) => {
					if (!e.user) {
						e.qx = o;
						e.bx = o;
						this.computAllNumber(e.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) {
				for (let j = 0; j < arr.length; j++) {
					var e = arr[j];
					this.checkSum(e[this.keyCode])
					if (e.user) {
						this.newNum++;
					} else {
						this.computAllNumber(e.children)
					}
				}
			},

			checkSum(id) {
				for (let i = 0; i < this.newCheckList.length; i++) {
					if (id == this.newCheckList[i][this.keyCode]) {
						this.oldNum++;
						break
					}
				}
			},

			//返回其它层
			backTree(item, index) {
				console.log(index);
				let that = this,
					tree_stack = that.tree_stack,
					max = 10000;
				if (index === -1) {
					that.tree = that.catchTreeNone
					that.tree_stack.splice(1, max)
					that.isre = false
					that.$refs.sea.clears()
				} else if (index === -2) {
					that.tree = that.searchResult
					that.tree_stack.splice(1, max)
				} else {
					if (tree_stack.length - index > 2) {
						tree_stack.forEach((item, i) => {
							if (i > index) {
								that.tree_stack.splice(i, max)
							}
						})
					} else if (index !== tree_stack.length - 1) {
						that.tree_stack.splice(tree_stack.length - 1, 1)
					}
					that.tree = item[that.props.children]
				}
				if (this.props.checkStrictly) this.checkAllChoose();
				this.$forceUpdate()
			},
			backConfirm() {
				this.$emit('sendValue', this.newCheckList, 'back')
			}

		},
		props: {
			treeNone: {
				type: Array,
				default: () => {
					return []
				}
			},
			//是否开启选中
			isCheck: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			isAvator: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			checkList: {
				type: Array,
				default: () => []
			},
			parentList: {
				type: Array,
				default: () => []
			},
			searchIf: {
				type: Boolean,
				default: () => true
			},
			keyValue: {
				type: String,
				default: 'id',
			},
			avatorUrl: {
				type: String,
				default: '',
			},
			props: {
				type: Object,
				default: () => {
					return {
						label: 'name',
						children: 'children',
						multiple: false,
						checkStrictly: false, //不关联
					}
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	@import './css/style.scss';
	@import url("./css/icon.css");
</style>
