<template>
	<view class="tree-item">
		<view class="head h-flex">
			<view class="head-1 flex-1" @click="changeShow" @longpress="longPress" @touchstart="handletouchstart"
				@touchend="handletouchend">
				<view style="display: flex;">
					<image src="../../../static/down-rect.png" :class="show ? 'rt45' : ''" mode="scaleToFill" class="left-icon"
						v-if="item[defaultProps.children] && item[defaultProps.children].length > 0"></image>
					<text class="txt">{{item[defaultProps.label]}}</text>
				</view>
				<text class="txt">{{item[defaultProps.sort]}}</text>
			</view>
			<view v-if="edit" class="p-t-20 p-r-30">
				<!-- <image src="../../../static/rising.png" class="edit-icon" @click.stop="checkupitem" /> -->
				<!-- <image src="../../../static/falling.png" class="edit-icon" @click.stop="checkdownitem" /> -->
				<image src="../../../static/addblue.png" v-if="judgeAddShow()" class="edit-icon" @click.stop="checkadditem" />
				<image src="../../../static/editblue.png" class="edit-icon" @click.stop="checkedititem" />
				<image src="../../../static/reeorblue.png" class="edit-icon" @click.stop="checkdeleteitem" />
			</view>
		</view>
		<view class="content" v-if="item[defaultProps.children] && item[defaultProps.children].length > 0" v-show="show"
			:key="item.id">
			<view v-if="divider" class="divider"></view>
			<tree-node v-for="(sitem, sindex) in item[defaultProps.children]" :items="item[defaultProps.children]"
				:item="sitem" :index="sindex" :key="sitem[defaultProps.id]" :defaultProps="defaultProps"></tree-node>
		</view>
	</view>
</template>

