<template>
	<div class="content">
		<form action="" class="sm">
			<van-search v-model="searchValue" @search="onSearch" placeholder="点击搜索单号" />
			<img @click="wxScanCode()" src="@/assets/user/u4.png" alt="">
		</form>
		<!-- 显示 -->
		<div class="echarts1">
			<div style="width: 50%; position: relative;">
				<div id="myChart1" style="width: 100%;"></div>
				<div class="legend">
					<div @click="action(0)">
						<div class="ball"></div>
						<div>签收成功</div>
					</div>
					<div @click="action(1)">
						<div class="ball" style="background-color: #f98407;"></div>
						<div>派件中</div>
					</div>
					<div @click="action(2)">
						<div class="ball" style="background-color: #f9df07;"></div>
						<div>派件失败</div>
					</div>

				</div>
			</div>

			<div style="width: 50%; position: relative;">
				<div id="myChart2" style="width: 100%;"></div>
				<div class="legend">
					<div @click="actionTwo(0)">
						<div class="ball"></div>
						<div>揽收成功</div>
					</div>
					<div @click="actionTwo(1)">
						<div class="ball" style="background-color: #f98407;"></div>
						<div>待揽收</div>
					</div>
					<div @click="actionTwo(2)">
						<div class="ball" style="background-color: #f9df07;"></div>
						<div>未揽收</div>
					</div>

				</div>
			</div>

		</div>

		<!-- 图标 -->
		<div class="icon">
			<div class="icon-box">
				<a @click="goPage(1)">
					<span class="span">
						<img src="@/assets/user/u32.png" alt="">
					</span>
					<p>快件入库</p>
				</a>
			</div>
			<div class="icon-box">
				<a @click="goPage(2)" >
					<span class="span">
						<img src="@/assets/user/u35.png" alt="">
					</span>
					<p>快件出库</p>
				</a>
			</div>
			<div class="icon-box">
				<a @click="goPage(3)" >
					<span class="span">
						<img src="@/assets/user/u38.png" alt="">
					</span>
					<p>派件查询</p>
				</a>
			</div>
			<div class="icon-box">
				<a @click="goPage(4)" >
					<span class="span">
						<img src="@/assets/user/u41.png" alt="">
					</span>
					<p>派件签收</p>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
