<template>
	<view>
		<view class="d-b-c topx-box">
			<view class="f26 gray6 mr10">{{$t('MN_T_1')}}</view>
			<view class="search-box">
				<input type="text" name="">
				<view class="icon-search"><u-icon name="search" color="#ffffff" size="30rpx"></u-icon></view>
			</view>
			<view class="f26 gray6 ml10">{{$t('MY_ORD_50')}}</view>
		</view>
		<view class="center-box">
			<view class="example-box" v-if="example&&example!=''">
				<view class="example-item d-c d-c-c" v-for="(item,index) in example" :key="index">
					<image class="example-ava" :src="item.value" mode=""></image>
					<view class="example-name">{{item.name}}</view>
					<!-- <view class="example-name tc">Municipal level agency</view> -->
				</view>
			</view>
			<view class="operate-btnboxs left">
				<view class="d-c-c mb10">
					<button class="f22 operate-btn" @click="changeTop(50)">
						<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-top.png"></u-icon>
					</button>
				</view>
				<view class="d-c-c">
					<button class="f22 operate-btn" @click="changeLeft(50)">
						<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-right.png"></u-icon>
					</button>
					<button class="f22 operate-btn m-0-10" @click="changeTop(-50)">
						<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-down.png"></u-icon>
					</button>
					<button class="f22 operate-btn" @click="changeLeft(-50)">
						<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-left.png"></u-icon>
					</button>
				</view>
			</view>
			<view class="d-c-c operate-btnboxs right">
				<button class="f22 mr10 operate-btn-r" @click="changeSize(0.05)">
					<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/fangda.png"></u-icon>
				</button>
				<button class="f22 mr10 operate-btn-r" @click="changeSize(-0.05)">
					<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/suoxiao.png"></u-icon>
				</button>
				<button class="f22 operate-btn-r" @click="restTree()">
					<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/reset.png"></u-icon>
				</button>
			</view>
			<view class="scroll-box">
				<TreeChart :left="left" :top="top" :size="size" :json="listData"
					:class="{ landscape: landscape.length }" @click-node="clickNode" />
			</view>
			<template v-if="isPop">
				<view class="pop-bg"></view>
				<view class="pop-usercontent">
					<view class="d-e-c">
						<u-icon name="close" size="32rpx" color="#999" @click="isPop = false"></u-icon>
					</view>
					<view class="Poster1 posterbox">
						<view class="d-b-c mb20">
							<view class="d-b-c">
								<view>
									<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.avatarUrl"
										:src="popMould.avatarUrl" mode="aspectFit" class="pop-userava Poster1"></image>
								</view>
								<view class="ml20">
									<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.countryUrl2"
										:src="popMould.countryUrl2" mode="aspectFit" class="pop-country Poster1"></image>
								</view>
							</view>
							<view>
								<view class="mb10">
									<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.settleCountryUrl2"
										:src="popMould.settleCountryUrl2" mode="aspectFit" class="pop-country Poster1"></image>
								</view>
								<view data-enode="结算国家" class="f24 gray3 Poster1" style="z-index: 1">
									{{$t('MN_F_18')}}
								</view>
							</view>
						</view>
						<view>
							<view class="pb20 border-b">
								<view class="d-s-c mb20">
									<view data-enode="会员编号" class="f24 gray3 content-name Poster1" style="z-index: 1">
										<view class="f24 gray3 content-name">会员编号</view>
									</view>
									<view :data-enode="popMould.memberCode" class="content-box Poster1 text-ellipsis-2"
										style="z-index: 1">
										{{popMould.memberCode}}
									</view>
								</view>
								<view class="d-s-c mb20">
									<view data-enode="会员姓名" class="f24 gray3 Poster1 content-name" style="z-index: 1">
										会员姓名
									</view>
									<view :data-enode="popMould.name" class="content-box Poster1 text-ellipsis-2"
										style="z-index: 1">
										{{popMould.name}}
									</view>
								</view>
								<view class="d-s-c">
									<view data-enode="支付时间" class="f24 gray3 Poster1 content-name" style="z-index: 1">
										支付时间
									</view>
									<view :data-enode="popMould.payDate" class="content-box text-ellipsis-2"
										style="z-index: 1">
										{{popMould.payDate}}

									</view>
								</view>
							</view>
							<view class="pt20">
								<!--   复购结余  -->
								<view class="d-b-c mb20 Poster1">
									<view data-enode="业绩(PV)" class="flex-1 tc text-ellipsis Poster1"
										style="z-index: 1">
										业绩(PV)
									</view>
									<view data-enode="左区" class="flex-1 tc text-ellipsis Poster1" style="z-index: 1">
										左区
									</view>
									<view data-enode="右区" class="flex-1 tc text-ellipsis Poster1" style="z-index: 1">
										右区
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="真实新增" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										真实新增
									</view>
									<view :data-enode="popMould.leftRealNewPv"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftRealNewPv}}
									</view>
									<view :data-enode="popMould.rightRealNewPv"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightRealNewPv}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="首购新增" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										首购新增
									</view>
									<view :data-enode="popMould.leftFirstPurchaseAdd"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftFirstPurchaseAdd}}
									</view>
									<view :data-enode="popMould.rightFirstPurchaseAdd"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightFirstPurchaseAdd}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="复购新增" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										复购新增
									</view>
									<view :data-enode="popMould.leftRepeatPurchaseSurplus"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftRepeatPurchaseSurplus}}
									</view>
									<view :data-enode="popMould.rightRepeatPurchaseSurplus"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightRepeatPurchaseSurplus}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="真实累计" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										真实累计
									</view>
									<view :data-enode="popMould.leftRealTotal"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftRealTotal}}
									</view>
									<view :data-enode="popMould.rightRealTotal"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightRealTotal}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="首购累计" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										首购累计
									</view>
									<view :data-enode="popMould.leftFirstTotal"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftFirstTotal}}
									</view>
									<view :data-enode="popMould.rightFirstTotal"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightFirstTotal}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="复购累计" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										复购累计
									</view>
									<view :data-enode="popMould.leftRepeatPurchaseTotal"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftRepeatPurchaseTotal}}
									</view>
									<view :data-enode="popMould.rightRepeatPurchaseTotal"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightRepeatPurchaseTotal}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="首购结余" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										首购结余
									</view>
									<view :data-enode="popMould.leftFirstSurplus"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftFirstSurplus}}
									</view>
									<view :data-enode="popMould.rightFirstSurplus"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightFirstSurplus}}
									</view>
								</view>
								<view class="content-box-item Poster1">
									<view data-enode="复购结余" class="flex-1 content-box text-ellipsis Poster1"
										style="z-index: 1">
										复购结余
									</view>
									<view :data-enode="popMould.leftRepeatPurchaseSurplus"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.leftRepeatPurchaseSurplus}}
									</view>
									<view :data-enode="popMould.rightRepeatPurchaseSurplus"
										class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
										{{popMould.rightRepeatPurchaseSurplus}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="d-b-c">
						<view class="small-btn flex-1 mr20" @click="downImage('Poster1')">{{$t('S_C_45')}}</view>
						<view class="small-text-btn flex-1" @click="copyText()">{{$t('N_I_243')}}</view>
					</view>
				</view>
			</template>

			<!-- <movable-area class="scroll-box">
				<movable-view scale out-of-bounds :scale-value="0.5" :scale-max="20" :scale-min="0.1" direction="all">
					<view class="bg-white pt30 mt0 pr" v-if="listData != null">
						<TreeChart  :left="left" :top="top" :json="listData" :class="{ landscape: landscape.length }" />
					</view>
				</movable-view>
			</movable-area>
 -->
		</view>
		<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
			ref="Eposter">
		</Eposter>
	</view>
</template>

<script>
	import TreeChart from "@/components/treeParent/resettleSO.vue";
	import Eposter from '@/components/evils-el-poster/Poster.vue';
	export default {
		components: {
			TreeChart,
			Eposter
		},
		data() {
			return {
				list: [],
				detailModel: {

				},
				top: 0,
				left: 0,
				startData: {
					clientX: '',

					clientY: ''
				},
				moveX: 0,
				moveY: 0,
				touch: {},
				example: [],
				landscape: [],
				listData: null,
				size: 1.0,
				downImg: [],
				isPop: false,
				popMould: {

				}
			}
		},
		onShow() {
			this.getExample();
			this.getData();
		},
		methods: {
			copyText() {
				let self = this;
				let md = self.popMould;
				let text = `
				会员编号：${md.memberCode} \n
				会员姓名：${md.name}
				支付时间：${md.payDate} \n
				业绩(PV)  左区  右区 \n
				真实新增  ${md.leftRealNewPv}  ${md.rightRealNewPv} \n
				首购新增  ${md.leftFirstPurchaseAdd}  ${md.rightFirstPurchaseAdd} \n
				复购新增  ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n
				真实累计  ${md.leftRealTotal}  ${md.rightRealTotal} \n
				首购累计  ${md.leftFirstTotal}  ${md.rightFirstTotal} \n
				复购累计  ${md.leftRepeatPurchaseTotal}  ${md.rightRepeatPurchaseTotal} \n
				首购结余  ${md.leftFirstSurplus}  ${md.rightFirstSurplus} \n
				复购结余  ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n
				`;
				uni.setClipboardData({
					data: text,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: self.$t('MY_CK_29')
								})
							}
						})
					}
				})
			},
			downloadImg() {
				let self = this;
				let n = 0;
				uni.showLoading({
					title: self.$t('w_0413')
				});
				self.downImg = [this.posterImg];
				self.downImg.forEach((item, index) => {
					// 图片保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: item,
						success(data) {
							n++;
							if (n == self.downImg.length) {
								uni.showToast({
									icon: 'none',
									title:  self.$t('fn_056'),
									duration: 2000
								});
								uni.hideLoading();
							}
						},
						fail(err) {
							if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
								uni.showToast({
									title: '请允许访问相册后重试',
									icon: 'none',
									duration: 1000
								});
								setTimeout(() => {
									uni.openSetting();
								}, 1000);
							}
							uni.hideLoading();
							uni.showModal({
								title:  self.$t('w_0406')
							});
							return;
						},
						complete(res) {
							console.log('complete');
						}
					});
				});
			},
			onError(err) {
				console.log(`err`, err);
			},
			onSuccess(val) {
				this.posterImg = val;
				this.downloadImg(this.posterImg);
			},
			downImage(elClass) {
				this.$refs.Eposter.createForElRect(elClass, false);
			},
			changeLeft(e) {
				this.left += e;
			},
			changeTop(e) {
				this.top += e;
			},
			changeSize(e) {
				this.size += e;
			},
			restTree() {
				this.left = 0;
				this.top = 0;
				this.size = 1.0;
			},
			clickNode(e) {
				let self = this;
				if (e) {
					console.log(11111);
					self.popMould = e;
					self.isPop = true;

					// self._post('member/manage/member-structure/get-url-base64', {
					// 	avatarUrl: e.avatarUrl,
					// 	countryUrl2: e.countryUrl2,
					// 	settleCountryUrl2: e.settleCountryUrl2
					// }, res => {
					// 	self.popMould.avatarUrl = res.avatarUrlBase64;
					// 	self.popMould.countryUrl2 = res.countryUrl2Base64;
					// 	self.popMould.settleCountryUrl2 = res.settleCountryUrl2Base64;
					// })

				}
			},
			getExample() {
				let self = this;
				self._get('/member/api/member-structure/get-avatar-info', {}, res => {
					self.example = res.data;
				})
			},
			getData() {
				let self = this;
				self._get('/member/api/member-structure/az-framework', {
					memberSettlePeriodId: 935,
					memberCode: 'CN30720208',
					level: 6,
					type: 1
				}, res => {
					self.listData = res.data[0];
				})
			},
			// 触摸touch事件

			start(e) {
				//@touchstart 触摸开始

				this.transition = '.1s';

				this.startData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标

				this.startData.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
			},
			end(e) {
				//@touchend触摸结束

				this.moveX = 0; //触摸事件结束恢复原状
				this.moveY = 0; //触摸事件结束恢复原状

				this.transition = '.5s';
			},
			move(event) {
				//@touchmove触摸移动

				let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象

				this.touch = touch;

				let data = touch.clientX - this.startData.clientX;
				let datay = touch.clientY - this.startData.clientY;

				if (touch.clientX < this.startData.clientX) {
					//向左移动

					if (data < -375) {
						data = -375;
					}
				}
				if (touch.clientY < this.startData.clientY) {
					//向左移动

					if (datay < -375) {
						datay = -375;
					}
				}
				if (touch.clientX > this.startData.clientX) {
					//向右移动
					if (data > 375) {
						data = 375;
					}
				}
				if (touch.clientY > this.startData.clientY) {
					//向右移动
					if (datay > 375) {
						datay = 375;
					}
				}
				this.moveX = data;
				this.moveY = datay;
				this.top += this.moveY / 40;
				this.left += this.moveX / 40;
			},
		}
	}
