<template>
	<view class="container">
		<view class="handle-info-box">
			<view class="shell-money">￥{{shopSell}}</view>
			<view class="shell-text">本月销售额</view>
			<view class="handle-box">
				<view class="handle-button" @click="goToGoodList()">
					<view class="iconfont iconzuo"></view>
					<view class="handle-text">商品管理</view>
				</view>
				<view class="handle-button" @click.stop="goToOrderList()">
					<view class="handle-text">订单管理</view>
					<view class="iconfont iconyou"></view>
				</view>
			</view>
		</view>
		<view class="index-data-box">
			<view class="data-title">销售数量</view>
			<view class="data-type">
				<view class="type-col" :class="chartType1 == item.code ? 'type-col-active' : ''" v-for="(item, index) in typeList"
				 @click="setType(item, 1)">{{item.label}}</view>
			</view>
			<view class="chart-box">
				<canvas canvas-id="chartBox1" id="chartBox1" class="chart-canvas" @touchstart="touchLine1"
				 @touchmove="moveLine1" @touchend="touchEndLine1" force-use-old-canvas="true"></canvas>
			</view>
		</view>
		<view class="index-data-box">
			<view class="data-title">销售金额</view>
			<view class="data-type">
				<view class="type-col" :class="chartType2 == item.code ? 'type-col-active' : ''" v-for="(item, index) in typeList"
				 @click="setType(item, 2)">{{item.label}}</view>
			</view>
			<view class="chart-box">
				<canvas canvas-id="chartBox2" id="chartBox2" class="chart-canvas" @touchstart="touchLine2"
				 @touchmove="moveLine2" @touchend="touchEndLine2" force-use-old-canvas="true"></canvas>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.min.js';
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	var _self;
	let chartBox1 = null;
	let chartBox2 = null;
	export default {
		data() {
			return {
				shopSell: 0,
				chartType1: 2,
				chartType2: 2,
				typeList: [{
						code: 1,
						label: '本周'
					},
					{
						code: 2,
						label: '本月'
					},
					{
						code: 3,
						label: '本年'
					},
				],
				cWidth: '',
				userData: {},
			}
		},
		onLoad() {
			if (!uni.getStorageSync('token') || uni.getStorageSync('userData').registerFlag != 1 || uni.getStorageSync('userData').auditState != 2) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
				return false
			}
			_self = this; // 浏览器调试时需要打开，微信调试时需关闭
			this.cWidth = uni.upx2px(750) - 30;
			this.setData(1, 'creat')
			this.setData(2, 'creat')
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")||{}
			this.getShopInfo()
		},
		onPullDownRefresh() {
			this.getShopInfo()
			this.setData(1, 'creat')
			this.setData(2, 'creat')
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},
		methods: {
			//  获取全部数据
			getShopInfo() {
				NET.request(API.getShopSellInfo, {}, 'POST').then(res => {
					this.shopSell = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  跳转商品管理
			goToGoodList() {
				if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '商品管理'))){
					this.$refs.uTips.show({
						title: '没有授权使用，请联系商户负责人',
						type: 'warning',
					})
					return;
				}

				uni.navigateTo({
					url: '/pagesGood/goodList'
				});
			},
			//  跳转商品管理
			goToOrderList() {
				if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '订单管理'))){
					this.$refs.uTips.show({
						title: '没有授权使用，请联系商户负责人',
						type: 'warning',
					})
					return;
				}

				uni.navigateTo({
					url: '/pagesMain/orderList?type=1'
				});
			},
			//  过滤类型
			setType(item, type) {
				this['chartType' + type] = item.code
				this.setData(type, 'updata')
			},
			setData(type1, type2) {
				NET.request(API.getSellInfo + this['chartType' + type1], {}, 'GET').then(res => {
					let column = res.data.map(site => {
						return site.time
					})
					let data = res.data.map(site => {
						return type1 == 1 ? site.orderSum : site.no
					})
					if (type2 == 'creat') {
						this.creatChart(type1, column, data)
					} else if (type2 == 'updata') {
						let option = {
							categories: column,
							scrollPosition: 'left',
							series: [{
								name: "",
								color: "#52A63A",
								data: data
							}]
						}
						if (type1 == 1) {
							chartBox1.updateData(option)
						} else {
							chartBox2.updateData(option)
						}
					}
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取销售数据失败',
						type: 'warning',
					})
				})
			},
			//  创建图表
			creatChart(type, column, data) {
				let option = {
					$this: _self,
					canvasId: "chartBox" + type,
					type: 'column',
					width: this.cWidth,
					height: 200,
					padding: [20, 10, 10, 10],
					pixelRatio: 1,
					animation: true,
					background: '#FFFFFF',
					fontSize: 11,
					enableScroll: true,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						disableGrid: true,
						itemCount: 10,
						scrollShow: true,
						scrollAlign: 'left',
						scrollBackgroundColor: '#DEE7F7',
						scrollColor: '#52A63A',
					},
					yAxis: {},
					categories: column,
					legend: {
						show: false
					},
					series: [{
						name: "",
						color: "#52A63A",
						data: data
					}],
				}
				if (type == 1) {
					chartBox1 = new uCharts(option)
				} else {
					chartBox2 = new uCharts(option);
				}
			},
			//  图表1开始滚动
			touchLine1(e) {
				if (e) {
					chartBox1.scrollStart(e);
				}
			},
			//  图表1滚动
			moveLine1(e) {
				chartBox1.scroll(e);
			},
			//  图表1拖拽提示
			touchEndLine1(e) {
				if (e) {
					chartBox1.scrollEnd(e);
					chartBox1.showToolTip(e, {
						format: (item, category) => {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			//  图表2开始滚动
			touchLine2(e) {
				if (e) {
					chartBox2.scrollStart(e);
				}
			},
			//  图表2滚动
			moveLine2(e) {
				chartBox2.scroll(e);
			},
			//  图表2拖拽提示
			touchEndLine2(e) {
				if (e) {
					chartBox2.scrollEnd(e);
					chartBox2.showToolTip(e, {
						format: (item, category) => {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		// height: 100%;
		float: left;
		background-color: #f5f5f5;
		// overflow-y: auto;

		.handle-info-box {
			width: 100%;
			height: 220px;
			float: left;
			background-size: 100% 220px;
			background-position: center top;
			background-repeat: no-repeat;
			background-image: url('data:image/png;base64,[encoded data, 76048 characters]');

			.shell-money {
				width: 100%;
				height: 36px;
				float: left;
				font-size: 36px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 36px;
				text-align: center;
				margin-top: 36px;
			}

			.shell-text {
				width: 100%;
				height: 16px;
				float: left;
				font-size: 14px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 16px;
				text-align: center;
				margin-top: 6px;
			}

			.handle-box {
				width: 208px;
				height: 34px;
				float: left;
				left: 50%;
				transform: translateX(-50%);
				position: relative;
				background: #FFFFFF;
				border-radius: 17px;
				margin-top: 12px;

				.handle-button {
					width: 50%;
					height: 34px;
					float: left;
					box-sizing: border-box;

					.handle-text {
						width: calc(100% - 28px);
						height: 34px;
						float: left;
						font-size: 16px;
						font-family: PingFang SC;
						color: #52A63A;
						line-height: 34px;
						text-align: center;
						box-sizing: border-box;
					}

					.handle-text:last-child {
						padding-right: 4px;
					}

					.handle-text:first-child {
						padding-left: 4px;
					}

					.iconfont {
						float: left;
						width: 28px;
						font-size: 24px;
						color: #52A63A;
						line-height: 34px;
						text-align: center;
					}
				}

				.handle-button:first-child {
					border-right: 1px solid #52A63A;
				}

				.handle-button:last-child {
					border-left: 1px solid #52A63A;
				}
			}
		}

		.index-data-box {
			width: calc(100% - 30px);
			float: left;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 0 15px 10px 15px;

			.data-title {
				width: calc(100% - 30px);
				height: 36px;
				float: left;
				font-size: 15px;
				font-family: PingFang SC;
				color: #222222;
				line-height: 36px;
				margin: 0 15px;
			}

			.data-type {
				width: calc(100% - 30px);
				height: 30px;
				float: left;
				background: #F5F8FC;
				margin: 4px 15px;
				display: flex;
				justify-content: space-between;

				.type-col {
					width: 33%;
					height: 30px;
					font-size: 13px;
					font-family: PingFang SC;
					color: #222222;
					line-height: 30px;
					text-align: center;
				}

				.type-col-active {
					color: #52A63A;
				}
			}

			.chart-box {
				width: 100%;
				height: 200px;
				float: left;

				.chart-canvas {
					width: 100% !important;
					height: 200px !important;
					float: left;
				}
			}
		}
	}
</style>