import { appFindYourShipment, appStatistics } from '../../api/index'
import {
	Toast,
	Dialog
} from 'vant'
// vue 专用版本JS-SDK
import wx from "weixin-jsapi";
export default {
	data() {
		return {
			deliveryList: [],//派件
			collectList: [],//揽收
			searchValue: "", //搜索单号的值
			expressMap: {}, //收件
			mailMap: {}, //寄件
			isLoading: false,//
			echartsOneData: [{
				value: 0,
				name: '签收成功'
			},
			{
				value: 0,
				name: '派送中'
			},
			{
				value: 0,
				name: '派送失败'
			},],
			echartsTwoData: [{
				value: 0,
				name: '揽收成功'
			},
			{
				value: 0,
				name: '待揽收'
			},

			{
				value: 0,
				name: '未揽收'
			},]
		}
	},
	async mounted() {
		// 数据图表
		this.isLoading = true
		const resValue = await appStatistics({ deliveryPeopleId: localStorage.getItem('courierId') })
		if (resValue.code != 0) {
			Toast(resValue.error)
			return
		}
		this.isLoading = false
		const { dispatchStatistics = [], pickupStatistics = [] } = resValue.data
		dispatchStatistics.forEach(({ expressStatus, number }) => {
			if (expressStatus == "2") {
				this.echartsOneData[0].value = number  // 签收成功
			} else if (expressStatus == "1") {
				this.echartsOneData[1].value = number // 派送中
			} else if (expressStatus == "4") {
				this.echartsOneData[2].value = number // 派送失败
			}
		})
		let waiteCollecte = 0 //待揽收
		let noCollecte = 0 //未揽收
		let collecteSuccess = 0 //揽收成功
		pickupStatistics.forEach(({ express_status, number }) => {
			if (express_status == "1") {
				this.echartsTwoData[1].value = number  //待揽收
				this.echartsTwoData[2].value = number  //未揽收
			} else if (express_status == "2") {
				this.echartsTwoData[0].value = number //揽收成功
			}
		})
		setTimeout(() => {
			// 页面加载完成唤醒微信扫一扫
			//本地 注释  服务器 放开
			let myChart = this.$echarts.init(document.getElementById('myChart1'))

			var option = {
				tooltip: {
					show: false, //展示牌
					trigger: 'item'
				},
				// legend: {
				// 	show: false,
				// 	selectedMode: 'single', //有三种属性 single单选 ， multiple多选 ， false ，禁选
				// 	top: '65%',
				// 	left: '30%',
				// 	orient: 'vertical',
				// 	icon: 'circle',
				// 	itemGap: 6,
				// 	textStyle: {
				// 		fontSize: 10,
				// 	}

				// },
				series: [{
					name: '数据',
					data: this.echartsOneData,
					type: 'pie',
					center: ["50%", "35%"],
					radius: ['40%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: false, //初始展示
							position: 'center',
							color: '#4c4a4a',
							formatter: function (params) {
								return `{active|${params.data.name}}\n\r{total|${params.data.value}}`
							},
							rich: {
								total: {
									fontSize: 12,
									fontWeight: 'bold',
									color: '#454c5c'
								},
								active: {
									fontSize: 10,
									color: '#6c7a89',
									lineHeight: 30,
								},
							}
						},
						emphasis: { //中间文字显示
							show: true,
						}
					},
					color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
					labelLine: {
						show: false
					},

				}]
			}
			myChart.setOption(option)
			this.myChart = myChart
			this.myChart.on('click', (params) => {
				console.log(params.data.value, params, '===========================')
				// 取消所有高亮  
				this.myChart.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
					// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
					dataIndex: [0, 1, 2]
				});

				this.myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: params.dataIndex
				});
			});


			// 图2
			let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
			var option2 = {
				tooltip: {
					show: false, //展示牌
					trigger: 'item'
				},
				series: [{
					name: '数据',
					type: 'pie',
					center: ["50%", "35%"],
					radius: ['40%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: false,
							position: 'center',
							color: '#4c4a4a',
							formatter: function (params) {
								return `{active|${params.data.name}}\n\r{total|${params.data.value}}`
							},
							rich: {
								total: {
									fontSize: 12,
									fontWeight: 'bold',
									color: '#454c5c'
								},
								active: {
									fontSize: 10,
									color: '#6c7a89',
									lineHeight: 30,
								},
							}
						},
						emphasis: { //中间文字显示
							show: true,
						}
					},
					color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
					labelLine: {
						show: false
					},
					data: this.echartsTwoData
				}]
			}
			myChart2.setOption(option2)
			this.myChart2 = myChart2
			this.myChart2.on('click', (params) => {
				console.log(params.data.value, params, '===========================')
				// 取消所有高亮  
				this.myChart2.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
					// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
					dataIndex: [0, 1, 2]
				});

				this.myChart2.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: params.dataIndex
				});
			});
		}, 500)

	},
	methods: {
		goPage(value) {
			if(value === 1) {
				window.location.href = window.location.href + "storage"
				window.location.reload()
			}
			if(value === 2) {
				window.location.href = window.location.href + "Removal"
				window.location.reload()
			}
			if(value === 3) {
				window.location.href = window.location.href + "DeliveryInquiry"
				window.location.reload()
			}
			if(value === 4) {
				window.location.href = window.location.href + "SignA"
				window.location.reload()
			}
		},
		// 图表点击设置，因为需求和echars的API有冲突，所以自己写了一个图例
		action(dataIndex) {
			// 先取消所有高亮
			this.myChart.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
				dataIndex: [0, 1, 2]
			});
			// 指定高亮
			this.myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: dataIndex
			});
		},
		actionTwo(dataIndex) {
			// 先取消所有高亮
			this.myChart2.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
				dataIndex: [0, 1, 2]
			});
			// 指定高亮
			this.myChart2.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: dataIndex
			});
		},
		// 点击搜索icon
		wxScanCode() {
			window.location.reload()
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: (res) => {
					//alert(res)
					console.log(res, '==============')
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					if (result.indexOf(",") != -1) {
						let result1 = res.resultStr.split(",");
						result = result1[result1.length - 1];
					}
					this.wxScanCodeA(result)
				},
				error: function (res) {
					console.log(res, 'error++++++++++');
				}
			});
			console.log('qwe')


		},

		// 点击搜索icon
		async wxScanCodeA(result) {
			const res = await appFindYourShipment({ expressNo: result }, { emulateJSON: true, loading: true, message: '加载中...' })
			if (res.msg == 'success' && res.data) {
				this.$store.state.shipment = res
				this.$router.push('ScannerResult')
			} else {
				Toast('找不到此单号')
			}
		},

		// 搜索
		async onSearch() {
			const res = await appFindYourShipment({ expressNo: this.searchValue }, { emulateJSON: true, loading: true, message: '加载中...' })
			if (res.msg == 'success' && res.data) {
				this.$store.state.shipment = res
				this.$router.push('ScannerResult')
			} else {
				Toast('找不到此单号')
			}
		}

	},

	// async getUser() {
	// 	const res = await getSysUserInfoByUserIdAPI({ userId: localStorage.getItem("userId") })
	// 	this.$store.state.user = res.sysUserInfo
	// 	console.log(this.$store.state.user, 'this.$state.state.user')
	// }

	//单号搜索
	// onSearch(val) {
	// 	this.$router.push({
	// 		path: '/Sysearch',
	// 		query: {
	// 			expressNo: val,
	// 			searchType: "1" //1.搜索全部 2.搜索快件 3.搜索寄件
	// 		}
	// 	})
	// },

}


