<template>
	<view class="width-auto" style="position: relative">
		<view class="title">
			{{'安置图'}}
		</view>
		<!-- <view class="right-lines">
			<scroll-view class="left_scrol_style" scroll-x="false" scroll-y="true">
				<view class="flex-s">
					<view class="item-s" v-for="item in list">
						<view>
							<view class="bg-color" >
								<image style="width: 100%;height: 100%;" :src="item.value" mode=""></image>
							</view>
							<view style="color: #333;text-align: center;">{{item.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="data-list">
			<view class="user-data" @click="mouseOvers(1)">
				<view class="mouseOvers" v-if="check1">
					<view class="name-s" style="display: flex;align-items: center;">
						<view>
							{{'会员编号'}}：{{userInfo.memberCode}}
						</view>
						<u-button size="mini" style="padding: 0;width: 0;"
							@click="copy(userInfo.memberCode)">{{ '复制'}}</u-button>
					</view>
					<view class="name-s">{{'会员姓名'}}：{{userInfo.memberName}}
						<view></view>
					</view>
					<view class="name-s">{{'创建日期'}}：{{userInfo.payTime.substring(0,10)}}
						<view></view>
					</view>
					<view class="name-s" style="margin-bottom: 10px">
						{{'消费业绩'}}：{{userInfo.consumeAchieve | numFilter}}
						<view></view>
					</view>
				</view>
				<view class="border-color">
					
					<image class="theimg" src="../../static/images/avatar.png" mode=""></image>
					<!-- <img :src="this.myChart.imageUrl"> -->
				</view>
				<view class="code">{{this.myChart.memberCode}}</view>
				<view class="code">({{this.myChart.memberName}})</view>
			</view>
		</view>
		<view class="data-list1" v-if="this.myChart.leftMember">
			<view class="user-data" @click="mouseOvers(2)">
				<view class="mouseOvers" v-if="check2">
					<view class="name-s" style="display: flex;align-items: center;">
						<view>
							{{'会员编号'}}：{{userInfo1.memberCode}}
						</view>
						<u-button size="mini" style="padding: 0;width: 0;"
							@click="copy(userInfo1.memberCode)">{{ '复制'}}</u-button>
					</view>
					<view class="name-s">{{'会员姓名'}}：{{userInfo1.memberName}}</view>
					<view class="name-s">{{'创建日期'}}：{{userInfo1.payTime.substring(0,10)}}</view>
					<view class="name-s" style="margin-bottom: 10px">
						{{'消费业绩'}}：{{userInfo1.consumeAchieve | numFilter}}</view>
				</view>
				<view class="border-color">
					<image class="theimg" src="../../static/images/avatar.png" mode=""></image>
					<!-- <img :src="this.myChart.leftMember.lastImageUrl ||''"> -->
				</view>
				<view class="code">{{this.myChart.leftMember.lastMemberCode}}</view>
				<view class="code">{{'最末安置'}}</view>
				<view class="code" style="font-size: 28rpx">左区</view>
			</view>
		</view>
		<view class="data-list2" v-if="this.myChart.rightMember">
			<view class="user-data" @click="mouseOvers(3)">
				<view class="mouseOvers" v-if="check3" style="margin-left: -260rpx">
					<view class="name-s" style="display: flex;align-items: center;">
						<view>
							{{'会员编号'}}：{{userInfo2.memberCode}}
						</view>
						<u-button size="mini" style="padding: 0;width: 0;"
							@click="copy(userInfo2.memberCode)">{{ '复制'}}</u-button>
					</view>
					<view class="name-s">{{'会员姓名'}}：{{userInfo2.memberName}}</view>
					<view class="name-s">{{'创建日期'}}：{{userInfo2.payTime.substring(0,10)}}</view>
					<view class="name-s" style="margin-bottom: 10px">
						{{'消费业绩'}}：{{userInfo2.consumeAchieve | numFilter}}</view>
				</view>
				<view class="border-color" v-if="this.myChart.rightMember">
					<image class="theimg" src="../../static/images/avatar.png" mode=""></image>
					<!-- <img :src="this.myChart.rightMember.lastImageUrl"> -->
				</view>
				<view class="code">{{this.myChart.rightMember.lastMemberCode}}</view>
				<view class="code">{{'最末安置'}}</view>
				<view class="code" style="font-size: 28rpx">{{'右区'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from "echarts";
	import {
		getPlaceMent,
		getTreeDetail,getAvatarInfo
	} from "@/config/distribute.js";
	export default {
		name: "recommendTime",
		data() {
			return {
				myChart: {},
				check1: false,
				index1: 0,
				check2: false,
				index2: 0,
				check3: false,
				index3: 0,
				userInfo: {},
				userInfo1: {},
				userInfo2: {},
				list: [{
						"name": "市代",
						"color": "linear-gradient(180deg, #EA728D 0%, #F3CF4F 100%)"
					},
					{
						"name": "区代",
						"color": "linear-gradient(180deg, #14E3A3 0%, #EBDF3C 84%)"
					},
					{
						"name": "SVIP",
						"color": "#EC6C00"
					},
					{
						"name": "VIP",
						"color": "#009B58"
					},
					{
						"name": "创客",
						"color": "#48B2FD"
					},
					{
						"name": "优客",
						"color": "#ED1D25"
					},
					{
						"name": "嗨粉",
						"color": "#B6007A"
					},
					{
						"name": "海粉",
						"color": "#0015CE"
					},
				],
			}
		},
		created() {
			this.getInit();
			this.userInfo = uni.getStorageSync('User')
		},
		filters: {
			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		},
		methods: {
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				})
			},
			mouseOvers(data) {
				if (data == 1) {
					this.check1 = true
					this.check2 = false
					this.check3 = false
					if (this.index1 == 0) {
						getTreeDetail({
							"memberCode": this.myChart.memberCode
						}).then((res) => {
							this.userInfo = res.data
						})
					}

					this.index1++;
				}
				if (data == 2) {
					this.check1 = false
					this.check2 = true
					this.check3 = false
					if (this.index2 == 0) {
						getTreeDetail({
							"memberCode": this.myChart.leftMember.lastMemberCode
						}).then((res) => {
							this.userInfo1 = res.data
						})
					}

					this.index2++;
				}
				if (data == 3) {
					this.check1 = false
					this.check2 = false
					this.check3 = true
					if (this.index3 == 0) {
						getTreeDetail({
							"memberCode": this.myChart.rightMember.lastMemberCode
						}).then((res) => {
							this.userInfo2 = res.data
						})
					}
					this.index3++;
				}
			},
			mouseOut(data) {
				if (data == 1) {
					this.check1 = false
				}
				if (data == 2) {
					this.check2 = false
				}
				if (data == 3) {
					this.check3 = false
				}
			},
			getInit() {
				getAvatarInfo().then(res=>{
					this.list = res.data
				})
				getPlaceMent().then((res) => {
					this.myChart = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex-s {
		width: fit-content;
		display: flex;
		width: 100%;
		// justify-content: center;
		align-items: center;
		background-color: #fff;
		flex-wrap: wrap;
		// height: 80rpx;
		// line-height: 80rpx;
	}

	/*左侧分类视图*/
	.left_scrol_style {
		white-space: nowrap;
		width: 100%;
	}

	.title {
		padding: 20rpx 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 10rpx solid #f3f3f3;
		margin-top: 10rpx;
	}

	.name-s {
		color: #333;
		font-size: 20rpx;
		margin-bottom: 20rpx;
		word-break: break-all;
	}

	.mouseOvers {
		padding: 10px 5px;
		width: 265rpx;
		//height: 144px;
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
		border: 1px solid #ED1D25;
		position: absolute;
		margin-left: 80px;
		z-index: 111;
	}

	.user-data {
		position: relative;
	}

	.code {
		color: #333;
		font-size: 20rpx;
		margin-top: 4px;
		margin-bottom: 15px;
		text-align: center;
	}

	.data-list {
		margin: 100rpx 0 0 0;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.data-list2 {
		margin:350rpx 20rpx 0 0 ;
		position: absolute;
		right: 20rpx;
	}

	.data-list1 {
		margin: 350rpx  0 0 20rpx;
		position: absolute;
		left: 20rpx;
	}

	.border-color {
		width: 120rpx;
		height: 120rpx;
		margin-left: 8px;
		border-radius: 50%;
		img {
			width: 120rpx;
			height: 120rpx;
		}
		.theimg{
			width: 100%;
			height: 100%;
		}
	}

	.width-auto {
		position: relative;
		height: 1200rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto;
	}

	.right-lines {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		position: absolute;
		color: #999;
		font-size: 24rpx;
		flex-wrap: wrap;
	}

	.item-s {
		padding-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 100%;
		line-height: 30px;
		margin-left: 20rpx;
		// margin-right: 20rpx;
		flex-wrap: wrap;
	}

	.bg-color {
		width: 68rpx;
		height: 68rpx;
		border-radius: 4px;
	}
</style>