<template>
	<div>
		<div class="content">
			<div class="sm">
				<van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />
				<img @click="wxScanCode()" src="@/assets/user/u4.png" alt="">
			</div>
			<!-- 显示 -->
			<div class="echarts1">
				<div id="myChart1"></div>
				<div id="myChart2"></div>
			</div>
			<!-- 图标 -->
			<div class="icon">
				<div class="icon-box">
					<router-link to="storage">
						<div style="">
							<img src="@/assets/user/u32.png" alt="">
						</div>
						<p>快件入库</p>
					</router-link>
				</div>
				<div class="icon-box">
					<router-link to="Removal">
						<div style="">
							<img src="@/assets/user/u35.png" alt="">
						</div>
						<p>快件出库</p>
					</router-link>
				</div>
				<div class="icon-box">
					<router-link to="Box">
						<div style="">
							<img src="@/assets/user/u38.png" alt="">
						</div>
						<p>派件查询</p>
					</router-link>
				</div>
				<div class="icon-box">
					<router-link to="Kjsearch">
						<div style="">
							<img src="@/assets/user/u41.png" alt="">
						</div>
						<p>派件签收</p>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	Toast,
	Dialog
} from 'vant'
// vue 专用版本JS-SDK
import wx from "weixin-jsapi";
export default {
	data() {
		return {
			active: 0,
			value: "",
			index: 1,
			total: 0,
			expressMap: {}, //收件
			mailMap: {} //寄件
		}
	},
	created: function () {
		//this.getOpenid("");
		this.isLogin();
		this.getData()
	},
	mounted() {
		// 页面加载完成唤醒微信扫一扫
		//本地 注释  服务器 放开
		this.wxScanCode();

		let myChart = this.$echarts.init(document.getElementById('myChart1'))
		var option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '65%',
				left: '30%',
				orient: 'vertical',
				icon: 'circle',
				itemGap: 6,
				textStyle: {
					fontSize: 10,
				}

			},
			series: [{
				name: '数据',
				type: 'pie',
				center: ["50%", "35%"],
				radius: ['40%', '60%'],
				avoidLabelOverlap: false,
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{active|' + '今日累计收件' + '}' + '\n\r' + '{total|' + this.total +
							'}',
						rich: {
							total: {
								fontSize: 12,
								fontWeight: 'bold',
								color: '#454c5c'
							},
							active: {
								fontSize: 10,
								color: '#6c7a89',
								lineHeight: 30,
							},
						}
					},
					emphasis: { //中间文字显示
						show: true,
					}
				},
				color: ['#02a7f0', '#bfbf00', '#d7d7d7', '#079bf9'],
				labelLine: {
					show: false
				},
				data: [{
					value: 123,
					name: '签收成功'
				},
				{
					value: 444,
					name: '派送中'
				},
				{
					value: 222,
					name: '派送失败'
				},
				]
			}]
		}
		myChart.setOption(option)

		let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
		var option2 = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '65%',
				left: '30%',
				orient: 'vertical',
				icon: 'circle',
				itemGap: 6,
				textStyle: {
					fontSize: 10,
				}

			},
			series: [{
				name: '数据',
				type: 'pie',
				center: ["50%", "35%"],
				radius: ['40%', '60%'],
				avoidLabelOverlap: false,
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{active|' + '今日累计下单' + '}' + '\n\r' + '{total|' + this.total +
							'}',
						rich: {
							total: {
								fontSize: 12,
								fontWeight: 'bold',
								color: '#454c5c'
							},
							active: {
								fontSize: 10,
								color: '#6c7a89',
								lineHeight: 30,
							},
						}
					},
					emphasis: { //中间文字显示
						show: true,
					}
				},
				color: ['#02a7f0', '#bfbf00', '#d7d7d7', '#079bf9'],
				labelLine: {
					show: false
				},
				data: [{
					value: 123,
					name: '揽收成功'
				},
				{
					value: 444,
					name: '待揽收'
				},
				{
					value: 222,
					name: '未揽收'
				},
				]
			}]
		}
		myChart2.setOption(option2)

	},
	methods: {//encodeURI(window.location.href.split('#')[0])
		wxScanCode() {
			let purl = /(Android)/i.test(navigator.userAgent) ? window.location.href.split('#')[0] : encodeURI(window.location.href.split('#')[0]);
			let dataForm = {
				'url': purl
			}
			//alert(url)
			this.$http.post(this.$store.state.host + "/weixin/getWxConfig", {
				url: window.location.href.split('#')[0]
			}, {
				emulateJSON: true
			})
				.then(res => {
					//发送成功
					var timestamp = res.body.wxConfig.timestamp;
					var noncestr = res.body.wxConfig.nonceStr;
					var signature = res.body.wxConfig.signature;
					var appId = res.body.wxConfig.appId;
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						// debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: appId, // 必填，公众号的唯一标识
						timestamp: timestamp, // 必填，生成签名的时间戳
						nonceStr: noncestr, // 必填，生成签名的随机串
						signature: signature, // 必填，签名，见附录1
						jsApiList: [
							"scanQRCode",
						] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					wx.ready(() => {
						wx.scanQRCode({
							needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
							scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
							success: (res) => {
								//alert(res)
								var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
								if (result.indexOf(",") != -1) {
									let result1 = res.resultStr.split(",");
									result = result1[result1.length - 1];
								}
								this.onSearch(result)
							},
							error: function (res) {
								console.log(res);
							}
						});

					});
				}, res => {
					//发送失败
					Toast("网络错误!")
				})

		},
		sys() {

		},
		//打印面单
		print() {
			Toast('该功能正在开发中，敬请期待！');
		},
		//单号搜索
		onSearch(val) {
			this.$router.push({
				path: '/Sysearch',
				query: {
					expressNo: val,
					searchType: "1" //1.搜索全部 2.搜索快件 3.搜索寄件
				}
			})
		},
		//后端获取数据
		getData() {
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			});

			this.$http.post(this.$store.state.host + "/solic/solicHomePage.do", {
				mailRoomId: localStorage.getItem('roomId')
			}, {
				emulateJSON: true
			})
				.then(res => {
					//发送成功
					if (res.body.msg == 'success') {
						this.expressMap = res.body.expressMap
						this.data[0].value = this.expressMap.successNum
						this.data[1].value = this.expressMap.waitNum
						this.data[2].value = this.expressMap.problemNum
						this.mailMap = res.body.mailMap
						console.log(this.mailMap, '=======================mailMap')
						console.log(this.expressMap, '=======================expressMap')
						//this.echart1(this.data)
					}
				}, res => {
					//发送失败
					Toast("网络错误!")
				})
			Toast.clear()
		},

		echart1(obj) {
			console.log("图表数据：" + JSON.stringify(obj))

		},

	},

}
</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 {
		width: 100%;
		height: 4.2rem;
		background: white;
		display: flex;

		div {
			// width: 100%;
			// height: 100%;
			width: 169px;
			height: 200px;
			// margin: 0 auto;
		}
	}

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

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

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

				div {
					background-color: #169bd5;
					width: 2rem;
					height: 2rem;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

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


		}
	}
}
</style>
