<template>
	<div class="dashboard-editor-container" v-if="user=='1'">
		<el-row :gutter="40" class="panel-group">
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel" @click="handleSetLineChartData(0)">
					<div class="card-panel-icon-wrapper icon-people">
						<svg-icon icon-class="peoples" class-name="card-panel-icon" />
					</div>
					<div class="card-panel-description">
						<div class="card-panel-text">
							今日访客
						</div>
						<count-to :start-val="0" :end-val="endVal4" :duration="2600" class="card-panel-num" />
					</div>
				</div>
			</el-col>
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel" @click="handleSetLineChartData(1)">
					<div class="card-panel-icon-wrapper icon-money">
						<svg-icon icon-class="money" class-name="card-panel-icon" />
					</div>
					<div class="card-panel-description">
						<div class="card-panel-text">
							交易金额
						</div>
						<count-to :start-val="0" :end-val="endVal1" :duration="3200" class="card-panel-num" />
					</div>
				</div>
			</el-col>
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel" @click="handleSetLineChartData(2)">
					<div class="card-panel-icon-wrapper icon-money">
						<svg-icon icon-class="money" class-name="card-panel-icon" />
					</div>
					<div class="card-panel-description">
						<div class="card-panel-text">
							实收金额
						</div>
						<count-to :start-val="0" :end-val="endVal2" :duration="3200" class="card-panel-num" />
					</div>
				</div>
			</el-col>
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel" @click="handleSetLineChartData(3)">
					<div class="card-panel-icon-wrapper icon-money">
						<svg-icon icon-class="money" class-name="card-panel-icon" />
					</div>
					<div class="card-panel-description">
						<div class="card-panel-text">
							退款金额
						</div>
						<count-to :start-val="0" :end-val="endVal3" :duration="3200" class="card-panel-num" />
					</div>
				</div>
			</el-col>
		</el-row>

		<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
			<!-- <line-chart :chart-data="lineChartData" /> -->
			<div class="echart" id="mychart" :style="myChartStyle"></div>
		</el-row>

		<el-row :gutter="32">
			<!-- <el-col :xs="24" :sm="24" :lg="8">
				<div class="chart-wrapper">
					<raddar-chart />
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :lg="8">
				<div class="chart-wrapper">
					<pie-chart />
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :lg="8">
				<div class="chart-wrapper">
					<bar-chart />
				</div>
			</el-col> -->
		</el-row>


	</div>
</template>

