<template>
	<view class="pb40">
		<!-- <view class="content">
			<view class="d-s-c mb30">
				<picker style="margin-right: 20rpx;" :range="monthList" @change="changeMonth">
					<view class="picker-small">
						<text>{{ monthIndex + 1 }}{{ $t('ENU_SETTLE_P_3') }}</text>
						<u-icon name="arrow-down-fill" size="28rpx" color="#333"></u-icon>
					</view>
				</picker>
				<picker :range="typeList" @change="changeType">
					<view class="picker-small">
						<text>{{ typeList[achievementType] }}</text>
						<u-icon name="arrow-down-fill" size="28rpx" color="#333"></u-icon>
					</view>
				</picker>
			</view>
			<view class=" content-box box-2">
				<view class="d-b-s">
					<view class="mb20 flex-1 ">{{ $t('w_0135') }}</view>
					<view class="mb20 flex-1 ">{{ $t('S_C_18') + $t('w_0136') }}</view>
					<view class="mb20 flex-1 ">{{ $t('N_I_88') }}</view>
				</view>
				<view class="d-b-c">
					<view class="f30 fb flex-1 ">{{ formatNum(detail.leftAchieve || 0) }}</view>
					<view class="f30 fb flex-1 ">{{ formatNum(detail.leftDirectAchieve || 0) }}</view>
					<view class="f30 fb flex-1 ">{{ detail.leftCoun }}</view>
				</view>
			</view>
			<view class="d-c-s d-c content-box box-3">
				<view class="mb20">{{ $t('w_0136') }}</view>
				<view class="f30 fb">{{ formatNum(detail.directAchieve) }}</view>
			</view>
			<view class=" content-box box-2">
				<view class="d-b-s">
					<view class="mb20 flex-1 ">{{ $t('w_0137') }}</view>
					<view class="mb20 flex-1 ">{{ $t('S_C_19') + $t('w_0136') }}</view>
					<view class="mb20 flex-1 ">{{ $t('N_I_92') }}</view>
				</view>
				<view class="d-b-c">
					<view class="f30 fb flex-1">{{ formatNum(detail.rightAchieve || 0) }}</view>
					<view class="f30 fb flex-1">{{ formatNum(detail.rightDirectAchieve || 0) }}</view>
					<view class="f30 fb flex-1">{{ detail.rightCount }}</view>
				</view>
			</view>
		</view> -->
		<view class="pt40">
			<view class="title">{{$t('ENU_MENU_512')}}</view>
			<view class="pt30">
				<view class="d-c-c d-c" style="margin-bottom: 100rpx;" @click="getMould('detail1', diagramDetail.memberCode)">
					<view><image class="user-img" src="/static/default.png" mode=""></image></view>
					<view class="f28 gray3">{{ diagramDetail.memberCode }}</view>
					<view class="f24 gray6">{{ diagramDetail.memberName }}</view>
				</view>
				<view class="d-a-c list-wrap" :class="memberAchieveDisVOList && memberAchieveDisVOList.length > 4 ? '' : 'short-small'">
					<template v-for="(v, idx) in memberAchieveDisVOList">
						<view class="d-c-c d-c list-item" @click="getMould('detail2', v.lastMemberCode)"  :key="idx">
							<view><image class="user-img" src="/static/default.png" mode=""></image></view>
							<view class="f24 gray3">{{ v.lastMemberCode }}</view>
							<view class="f24 gray3 mb10 mt10">{{ $t('N_I_101') }}</view>
							 <view class="f28 gray3" v-if="v.placeDept >= 4">
          					  {{ v.placeDept}}<span v-if="languages==='en-US'">th</span> {{ '' }} {{ $t("fn_011") }}
          				  </view>
           				 <view class="f28 gray3" v-else>
           					   {{ v.placeDept }}{{ $t("fn_011") }}
            				</view>
							<!-- <view class="f28 gray3">{{ $t('fn_010')+v.placeDept+$t('fn_011') }}</view> -->
						</view>
					</template>
					<!-- <template v-for="(v,idx) in memberAchieveDisVOList" :key="idx">
						<view class="d-c-c d-c">
							<view><image class="user-img" src="/static/default.png" mode=""></image></view>
							<view class="f24 gray3">{{ v.lastMemberName }}</view>
							<view class="f28 gray3">{{ $t('N_I_101') }}</view>
							<view class="f24 gray6">{{ $t('S_C_18') }}</view>
						</view>
					</template> -->

					<!-- <view class="d-c-c d-c" @click="getMould('detail2', diagramDetail.leftMember.lastMemberCode)">
						<view><image class="user-img" src="/static/default.png" mode=""></image></view>
						<view class="f28 gray3">{{ diagramDetail.leftMember.lastMemberCode }}</view>
						<view class="f28 gray3">{{ $t('N_I_101') }}</view>
						<view class="f24 gray6">{{ $t('S_C_18') }}</view>
					</view>
					<view class="d-c-c d-c" @click="getMould('detail3', diagramDetail.rightMember.lastMemberCode)">
						<view><image class="user-img" src="/static/default.png" mode=""></image></view>
						<view class="f28 gray3">{{ diagramDetail.rightMember.lastMemberCode }}</view>
						<view class="f28 gray3">{{ $t('N_I_101') }}</view>
						<view class="f24 gray6">{{ $t('S_C_19') }}</view>
					</view> -->
				</view>
			</view>
			<template v-if="isOpen">
				<view class="pop-bg" @click.stop="isOpen = false"></view>
				<view class="pop-content">
					<view class="mb10">{{ $t('N_I_124') }}</view>
					<view class="mb10">
						{{ module[detailMould].memberCode }}
						<text class="ml20 copy-text" @click="copyFunc(module[detailMould].memberCode)">{{ $t('MY_CK_27') }}</text>
					</view>
					<view class="mb10">{{ $t('CK_KS_14') }}:{{ module[detailMould].memberName }}</view>
					<view class="mb10">{{ $t('PER_DA_9') }}:{{ module[detailMould].payTime }}</view>
					<view>{{ $t('w_0306') }}:{{ formatNum(module[detailMould].consumeAchieve) }}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			now: 0,
			monthList: [],
			typeList: [this.$t('ENU_ACHIEVEMENT_TYPE_1'), this.$t('ENU_ACHIEVEMENT_TYPE_2'), this.$t('ENU_ACHIEVEMENT_TYPE_3')],
			monthIndex: 0,
			detail: {
				leftCoun: 0,
				rightCount: 0,
				leftAchieve: 0,
				rightAchieve: 0,
				directAchieve: 0
			},
			achievementType: 0,
			// example: [],
			diagramDetail: {
				imageUrl: '',
				leftMember: {
					lastImageUrl: '',
					lastMemberCode: '',
					lastMemberName: ''
				},
				memberCode: '',
				memberName: '',
				rightMember: {
					lastImageUrl: '',
					lastMemberCode: '',
					lastMemberName: ''
				}
			},
			memberCode: '',
			module: {
				detail1: null,
				detail2: null,
				detail3: null
			},

			isOpen: false,
			detailMould: '',
			languages:'',
			memberAchieveDisVOList: []
		};
	},
	onLoad() {
		this.getDiagramData();
		this.initDate();
		this.languages= uni.getLocale();
	},
	methods: {
		copyFunc(data) {
			let self = this;
			uni.setClipboardData({
				data: data,
				showToast: false,
				success: function() {
					uni.showToast({
						title: self.$t('MY_CK_29'),
						icon: 'none'
					});
					console.log('success');
				}
			});
		},
		dowloadFunc(e, name) {
			let self = this;
			uni.showLoading({
				title: self.$t('w_0421')
			});
			uni.downloadFile({
				url: e, //调接口返给的url
				success: function(res) {
					console.log(res);
					if (res.statusCode == 200) {
						var Path = res.tempFilePath; //调 uni.downloadFile成功之后，会返给tempFilePath
						uni.saveFile({
							tempFilePath: Path,
							success: function(result) {
								var savedFilePath = result.savedFilePath;
								self.fSetFileName(savedFilePath, name, e);
							},
							fail: err => {
								uni.showToast({
									title: self.$t('w_0406'),
									icon: 'none'
								});
								uni.hideLoading();
							}
						});
					} else {
						uni.showToast({
							title: self.$t('w_0407'),
							icon: 'none'
						});
					}
					uni.hideLoading();
				},
				fail: err => {
					uni.hideLoading();
					uni.showToast({
						title: self.$t('w_0408'),
						icon: 'none'
					});
				}
			});
		},
		fSetFileName(sFilePath, sFileName, e) {
			let self = this;
			var sFileName = sFileName.split('/')[sFileName.split('/').length - 1]; //原来的文件名
			var aFileUrl = sFilePath.split('/').splice(0, sFilePath.split('/').length - 1); //saveFile API保存的本地地址
			var url = e; //请求地址
			let dtask = plus.downloader.createDownload(
				url,
				{
					filename: '_downloads' + aFileUrl.join('/') + '/' + sFileName //利用保存路径，实现文件的重命名
				},
				(d, status) => {
					if (status == 200) {
						let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						self.fGetSavedFileList();
						console.log('-----------------');
						console.log(fileSaveUrl);
						/*uni.openDocument({
								filePath: escape(fileSaveUrl),
								fail: e => {
									console.log(JSON.stringify(e));
									console.log(escape(fileSaveUrl));
									console.log(e);
									uni.showToast({
										title: `打开失败`
									});
								}
							});*/
						setTimeout(
							() =>
								uni.openDocument({
									filePath: fileSaveUrl,
									showMenu: false,
									success: function() {
										console.log('打开文档成功');
									},
									fail: function(e) {
										console.log(e);
										uni.showToast({
											title: this.$t('w_0410'),
											duration: 2000,
											icon: 'none'
										});
									}
								}),
							1000
						);
					} else {
						//下载失败
						plus.downloader.clear(); //清除下载任务
					}
				}
			);
			dtask.setRequestHeader('Authorization', 'Bearer ' + uni.getStorageSync('SET_TOKEN'));
			dtask.start();
		},
		changeType(e) {
			this.achievementType = e.detail.value;
			this.getData();
		},
		changeMonth(e) {
			this.monthIndex = e.detail.value;
			this.getData();
		},
		initDate() {
			let date = new Date();
			let self = this;
			self.now = date.getMonth();
			for (var i = 1; i <= self.now + 1; i++) {
				self.monthList.push(i);
			}
			this.monthIndex = self.now;
			// this.getData();
			console.log(self.monthList);
		},
		getDiagramData() {
			let self = this;
			self._get('member/api/achieve/query-place-tree', {}, res => {
				self.diagramDetail = res.data;
				self.memberAchieveDisVOList = res.data && res.data.memberAchieveDisVOList;
			});
		},
		getMould(e, code) {
			let self = this;
			self.detailMould = e;
			self.memberCode = code;
			self.getDetail();
			/* let self = this;
			self.detailMould = e;
			self.memberCode = code;
			if (!self[e]) {
				self.getDetail();
			} else {
				this.isOpen = true;
			} */
		},
		getDetail() {
			let self = this;
			self._post(
				'member/api/achieve/query-place-tree-detail',
				{
					memberCode: self.memberCode
				},
				res => {
					self.module[self.detailMould] = res.data;
					this.isOpen = true;
				}
			);
		},
		getData() {
			return;
			let self = this;
			uni.showLoading({
				title: 'Loading...'
			});
			self._get(
				'member/api/achieve/place-new-add-achieve-stat',
				{
					monthType: self.monthIndex + 1,
					achievementType: self.achievementType + 1
				},
				res => {
					self.detail = res.data;
				},
				false,
				com => {
					uni.hideLoading();
				}
			);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}

.list-wrap {
	flex-wrap: nowrap;
	overflow-x: auto;
	justify-content: flex-start;
	padding: 0 22rpx;
	&.short-small {
		justify-content: space-around;
	}
	.list-item {
		margin-right: 30rpx;
		&:last-child {
			margin-right: 0;
		}
	}
}

.content {
	padding: 26rpx 22rpx 26rpx 23rpx;
}

.picker-small {
	width: 232rpx;
	height: 72rpx;
	border: 1rpx solid #eeeeee;
	border-radius: 15rpx;
	font-size: 28rpx;
	padding: 0 28rpx 0 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.content-box {
	padding: 0 20rpx;
	min-height: 156rpx;
	border-radius: 10rpx;
	color: #fff;
	font-size: 28rpx;
	margin-bottom: 25rpx;
}

.box-1 {
	background: linear-gradient(180deg, #fc7c7c 0%, #f65757 100%);
}

.box-2 {
	padding-top: 30rpx;
	background: linear-gradient(180deg, #ff9354 0%, #ff7f36 100%);
}

.box-3 {
	background: linear-gradient(180deg, #677af9 0%, #697bf2 100%);
}
.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-left: 22rpx;
	position: relative;
	padding-left: 12rpx;
	&::before {
		content: '';
		width: 3px;
		height: calc(100% - 14rpx);
		background: #fb3024;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.user-img {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
}

.pop-bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 98;
}

.pop-content {
	position: fixed;
	left: 0;
	right: 0;
	top: 30%;
	margin: auto;
	width: 60%;
	background: #ffffff;
	border: 1px solid #fb3024;
	box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	font-size: 24rpx;
	color: #666;
	padding: 33rpx 15rpx;
	z-index: 99;
	line-height: 1.5;
}
.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;
		}
	}
}
.copy-text {
	// border: 1px solid #ebedf0;
	padding: 5rpx 12rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	background-color: #ccc;
	color: #fff;
}
</style>
