<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 style="width: 150px" prop="reportsType">
					<el-select filterable clearable v-model="xsqueryParams.mainIndustry" placeholder="类型">
						<el-option v-for="item in MIOptions" :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" value-format="yyyy-MM-dd" 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="handleQuerybr">本日
					</el-button>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryzr">昨日
					</el-button>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryby">本月
					</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 style="color: red;">
							(不包括退款)
						</span> </span>
					</div>
					<div class="left-top-right">
						<div class="left-top-right-top">
							<p>销量：<i>{{todaySlaesCount}}</i>单</p>
							<p>销售额：<i>{{todaySlaesPrice}}</i>元</p>
						</div>
						<div class="left-top-right-bottom">
							<p>成本：<i>{{todayOriginalPrice}}</i>元</p>
							<p>利润：<i>{{todayLirun}}</i>元</p>
						</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-container class="right-center">
				<el-card class="center-all" v-loading="loading" element-loading-text="拼命加载中"
					element-loading-background="#edf1f9" v-infinite-scroll="load" style="overflow:auto">
					<el-table :data="tableData" border show-summary style="width: 100%;background-color:#edf1f9;">
						<el-table-column prop="shop_name" label="商家" width="100">
						</el-table-column>
						<el-table-column prop="count" label="数量" width="80">
						</el-table-column>
						<el-table-column prop="sales_price" label="销售额" width="100">
						</el-table-column>
						<el-table-column prop="original_price" label="成本价" width="100">
						</el-table-column>
						<el-table-column prop="platform_Profit" label="手续费" width="100">
						</el-table-column>
						<el-table-column prop="lirun" label="利润" width="100">
						</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>
				</el-container>
			</div>
		</div>

	</div>
</template>

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

		data() {
			return {
				todaySlaesCount: 0,
				todaySlaesPrice: 0,
				todayOriginalPrice:0,
				todayLirun:0,
				xsqueryParams: {
					pageNum: 1,
					pageSize: 50,
					type: 'D',
					shopId: '',
					details: '0',
					gameName: '',
					beginTime: this.$moment().format("YYYY-MM-DD"),
					endTime: this.$moment().format("YYYY-MM-DD"),
				},
				loading: true,
				loading1: true,
				loading2: true,
				value1: [],
				disabled: false,
				deptOptions: [],
				MIOptions: [{
					value: 'account_source_0',
					label: '自营本部'
				}, {
					value: 'account_source_1',
					label: '自营号商'
				}, {
					value: 'account_source_2',
					label: '外部号商'
				}, 
				],
				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'],
						axisLabel: { //展示角度
							rotate: 60
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}单'
						}
					},
					series: [
						{
							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: [],
						axisLabel: { //展示角度
							rotate: 60
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}元'
						}
					},
					series: [
						{
							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: {},
				count: 0,
			}
		},
		created() {
			this.channelList();
			this.value1[0]=this.xsqueryParams.beginTime
			this.value1[1]=this.xsqueryParams.endTime
			// 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.tableData=[];
				this.rxloption.xAxis.data = [];
				this.rxloption.series[0].data = [];
				this.rxeoption.xAxis.data = [];
				this.rxeoption.series[0].data = [];
				//查本月的
				quiryShopProfitStatistics(this.xsqueryParams).then(res => {
						this.loading = false;
						this.total = res.data.table.total;
						res.data.table.rows.forEach(res=>{
							if(res.lirun!='未知'){
								this.tableData.push(res)
							};
						});
						this.tableData=this.tableData.sort((a,b)=>{
							return b.count-a.count
						})
						let slList = res.data.table.rows;
						let rxl = 0;
						let rxe = 0;
						let lirun = 0;
						let cbj = 0;
						slList.forEach(res => {
							if(res.lirun!='未知'){
								this.rxeoption.xAxis.data.push(res.shop_name);
								this.rxeoption.series[0].data.push(Number(res.sales_price));
								this.rxloption.xAxis.data.push(res.shop_name);
								this.rxloption.series[0].data.push(Number(res.count));
								rxl += res.count;
								rxe += Number(res.sales_price);
								lirun += Number(res.lirun);
								cbj += Number(res.original_price);
							}
						})
						this.todayOriginalPrice=cbj
						this.todayLirun=lirun.toFixed(2)
						this.todaySlaesCount = rxl;
						this.todaySlaesPrice = rxe;
						this.cgzxtList();
				})

			},
			checkMonth(i) {
				if (i < 10) {
					i = "0" + i;
				}
				return i;
			},
			//分页
			channelList1() {
				quiryShopProfitStatistics(this.xsqueryParams).then(res => {
					this.total = res.data.table.total
					this.tableData = res.data.table.rows
				})
			},
			cgzxtList() {
				this.getEchartDatarxl();
				this.getEchartDatarxe();
			},
			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() {
				if(this.value1!=null){
					this.xsqueryParams.beginTime = this.value1[0]
					this.xsqueryParams.endTime = this.value1[1]
				}else{
					this.xsqueryParams.beginTime = ''
					this.xsqueryParams.endTime = ''
				}
				this.channelList();
			},
			//搜索
			handleQuerybr() {
				this.value1=[];
				this.value1[0]=this.$moment().format("YYYY-MM-DD");
				this.value1[1]=this.$moment().format("YYYY-MM-DD");
				this.xsqueryParams.beginTime=this.value1[0]
				this.xsqueryParams.endTime=this.value1[1]
				this.channelList();
			},
			//搜索
			handleQueryzr() {
				this.value1=[];
				this.value1[1]=this.$moment().subtract(1,'days').format("YYYY-MM-DD");
				this.value1[0]=this.$moment().subtract(1,'days').format("YYYY-MM-DD"); // 当前时间往前推 1天
				this.xsqueryParams.beginTime=this.value1[0]
				this.xsqueryParams.endTime=this.value1[1]
				this.channelList();
			},
			//搜索
			handleQueryby() {
				this.value1=[];
				this.value1[0]=this.$moment().format("YYYY-MM")+'-01';
				this.value1[1]=this.$moment().format("YYYY-MM-DD");
				this.xsqueryParams.beginTime=this.value1[0];
				this.xsqueryParams.endTime=this.value1[1];
				this.channelList();
			},
			//重置
			resetQuery() {
				this.queryParams.acquireDate = this.$moment().format("YYYY-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: 50%;

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

	.right {
		width: 29%;

		.right-center {
			width: 100%;
			height: 420px;
			margin: 10px 0;
			background-color: #edf1f9;
		}
	}

	.left {
		width: 45%;
		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;
				display: flex;
				justify-content: space-around;

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

					i {
						margin-right: 10px;
					}
				}

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

					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>