<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 filterable clearable v-model="xsqueryParams.gameId" 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  filterable clearable v-model="xsqueryParams.shopId" placeholder="店铺">
						<el-option v-for="item in deptOptions" :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>{{todaySlaesCount}}</i>单
						</div>
						<div class="left-top-right-bottom">
							<i>{{todaySlaesPrice}}</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" border show-summary style="width: 100%;background-color:#edf1f9;">
						<el-table-column prop="acquireDate" label="回收日期" width="100">
							<template slot-scope="scope">
								<span>{{scope.row.acquireDate.slice(5,10)}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="gameNumber" label="数量" width="80">
						</el-table-column>
						<el-table-column prop="acquirePrice" label="金额" width="100">
						</el-table-column>
						<el-table-column label="操作" width="100">
							<template slot-scope="scope">
								<el-button size="small" type="primary" @click="handleDetailsYxtj(scope.row)">明细
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="total>0" layout="prev, pager, next" :total="total"
						:page.sync="xsqueryParams.pageNum" :limit.sync="xsqueryParams.pageSize"
						@pagination="channelList1" />
				</el-card>
			</div>
			<div class="right">
				<el-container class="right-center">
					<el-card v-loading="loading1" class="infinite-list" v-infinite-scroll="load" style="overflow:auto" element-loading-text="拼命加载中" element-loading-background="#edf1f9">
						<el-table :data="tableData1" border show-summary style="width: 100%;background-color:#edf1f9;">
							<el-table-column prop="create_time" label="日期" width="100">
							</el-table-column>
							<el-table-column prop="gameNumber" label="数量" width="50">
							</el-table-column>
							<el-table-column prop="gameName" label="游戏" width="80">
							</el-table-column>
							<el-table-column prop="acquirePrice" label="金额" width="80">
							</el-table-column>
							<el-table-column label="操作" width="80">
								<template slot-scope="scope">
									<el-button size="small" type="primary" @click="handleDetailsGameName(scope.row)">明细
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<pagination v-show="total1>0" :total="total1" layout="prev, pager, next" :page.sync="xsqueryParams.pageNum"
							:limit.sync="xsqueryParams.pageSize" @pagination="channelList2" />
					</el-card>
				</el-container>
				<el-container class="right-center">
					<el-card v-loading="loading2" class="infinite-list" v-infinite-scroll="load" style="overflow:auto" element-loading-text="拼命加载中" element-loading-background="#edf1f9">
						<el-table :data="tableData2" show-summary :summary-method="getSummaries" border style="width: 100%;background-color:#edf1f9;">
							<el-table-column prop="create_time" label="日期" width="100">
							</el-table-column>
							<el-table-column prop="accountSource" label="来源" width="50">
							</el-table-column>
							<el-table-column prop="gameNumber" label="数量" width="80">
							</el-table-column>
							<el-table-column prop="offerPrice" label="出售金额" width="80">
							</el-table-column>
							<el-table-column prop="acquirePrice" label="回收金额" width="80">
							</el-table-column>
						</el-table>
						<pagination v-show="total2>0" :total="total2" layout="prev, pager, next" :page.sync="xsqueryParams.pageNum"
							:limit.sync="xsqueryParams.pageSize" @pagination="channelList3" />
					</el-card>
				</el-container>
			</div>
		</div>

	</div>
</template>

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

		data() {
			return {
				todaySlaesCount:0,
				todaySlaesPrice:0,
				xsqueryParams: {
					pageNum: 1,
					pageSize: 10,
					reportsType:'A',
					statisticalType: 'D',
					acquireDate:this.$moment().format("YYYY-MM-DD"),
					shopId: '',
					gameName: '',
					beginTime: '',
					endTime: '',
				},
				loading: true,
				loading1: true,
				loading2: 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: '李四'
				}, ],
				tableData: [],
				total: 0,
				tableData1: [],
				total1: 0,
				tableData2: [],
				total2: 0,
				//折线图-日销量
				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: [],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: '本月',
							type: 'line',
							data: [],
							// 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: []
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}元'
						}
					},
					series: [{
							name: '上月',
							type: 'line',
							data: [],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: '本月',
							type: 'line',
							data: [],
							// 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: [],
				 count: 0,
			}
		},
		created() {
			this.channelList();
			this.initGoodsManager();
		},
		mounted() {
			
		},
		methods: {
			load() {
				this.count += 2
			},
			// 合计 指定某一列添加合计
			
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = "合计";
						return;
					} else if (column.property == "sales_price" || column.property == 'count') {
						//如果是经费（正常的加减法）
						const values = data.map((item) => Number(item[column.property]));
						if (!values.every((value) => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								var sum = 0;
								if (!isNaN(value)) {
									sum = Number(Number(prev) + Number(curr));
									return sum;
								} else {
									return prev;
								}
							}, 0);
							sums[index] += " ";
						}
					}
				});
				return sums;
			},
			getTimeList() {
				let timeList2 = [];
				for (let i = 0; i < 12; i++) {
					timeList2.push(this.$moment().subtract(i, 'months').format("YYYY-MM"))
				}
			},
			initGoodsManager() {
				getInitGoodsManager().then(res => {
					this.gameoptions = res.gameList
				})
				queryTBusShop().then(response => {
					response.data.forEach((item) => {
						this.deptOptions.push({
							label: item.name,
							value: item.id,
						});
					});
				});
			},
			channelList() {
				this.rxloption.xAxis.data = [];
				this.rxloption.series[0].data = [];
				this.rxloption.series[1].data = [];
				//查本月的
				statisticalReportsList(this.xsqueryParams).then(res => {
					this.loading = false
					this.loading1 = false
					this.loading2 = false
					this.loading3 = false
					this.total = res.data.table0.total;
					this.tableData=res.data.table0.rows.sort(this.dateData('acquireDate',false));
					this.tableData1 = res.data.table1.rows
					this.tableData2 = res.data.table2.rows
					this.tableData3 = res.data.table3.rows
					let slList = res.data.table0.rows
					slList.forEach(res => {
						this.rxeoption.xAxis.data.push(res.acquireDate.slice(5, 10));
						this.rxeoption.series[1].data.push(Number(res.acquirePrice));
						this.rxloption.xAxis.data.push(res.acquireDate.slice(5, 10));
						this.rxloption.series[1].data.push(Number(res.gameNumber));
					})
					this.todaySlaesCount=slList[0].gameNumber;
					this.todaySlaesPrice=slList[0].acquirePrice;
					// this.getLastMchannelList();
					this.cgzxtList();
				})
				
			},
			//查上月的
			getLastMchannelList(){
				this.xsqueryParams.beginTime='2024-04-14'
				this.xsqueryParams.endTime='2024-04-23'
				getquiryStatisticsOver(this.xsqueryParams).then(res=>{
					let slList=res.data.table.rows
					slList.forEach(res=>{
						this.rxeoption.series[0].data.push(Number(res.sales_price));
						this.rxloption.series[0].data.push(Number(res.count));
					})
					this.cgzxtList();
				})
			},
			//分页
			channelList1() {
				getquiryStatistics(this.xsqueryParams).then(res => {
					this.total = res.data.table.total
					this.tableData = res.data.table.rows
				})
			},
			cgzxtList() {
				this.getEchartDatarxl();
				this.getEchartDatarxe();
			},
			//property是你需要排序传入的key,bol为true时是升序，false为降序
			dateData(property, bol) { 
			    return function(a, b) {
			        var value1 = a[property];
			        var value2 = b[property];
			        if (bol) {
			            // 升序
			            return Date.parse(value1) - Date.parse(value2);
			        } else {
			            // 降序
			            return Date.parse(value2) - Date.parse(value1)
			        }
			    }
			},
			handleDetailsYxtj(row) {
				this.xsqueryParams.createTime = row.create_time;
				this.xsqueryParams.details = '1';
				this.xsqueryParams.pageNum = 1;
				getquiryStatistics(this.xsqueryParams).then(res => {
					this.loading1 = false
					this.total1 = res.data.table.total
					this.tableData1 = res.data.table.rows
				})
			},
			handleDetailsGameName(row) {
				this.xsqueryParams.createTime = row.create_time;
				this.xsqueryParams.gameName = row.game_name;
				this.xsqueryParams.pageNum = 1;
				this.xsqueryParams.details = '2';
				getquiryStatistics(this.xsqueryParams).then(res => {
					this.loading2 = false
					this.total2 = res.data.table.total
					this.tableData2 = res.data.table.rows
				})
			},
			//搜索
			handleQuery() {
				this.channelList();
			},
			//重置
			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 = '';
			},
			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: 30%;

		.center-all {
			height: 860px;
		}
	}

	.right {
		width: 29%;

		.right-center {
			width:100%;
			height: 420px;
			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>