<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
			<el-form-item label="报表类型" prop="reportsType">
				<el-select style="width: 100%" v-model="queryParams.reportsType" placeholder="请选择报表类型">
					<el-option v-for="item in bboptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="" prop="reportsType">
				<el-radio-group v-model="radio">
					<el-radio :label="3">日</el-radio>
					<el-radio :label="2">月</el-radio>
					<el-radio :label="1">年</el-radio>
					<!-- <el-radio :label="0">全部</el-radio> -->
				</el-radio-group>
			</el-form-item>
			<el-form-item style="margin-left: 100px;">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
				</el-button>
				<el-button style="margin-left: 20px;" icon="el-icon-refresh" size="mini" @click="resetQuery">恢复
				</el-button>
			</el-form-item>
		</el-form>
		<div style="display: flex;margin-top: 50px;">
			<div ref="chart6" style="width: 50%;height: 400px;"></div>
			<div ref="chart7" style="width: 50%;height: 400px;"></div>
		</div>
		<div style="display: flex;margin-top: 50px;">
			<div ref="chart3" style="width: 50%;height: 400px;"></div>
			<div ref="chart2" style="width: 50%; height: 400px;margin-left: 100px;"></div>
		</div>
		<div style="display: flex;margin-top: 50px;">
			<div ref="chart5" style="width: 100%;height: 400px;margin-left: 100px;"></div>
		</div>
	</div>
</template>

<script>
	import {
		statisticalReportsList
	} from "@/api/data/reportForms";
	import {
		queryTBusShop,
		getTBusShopInfo,
	} from "@/api/data/goodsPayment";
	import Cookies from 'js-cookie';
	export default {

		data() {
			return {
				disabled: false,
				deptOptions: [],
				radio: 3,
				queryParams: {
					reportsType: 'A',
					acquireDate: this.$moment().format("YYYY-MM-DD"),
					shopId: '',
				},
				chartPie: '',
				typeName: [], //帖子类型名称
				typeNum: [], //帖子类型数量
				chartData: {
					// 这里是你要绘制的饼图数据
				},
				//报表类型
				bboptions: [{
					value: 'A',
					label: '收号报表'
				}, ],
				//柱状图数据
				option: {
					title: {
						text: '收号数据',
						subtext: 'Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					toolbox: {
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLabel: { //展示角度
							rotate: 60
						},
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
						type: 'value',
						interval: 10000,
						axisLabel: {
							formatter: '{value}'
						},
					}, ],
					series: [{
						name: '金额',
						type: 'bar',
						data: []
					}, ]
				},
				//饼图
				option6: {
					title: {
						text: '号商数据',
						subtext: 'Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: '50%',
						data: [],
						left: '20%',
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				//饼图
				option7: {
					title: {
						text: '号商数据',
						subtext: 'Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: '50%',
						data: [],
						left: '20%',
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				//柱状图数据2
				option2: {
					title: {
						text: '账号来源',
						subtext: 'Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					toolbox: {
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category',
						// 书写格式
						axisLabel: {
							formatter: val => {
								let txt = val
								if (val.length > 3) {
									txt = val.substr(0, 3) + '...'
								}
								return txt
							}
						}
					}],
					yAxis: [{
						type: 'value',
						interval: 1000,
						axisLabel: {
							formatter: '{value}',
						},
					}, ],
					series: [{
						name: '金额',
						type: 'bar',
						data: [],
					}, ]
				},
				//饼图
				option1: {
					title: {
						text: '',
						subtext: 'Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '游戏种类',
						type: 'pie',
						radius: '50%',
						data: [],
						left: '20%',
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				//饼图1
				option3: {
					title: {
						text: '',
						subtext: 'Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '账号来源',
						type: 'pie',
						radius: '50%',
						data: [],
						left: '20%',
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				myChart: {},
				zsDate: this.$moment().format("MM-DD"),
				shopList: [],
			}
		},
		created() {
			this.user();
		},
		mounted() {
			//饼状图点击事件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: {
			user() {
				getTBusShopInfo().then(res => {
					if (res.data) {
						this.queryParams.shopId = res.data.id;
					} else {
						this.disabled = true;
					}
					this.getList();
				})
				queryTBusShop().then(response => {
					response.data.forEach((item) => {
						this.deptOptions.push({
							label: item.name,
							value: item.id,
						});
					});
				});
				return this.deptOptions;
			},
			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();
					});
				})
			},
			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">
	.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>