</script>

<style lang="scss">
	.center-box {
		touch-action: none;
	}

	.center-box {
		padding: 26rpx 22rpx;

		.example-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			padding: 22rpx 0 28rpx 0;
			height: 312rpx;
			overflow-y: auto;
			margin-bottom: 20rpx;

			.example-item {
				width: 20%;
				flex-shrink: 0;
				padding: 10rpx;
				box-sizing: border-box;

				.example-ava {
					width: 104rpx;
					height: 104rpx;
					display: block;
				}

				.example-name {
					font-size: 26rpx;
					color: #666;
					word-break: break-all;

				}
			}
		}
	}

	.topx-box {
		background-color: #fff;
		padding: 20rpx 31rpx 20rpx 28rpx;
	}

	.search-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 510rpx;
		height: 65rpx;
		background: #F5F6F8;
		border-radius: 33rpx;
		padding: 9rpx 12rpx;
		box-sizing: border-box;

		input {
			flex: 1;
			line-height: 65rpx;
			font-size: 26rpx;
			padding: 0 15rpx;
		}
	}

	.icon-search {
		width: 48rpx;
		height: 48rpx;
		background-color: #EE252A;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 50%;
	}

	.operate-btnboxs {
		position: absolute;
		z-index: 101;
		padding: 29rpx 26rpx;
		box-sizing: border-box;
	}

	.operate-btnboxs.left {
		left: 22rpx;
	}

	.operate-btnboxs.right {
		right: 22rpx;
	}

	.operate-btn {
		width: 64rpx;
		height: 64rpx;
		background: #F2F2F2;
		border-radius: 5rpx;
		padding: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.operate-btn-r {
		width: 64rpx;
		height: 64rpx;
		background: #F2F2F2;
		border-radius: 5rpx;
		padding: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scroll-box {
		background-color: #fff;
		border-radius: 33rpx;
		width: 100%;
		overflow: hidden;
		height: calc(100vh - 104rpx - 362rpx - 72rpx);
		// display: flex;
		// justify-content: center;
		// align-items: cen;
	}

	.pop-bg {
		z-index: 103;
	}

	.pop-usercontent {
		width: 704rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: fixed;
		left: 23rpx;
		top: 40rpx;
		z-index: 104;
		padding: 20rpx 27rpx 20rpx 24rpx;
		box-sizing: border-box;

		.pop-userava {
			width: 104rpx;
			height: 104rpx;
		}

		.pop-country {
			width: 88rpx;
			height: 54rpx;
		}
	}

	.posterbox {
		padding: 20rpx 0;
	}

	.content-box {
		flex: 1;
		height: 52rpx;
		background: #F3F3F3;
		border: 1rpx solid #EEEEEE;
		border-radius: 8rpx;
		line-height: 52rpx;
		padding: 0 15rpx;
		text-align: center;
	}

	.content-name {
		width: 120rpx;
		margin-right: 16rpx;
		word-break: break-all;
	}

	.content-box-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 17rpx;
		font-size: 24rpx;
		color: #333;

		.content-box {
			margin: 0 18rpx;
		}
	}

	.small-btn {
		width: 312rpx;
		height: 72rpx;
		background: #FB3024;
		border-radius: 34rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.small-text-btn {
		width: 312rpx;
		height: 72rpx;
		border: 1px solid #FB3024;
		border-radius: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #FB3024;

	}
</style>