<template>
	<div class="app-container">
		<div class="top">
			<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
				<el-form-item style="width: 150px" prop="reportsType">
					<el-select v-model="queryParams.reportsType" placeholder="游戏">
						<el-option v-for="item in gameoptions" :key="item.id" :label="item.gameName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="width: 150px" prop="reportsType">
					<el-select v-model="queryParams.reportsType1" placeholder="销售渠道">
						<el-option v-for="item in dict.type.game_platform_mapping" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="width: 150px" prop="reportsType">
					<el-select v-model="queryParams.reportsType2" placeholder="部门">
						<el-option v-for="item in bmoptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="width: 150px" prop="reportsType">
					<el-select v-model="queryParams.reportsType3" placeholder="员工">
						<el-option v-for="item in ygoptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="reportsType">
					<el-date-picker style="70%" v-model="value1" type="daterange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
					</el-button>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">本日
					</el-button>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">本月
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content">
			<div class="left">
				<div class="left-top">
					<div class="left-top-left">
						<span>本日被售</span>
					</div>
					<div class="left-top-right">
						<div class="left-top-right-top">
							<i>10</i>单
						</div>
						<div class="left-top-right-bottom">
							<i>10000</i>元
						</div>
					</div>
				</div>
				<div class="left-top">
					<div class="left-top-left">
						<span>本月被售</span>
					</div>
					<div class="left-top-right">
						<div class="left-top-right-top">
							<i>100</i>单
						</div>
						<div class="left-top-right-bottom">
							<i>100000</i>元
						</div>
					</div>
				</div>
				<el-card class="left-center">
					<div ref="chartrxl" style="height: 300px;"></div>
				</el-card>
				<el-card class="left-bottom">
					<div ref="chartrxe" style="height: 300px;"></div>
				</el-card>
			</div>
			<div class="center">
				<el-card class="center-all" v-loading="loading" element-loading-text="拼命加载中"
					element-loading-background="#edf1f9">
					<el-table :data="tableData" show-summary style="width: 100%;background-color:#edf1f9;">
						<el-table-column prop="distribution_channel" label="渠道" width="180">
						</el-table-column>
						<el-table-column prop="count" label="数量" width="180">
						</el-table-column>
						<el-table-column prop="sales_price" label="金额">
						</el-table-column>
					</el-table>
					<pagination v-show="total>0" layout="prev, pager, next" :total="total"
						:page.sync="queryParamsSellList.pageNum" :limit.sync="queryParamsSellList.pageSize"
						@pagination="channelList" />
				</el-card>
			</div>
			<div class="right">
				<el-card class="right-center">
					<el-empty :image-size="140"></el-empty>
				</el-card>
				<el-card class="right-center">
					<el-empty :image-size="140"></el-empty>
				</el-card>
				<el-card class="right-center">
					<el-empty :image-size="140"></el-empty>
				</el-card>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		statisticalReportsList
	} from "@/api/data/sellingList";
	import {
		getInitGoodsManager
	} from "@/api/data/goods";
	import {
		getStatistics,
		queryTBusShop,
		getTBusShopInfo,
		getquiryChannelStatistics,
	} from "@/api/data/goodsPayment";
	import Cookies from 'js-cookie';
	export default {
		dicts: ['game_platform_mapping'],
		data() {
			return {
				tableData:[],
				total:0,
				queryParamsSellList:{
					// pageSize:1,
					// pageNum:10,
					shopId: '',
					type: 'D',
					beginTime: '2024-05-19', // 当前时间往前推 3 天
					endTime: '2024-05-22', // 获取当前日期,
					details: '0',
					gameName: '',
				},
				gameList: [],
				loading: true,
				value1: '',
				disabled: false,
				deptOptions: [],
				radio: 3,
				queryParams: {
					reportsType: '',
					acquireDate: this.$moment().format("YYYY-MM-DD"),
					shopId: '',
				},
				chartPie: '',
				typeName: [], //帖子类型名称
				typeNum: [], //帖子类型数量
				chartData: {
					// 这里是你要绘制的饼图数据
				},
				//游戏类型
				gameoptions: [],
				//销售渠道
				xsoptions: [{
					value: 'A',
					label: '盼之'
				}, {
					value: 'B',
					label: '螃蟹'
				}, ],
				//部门
				bmoptions: [{
					value: 'A',
					label: '测试'
				}, {
					value: 'B',
					label: '研发'
				}, ],
				//员工
				ygoptions: [{
					value: 'A',
					label: '张三'
				}, {
					value: 'B',
					label: '李四'
				}, ],
				//折线图-日销量
				rxloption: {
					title: {
						text: '日被销量对比'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {},
					toolbox: {
						show: true,
						feature: {
							dataZoom: {
								yAxisIndex: 'none'
							},
							dataView: {
								readOnly: false
							},
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}单'
						}
					},
					series: [{
							name: '上月',
							type: 'line',
							data: [10, 11, 13, 11, 12, 12, 9],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: '本月',
							type: 'line',
							data: [1, 2, 10, 5, 15, 2, 3],
							// markPoint: {
							// 	data: [{
							// 		name: '周最低',
							// 		value: -2,
							// 		xAxis: 1,
							// 		yAxis: -1.5
							// 	}]
							// },
							markLine: {
								data: [{
										type: 'average',
										name: 'Avg'
									},
									[{
											symbol: 'none',
											x: '90%',
											yAxis: 'max'
										},
										{
											symbol: 'circle',
											label: {
												position: 'start',
												formatter: 'Max'
											},
											type: 'max',
											name: '最高点'
										}
									]
								]
							}
						}
					]
				},
				//折线图-日销额
				rxeoption: {
					title: {
						text: '月被销额对比'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {},
					toolbox: {
						show: true,
						feature: {
							dataZoom: {
								yAxisIndex: 'none'
							},
							dataView: {
								readOnly: false
							},
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}元'
						}
					},
					series: [{
							name: '上月',
							type: 'line',
							data: [10000, 9000, 9500, 8000, 11000, 12000, 7500],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: '本月',
							type: 'line',
							data: [7500, 11000, 8000, 9000, 9500, 10000, 7500],
							// markPoint: {
							//   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
							// },
							markLine: {
								data: [{
										type: 'average',
										name: 'Avg'
									},
									[{
											symbol: 'none',
											x: '90%',
											yAxis: 'max'
										},
										{
											symbol: 'circle',
											label: {
												position: 'start',
												formatter: 'Max'
											},
											type: 'max',
											name: '最高点'
										}
									]
								]
							}
						}
					]
				},
				myChart: {},
				zsDate: this.$moment().format("MM-DD"),
				shopList: [],
			}
		},
		created() {
			this.channelList();
			this.initGoodsManager();
		},
		mounted() {
			this.getEchartDatarxl();
			this.getEchartDatarxe();
			//饼状图点击事件1
			this.$echarts.init(this.$refs.chart3).on('click', (param) => { //这里使用箭头函数代替function，this指向VueComponent
				if (this.queryParams.statisticalType == 'M') {
					let data = this.$moment().format("YYYY") + '-' + param.name + '-01';
					this.zsDate = this.$moment().format("YYYY") + '-' + param.name;
					this.queryParams.acquireDate = data;
					this.getList();
				}
				if (this.queryParams.statisticalType == 'D') {
					let data = this.$moment().format("YYYY") + '-' + param.name;
					this.zsDate = param.name;
					this.queryParams.acquireDate = data;
					this.getList();
				}
				if (this.queryParams.statisticalType == 'Y') {
					this.queryParams.acquireDate = param.name + '-01-01'
					this.zsDate = param.name;
					this.getList();
				}
			});
			//饼状图点击事件2
			this.$echarts.init(this.$refs.chart6).on('click', (param) => { //这里使用箭头函数代替function，this指向VueComponent
				this.queryParams.shopId = param.data.shopId
				this.getList();
			});
			//饼状图点击事件3
			this.$echarts.init(this.$refs.chart7).on('click', (param) => { //这里使用箭头函数代替function，this指向VueComponent
				this.queryParams.shopId = param.data.shopId
				this.getList();
			});
			//饼状图点击事件4
			this.$echarts.init(this.$refs.chart5).on('click', (param) => { //这里使用箭头函数代替function，this指向VueComponent
				this.queryParams.accountSource = param.data.accountSource
				this.getList();
			});
		},
		methods: {
			initGoodsManager() {
				getInitGoodsManager().then(res => {
					this.gameoptions = res.gameList
				})
			},
			channelList(){
				getquiryChannelStatistics(this.queryParamsSellList).then(res=>{
					this.loading=false
					this.total=res.data.table.total
					this.tableData=res.data.table.rows
				})
			},
			
			getList() {
				this.option.xAxis[0].data = [];
				this.option2.xAxis[0].data = [];
				this.option.series[0].data = [];
				this.option1.series[0].data = [];
				this.option6.series[0].data = [];
				this.option7.series[0].data = [];
				this.option3.series[0].data = [];
				this.option2.series[0].data = [];
				if (this.radio == 1) {
					this.queryParams.statisticalType = 'Y'
				}
				if (this.radio == 2) {
					this.queryParams.statisticalType = 'M'
				}
				if (this.radio == 3) {
					this.queryParams.statisticalType = 'D'
				}
				// if (this.radio == 0) {
				// 	this.queryParams.statisticalType = 'X'
				// }
				statisticalReportsList(this.queryParams).then(res => {
					let zList = res.data.table0.rows
					let bList = res.data.table1.rows
					let z1List = res.data.table2.rows
					let z2List = res.data.table3.rows
					let z3List = res.data.table4.rows
					let b1List = res.data.table2.rows
					// if (this.queryParams.statisticalType == 'Y') {
					// 	this.zsDate=this.$moment().format("YYYY")
					// }
					// if (this.queryParams.statisticalType == 'M') {
					// 	this.zsDate=this.$moment().format("MM")
					// }
					// if (this.queryParams.statisticalType == 'D') {
					// 	this.zsDate=this.$moment().format("MM-DD")
					// }
					if (this.queryParams.statisticalType == 'Y') {
						zList.forEach(item => {
							this.option.xAxis[0].data.push(item.acquireDate.slice(0, 5));
							this.option.series[0].data.push(Number(item.acquirePrice));
						})
						this.option.yAxis[0].interval = 100000;

					} else if (this.queryParams.statisticalType == 'M') {
						zList.forEach(item => {
							this.option.xAxis[0].data.push(item.acquireDate.slice(5, 10));
							this.option.series[0].data.push(Number(item.acquirePrice));
						})
						this.option.yAxis[0].interval = 50000;
					} else {
						zList.forEach(item => {
							this.option.xAxis[0].data.push(item.acquireDate.slice(5, 10));
							this.option.series[0].data.push(Number(item.acquirePrice));
						})
						this.option.yAxis[0].interval = 10000;
					}
					if (this.queryParams.statisticalType == 'Y') {
						z1List.forEach(item => {
							this.option2.xAxis[0].data.push(item.accountSource);
							this.option2.series[0].data.push(Number(item.acquirePrice));
						})
						this.option2.yAxis[0].interval = 50000;
					} else {
						z1List.forEach(item => {
							this.option2.xAxis[0].data.push(item.accountSource);
							this.option2.series[0].data.push(Number(item.acquirePrice));
						})
					}
					let bList3 = []
					let number3 = 0
					z2List.forEach(item => {
						let query1 = {
							value: '',
							name: '',
							shopId: '',
						}
						query1.value = Number(item.acquirePrice);
						query1.shopId = item.shopId;
						query1.name = item.shopName + '(数量:' + item.gameNumber + ')';
						number3 += Number(item.gameNumber)
						bList3.push(query1)
					})
					this.option6.series[0].data = bList3
					this.option6.title.text = '号商数据' + '(' + number3 + ')'
					let bList4 = []
					let number4 = 0
					z3List.forEach(item => {
						let query1 = {
							value: '',
							name: '',
							shopId: '',
						}
						query1.value = Number(item.acquirePrice);
						query1.shopId = item.shopId;
						query1.name = item.shopName + '(数量:' + item.gameNumber + ')';
						number4 += Number(item.gameNumber)
						bList4.push(query1)
					})
					this.option7.series[0].data = bList4
					this.option7.title.text = this.zsDate + '号商数据' + '(' + number4 + ')'
					let bList1 = []
					let number = 0
					bList.forEach(item => {
						let query = {
							value: '',
							name: ''
						}
						query.value = Number(item.acquirePrice);
						query.name = item.gameName + '(数量:' + item.gameNumber + ')';
						number += Number(item.gameNumber)
						bList1.push(query)
					})
					this.option1.series[0].data = bList1
					this.option1.title.text = this.zsDate + '游戏种类' + '(' + number + ')'
					let bList2 = []
					let number1 = 0
					b1List.forEach(item => {
						let query = {
							value: '',
							name: '',
							accountSource: ''
						}
						query.accountSource = item.accountSource;
						query.value = Number(item.acquirePrice);
						query.name = item.accountSource + '(数量:' + item.gameNumber + ')';
						number1 += Number(item.gameNumber)
						bList2.push(query)
					})
					this.option3.series[0].data = bList2
					this.option3.title.text = this.zsDate + '账号来源' + '(' + number1 + ')'
					this.getEchartData2();
					this.getEchartData3();
					this.getEchartData4();
					this.getEchartData5();
					this.getEchartData6();
					this.getEchartData7();
				})
			},
			//搜索
			handleQuery() {
				this.getList();
			},
			//重置
			resetQuery() {
				this.queryParams.acquireDate = this.$moment().format("YYYY-MM-DD");
				this.zsDate = this.$moment().format("MM-DD");
				this.queryParams.reportsType = 'A';
				this.radio = 3
				this.queryParams.shopId = '';
				this.getList();
			},
			getEchartData2() {
				const chart1 = this.$refs.chart3
				if (chart1) {
					this.myChart = this.$echarts.init(chart1)
					const myChart = this.$echarts.init(chart1)
					myChart.setOption(this.option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartData6() {
				const chart1 = this.$refs.chart6
				if (chart1) {
					const myChart = this.$echarts.init(chart1)
					myChart.setOption(this.option6)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartDatarxl() {
				const chart = this.$refs.chartrxl
				if (chart) {
					const myChart = this.$echarts.init(chart)
					myChart.setOption(this.rxloption)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
			},
			getEchartDatarxe() {
				const chart = this.$refs.chartrxe
				if (chart) {
					const myChart = this.$echarts.init(chart)
					myChart.setOption(this.rxeoption)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
			},
			getEchartData7() {
				const chart1 = this.$refs.chart7
				if (chart1) {
					const myChart = this.$echarts.init(chart1)
					myChart.setOption(this.option7)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartData4() {
				const chart1 = this.$refs.chart4
				if (chart1) {
					this.myChart = this.$echarts.init(chart1)
					const myChart = this.$echarts.init(chart1)
					myChart.setOption(this.option2)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartData3() {
				const chart1 = this.$refs.chart2
				if (chart1) {
					const myChart = this.$echarts.init(chart1)
					myChart.setOption(this.option1)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartData5() {
				const chart1 = this.$refs.chart5
				if (chart1) {
					const myChart = this.$echarts.init(chart1)
					myChart.setOption(this.option3)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	.app-container {
		background-color: #edf1f9;
	}

	.content {
		display: flex;
		justify-content: space-between;
	}

	.center {
		width: 34%;

		.center-all {
			height: 870px;
			background-color: #edf1f9;
		}
	}
	.el-table__body{
		background-color: #edf1f9;
	}

	.right {
		width: 25%;

		.right-center {
			height: 280px;
			margin: 10px 0;
			background-color: #edf1f9;
		}
	}

	.left {
		width: 40%;
		background-color: #edf1f9;

		.left-top {
			width: 90%;
			margin: 20px auto;
			height: 60px;
			background-color: #edf1f9;
			box-shadow: 3px 3px #d7e4fc;
			border-radius: 15px;
			display: flex;
			justify-content: space-between;

			.left-top-left {
				width: 40%;
				border-radius: 15px;
				background-color: #d5e5fe;
				height: 60px;
				line-height: 60px;
				text-align: center;
			}

			.left-top-right {
				width: 55%;
				height: 60px;

				.left-top-right-top {
					height: 30px;
					line-height: 30px;

					i {
						margin-right: 10px;
					}
				}

				.left-top-right-bottom {
					height: 30px;
					line-height: 30px;

					i {
						margin-right: 10px;
					}
				}
			}
		}

		.left-center {
			margin: 10px 0;
			background-color: #edf1f9;
		}

		.left-bottom {
			margin: 10px 0;
			background-color: #edf1f9;
		}
	}

	.father {
		height: 80px;
		line-height: 80px;
		font-size: 25px;
		display: flex;
		justify-content: space-around;
	}

	.el-icon-loading {
		color: green;
		margin-right: 5px;
	}

	.el-icon-message-solid {
		color: green;
		margin-right: 5px;
	}

	.el-icon-check {
		color: green;
		margin-right: 5px;
	}

	.el-icon-coin {
		color: green;
		margin-right: 5px;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>