<script>
	import {
		getInfo,
		getSysDeptInfo,
	} from "@/api/data/goodsPayment";
	import * as echarts from "echarts";
	import {
		statistics
	} from "@/api/index";
	// import PanelGroup from './dashboard/PanelGroup'
	import LineChart from './dashboard/LineChart'
	import RaddarChart from './dashboard/RaddarChart'
	import PieChart from './dashboard/PieChart'
	import BarChart from './dashboard/BarChart'
	import CountTo from 'vue-count-to'
	// import { forEach } from "core-js/library/core/dict";

	const lineChartData = {
		newVisitis: {
			expectedData: [], //今日
			actualData: [120, 82, 91, 154, 162, 140, 145] //昨日
		},
		messages: {
			expectedData: [200, 192, 120, 144, 160, 130, 140],
			actualData: [180, 160, 151, 106, 145, 150, 130]
		},
		purchases: {
			expectedData: [80, 100, 121, 104, 105, 90, 100],
			actualData: [120, 90, 100, 138, 142, 130, 130]
		},
		shoppings: {
			expectedData: [130, 140, 141, 142, 145, 150, 160],
			actualData: [120, 82, 91, 154, 162, 140, 130]
		}
	}

	export default {
		name: 'Index',
		components: {
			// PanelGroup,
			LineChart,
			RaddarChart,
			PieChart,
			BarChart,
			CountTo
		},
		data() {
			return {
				user:'',
				xData: [], //横坐标
				yData: [], //数据
				yData1: [], //数据
				yData2: [], //总数据
				myChartStyle: {
					float: "left",
					width: "100%",
					height: "400px",
				}, //图表样式
				endVal: 0,
				endVal1: 0,
				endVal2: 0,
				endVal3: 0,
				endVal4:0,
				endVal5:0,
				lineChartData: lineChartData.newVisitis,
				form: {
					statisticsType: '3',
				}
			}
		},
		created() {
			this.getusertInfo();
		},
		mounted() {
			this.handleSetLineChartData(0);
		},
		methods: {
			getusertInfo(){
				getInfo().then(res=>{
					// console.log(res.user.createBy)
					this.user=res.user.userId
				});
			},
			initEcharts() {
				// 基本柱状图
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					xAxis: {
						data: this.xData,
					},
					yAxis: {},
					series: [{
						name: '淘号玩',
						type: "bar", //形状为柱状图
						data: this.yData,
						color: '#3888fa',
						label: {
							// 柱状图上方文本标签，默认展示数值信息
							show: true,
							position: "top"
						},
						barWidth:70
					},
					{
						name: '代售玩',
						type: "bar", //形状为柱状图
						data: this.yData1,
						color: '#3888fa',
						label: {
							// 柱状图上方文本标签，默认展示数值信息
							show: true,
							position: "top"
						},
						barWidth:70
					},{
						name: '总访客',
						type: "line", //形状为柱状图
						data: this.yData2,
						color: '#3888fa',
						label: {
							// 柱状图上方文本标签，默认展示数值信息
							show: true,
							position: "top"
						},
						barWidth:70
					}],
				};
				const myChart = echarts.init(document.getElementById("mychart"));
				myChart.setOption(option);
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			handleSetLineChartData(type) {
				this.yData=[]
				this.yData1=[]
				this.yData2=[]
				this.xData=[]
				let query = {
					statisticsType: '3',
				}
				statistics(query).then(res => {
					this.endVal = res.data.statistics[0].sum;
					let data=res.data.statistics.slice(0,2)
					data.forEach(res=>{
						if(res.channel=='taohaowan'){
							this.endVal = res.sum;
						}
						if(res.channel=='daishouwan'){
							this.endVal1 = res.sum;
						}
						this.endVal4 = Number(this.endVal)+Number(this.endVal1)
					})
					this.endVal1 = res.data.orderInfo[0].totalPrice;
					this.endVal2 = res.data.orderInfo[0].paidAmount;
					this.endVal3 = res.data.orderInfo[0].refundAmt;
					if (type==0) {
						res.data.statistics.forEach((item) => {
							if(item.channel=='taohaowan'){
								this.yData.push(item.sum);
							}
							if(item.channel=='daishouwan'){
								this.yData1.push(item.sum);
							}
							this.xData.push(item.createTime.slice(0, 10));
							this.xData=[...new Set(this.xData)];
						});
						this.yData.forEach((item,index)=>{
							this.yData2.push(Number(this.yData[index])+Number(this.yData1[index]))
						})
					} else if(type==1){
						res.data.orderInfo.forEach((item) => {
							this.yData.push(item.totalPrice);
							this.xData.push(item.createDate.slice(0, 10));
						});
					}else if(type==2){
						res.data.orderInfo.forEach((item) => {
							this.yData.push(item.paidAmount);
							this.xData.push(item.createDate.slice(0, 10));
						});
					}else if(type==3){
						res.data.orderInfo.forEach((item) => {
							this.yData.push(item.refundAmt);
							this.xData.push(item.createDate.slice(0, 10));
						});
					}
					this.initEcharts();
				})
				// this.lineChartData = lineChartData[type]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.panel-group {
		margin-top: 18px;

		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			height: 108px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
			border-color: rgba(0, 0, 0, .05);

			&:hover {
				.card-panel-icon-wrapper {
					color: #fff;
				}

				.icon-people {
					background: #40c9c6;
				}

				.icon-message {
					background: #36a3f7;
				}

				.icon-money {
					background: #f4516c;
				}

				.icon-shopping {
					background: #34bfa3
				}
			}

			.icon-people {
				color: #40c9c6;
			}

			.icon-message {
				color: #36a3f7;
			}

			.icon-money {
				color: #f4516c;
			}

			.icon-shopping {
				color: #34bfa3
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 14px 0 0 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: right;
				font-weight: bold;
				margin: 26px;
				margin-left: 0px;

				.card-panel-text {
					line-height: 18px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 16px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					font-size: 20px;
				}
			}
		}
	}

	.dashboard-editor-container {
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
		}
	}

	@media (max-width:1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}
</style>