<script>
	import TreeNode from './tree-node.vue';
	export default {
		name: 'TreeNode',
		componentName: 'TreeNode',
		components: {
			TreeNode
		},
		props: {
			items: {
				type: Array,
				default: () => {
					return []
				}
			},
			index: {
				type: Number,
				default: () => {
					return -1
				}
			},
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			unfold: {
				type: Boolean,
				default: false
			},
			defaultProps: {
				type: Object,
				default: () => {
					return {
						id: 'id',
						children: 'children',
						label: 'label',
						sortValue: 'orderNum',
						typeName:'空间',
						oneTreeType:'设备组'
					}
				}
			}
		},
		inject: [
			'unfold',
			// 'defaultProps',
			'divider',
			'edit',
			'onClickItem',
			'upItem',
			'downItem',
			'addItem',
			'editItem',
			'deleteItem',
			'fingerAction',
			'onlongPress'
		],
		data() {
			return {
				startX: 0,
				startY: 0,
				startTime: null,
				endX: 0,
				endY: 0,
				show: this.unfold,
				// defaultProps: this.defaultProps,
				divider: this.divider,
				edit: this.edit,
				onClickItem: this.onClickItem,
				upItem: this.upItem,
				downItem: this.downItem,
				addItem: this.addItem,
				editItem: this.editItem,
				deleteItem: this.deleteItem,
				fingerAction: this.fingerAction,
				onlongPress: this.onlongPress
			}
		},
		methods: {
			judgeAddShow(){
				let length = this.item.ancestors.split(',').length||0;
				console.log("length",length,this.defaultProps.oneTreeType,this.defaultProps.typeName)
				if(this.defaultProps.typeName == this.defaultProps.oneTreeType && length == 2){
					return false;
				}
				return true;
			},
			changeShow() {
				this.onClickItem(this.item);
				if (this.item[this.defaultProps.children] && this.item[this.defaultProps.children].length > 0) {
					// this.show = !this.show;
				}
			},
			longPress() {
				if (this.edit) {
					this.onlongPress(this.item);
				}
			},
			checkupitem() {
				let existItem = this.items.find(element => element.id === this.item.id);
				if (existItem) {
					// console.log('tree-node existItem:', existItem);
					this.upItem({
						item: this.item,
						items: this.items,
						index: this.index
					});
				};
			},
			checkdownitem() {
				let existItem = this.items.find(element => element.id === this.item.id);
				if (existItem) {
					// console.log('tree-node existItem:', existItem);
					this.downItem({
						item: this.item,
						items: this.items,
						index: this.index
					});
				};
			},
			checkadditem() {
				//console.log('check add id:', {id: id});
				this.addItem(this.item);
			},
			checkedititem() {
				//console.log('check add id:', {id: id});
				if(this.item.ancestors==0){
					uni.showToast({
						title: '根节点不允许编辑',
						icon:'none'
					});
				}else{
					this.editItem(this.item);
				}
			},
			checkdeleteitem() {
				//console.log('check delete id:', {id: id});
				if(this.item.ancestors==0){
					uni.showToast({
						title: '根节点不允许删除',
						icon:'none'
					});
				}else{
					this.deleteItem(this.item);
				}
			},
			handletouchstart(event) {
				this.startX = event.changedTouches[0].clientX;
				this.startY = event.changedTouches[0].clientY;
				this.startTime = Date.now();
			},
			handletouchend(event) {
				this.endX = event.changedTouches[0].clientX;
				this.endY = event.changedTouches[0].clientY;
				this.getSlideDirction(this.startX, this.startY, this.endX, this.endY, this.startTime);
			},
			/* 获取滑动直线与水平线的夹角 */
			getLineAngle(x1, y1, x2, y2) {
				var x = x1 - x2,
					y = y1 - y2;
				if (!x && !y) {
					return 0;
				}
				var angle = (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
				return 360 - angle;
			},
			/* 判断滑动方向（上，下，左，右）*/
			getSlideDirction(startX, startY, endX, endY, startTime) {
				const subX = endX - startX;
				const subY = endY - startY;
				let noeTime = Date.now() - startTime;
				// console.log('滑动用时：', noeTime);
				let lineAngle = this.getLineAngle(startX, startY, endX, endY);
				let fingerAction = 0;
				// console.log('角度：', lineAngle);
				// console.log('subX：', subX);
				// console.log('subY：', subY);
				if (noeTime > 50 && noeTime < 1000) {
					if (subY > -280 && subY < -50 && lineAngle > 250 && lineAngle < 290) {
						/* 上滑 */
						console.log('上滑');
						this.fingerAction({
							item: this.item,
							items: this.items,
							index: this.index,
							action: 1
						});
					}
					if (subY < 280 && subY > 50 && lineAngle > 70 && lineAngle < 110) {
						/* 下滑 */
						console.log('下滑');
						this.fingerAction({
							item: this.item,
							items: this.items,
							index: this.index,
							action: 2
						});
					}
					if (subX > -280 && subX < -50 && (lineAngle > 350 || lineAngle < 10)) {
						/* 左滑 */
						console.log('左滑');
						this.fingerAction({
							item: this.item,
							items: this.items,
							index: this.index,
							action: 3
						});
					}
					if (subX < 280 && subX > 50 && lineAngle > 170 && lineAngle < 190) {
						/* 右滑 */
						console.log('右滑');
						this.fingerAction({
							item: this.item,
							items: this.items,
							index: this.index,
							action: 4
						});
					}
				}
			}
		}
	}
</script>


<style scoped lang="scss">
	@mixin animate2 {
		-moz-transition: all .2s linear;
		-webkit-transition: all .2s linear;
		-o-transition: all .2s linear;
		-ms-transition: all .2s linear;
		transition: all .2s linear;
	}

	.divider {
		align-self: center;
		width: 93%;
		height: 2rpx;
		color: #987cb9;
		background-color: gray;
	}

	.tree-item {
		.head {
			display: flex;
			align-items: center;
			line-height: 60rpx;

			.head-1 {
				display: flex;
				flex-basis: auto;
				margin-top: 10rpx;
				padding-right: 20rpx;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 30rpx;
					color: #222;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					/* 这里是超出几行省略 */
					overflow: hidden;
				}
			}

			.flex-1 {
				flex: 1;
			}

			.p-r-30 {
				margin-right: 30rpx;
			}

			.p-t-20 {
				margin-top: 20rpx;
			}
		}

		.h-flex {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		}

		.left-icon {
			width: 40rpx;
			height: 40rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			@include animate2;
			transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);

			&.rt45 {
				width: 40rpx;
				height: 40rpx;
				transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
			}
		}

		.edit-icon {
			width: 40rpx;
			height: 40rpx;
			padding-right: 10rpx;
		}

		.content {
			padding-left: 40rpx;
		}
	}
</style>