</script>

<style scoped lang="less">
.content {
	padding: 0.25rem .37rem;

	.sm {
		display: flex;
		margin-bottom: .2rem;
		justify-content: space-between;

		/deep/.van-search {
			width: 100%;
			height: .76rem;
			border-radius: 25px;
			overflow: hidden;
			padding: 0rem;
			background-color: white;

			.van-search__content {
				background-color: white;
			}

			input {
				background-color: white;
			}
		}

		img {
			width: .4rem;
			height: .4rem;
			position: relative;
			top: .18rem;
			margin-left: .1rem;
		}
	}

	.echarts1 {
		height: 4.2rem;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;

		#myChart1,
		#myChart2 {
			width: 50%;
			height: 200px;
		}

		.legend {
			font-size: 12px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			position: absolute;
			bottom: 0px;
			width: 100%;

			>div {
				margin-left: 50%;
				transform: translateX(-40%);
				align-self: baseline;
				margin-bottom: 4px;
				display: flex;
				width: 50%;

				.ball {
					margin-top: 2px;
					width: 13px;
					height: 13px;
					border-radius: 50%;
					background-color: #07daf9;
					margin-right: 10px;
					align-items: baseline;
				}
			}
		}
	}

	.icon {
		font-size: .26rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: white;
		padding: .3rem .6rem 0rem;
		margin-top: .3rem;
		border-radius: .05rem;

		&-box {
			width: 35%;
			text-align: center;
			display: block;
			margin-bottom: .3rem;
			color: #333;

			a {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				&:link {
					color: #000;
				}

				.span {
					background-color: #00c4b8;
					width: 1.8rem;
					height: 1.8rem;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 1rem;
						height: 1rem;
					}


				}

				p {
					margin-top: 4px;
				}
			}


		}
	}
}
</style>
