<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 clearable v-model="xsqueryParams.accountType" placeholder="账号状态">
						<el-option v-for="item in accountoptions" :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 clearable v-model="xsqueryParams.mainIndustry" 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 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" 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="handleQuerysy">上月对比
					</el-button> -->
				</el-form-item>
				<el-form-item label="" prop="reportsType">
					<el-radio-group @change="change" v-model="radio">
						<el-radio :label="1">店铺统计</el-radio>
						<el-radio :label="2">账号状态统计</el-radio>
						<el-radio :label="3">收号渠道统计</el-radio>
						<el-radio :label="4">游戏统计</el-radio>
					</el-radio-group>
				</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">
							<p>收号量：<i>{{todaySlaesCount}}</i>单</p>
							<p>收号金额：<i>{{todaySlaesPrice}}</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 v-if="shangjia" prop="shopName" align="center" label="商家" width="100">
							</el-table-column>
							<el-table-column v-if="zhuangtai" prop="accountType" align="center" label="状态" width="100">
							</el-table-column>
							<el-table-column v-if="qudao" prop="accountSource" align="center" label="渠道" width="100">
							</el-table-column>
							<el-table-column v-if="youxi" prop="gameName" align="center" label="游戏" width="100">
							</el-table-column>
							<el-table-column prop="counts" label="数量" align="center" width="80">
							</el-table-column>
							<el-table-column prop="acquirePrice" label="金额" align="center" width="100">
							</el-table-column>
							<el-table-column width="150px" v-if="radio==3" label="操作" fixed="right" align="center"
								class-name="small-padding fixed-width">
								<template slot-scope="scope">
									<el-button size="mini" type="text" @click="openBpmx(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="channelList" />
					</el-card>
					<el-card class="center-all" v-if="shangyue" v-loading="loading1" element-loading-text="拼命加载中"
						element-loading-background="#edf1f9" v-infinite-scroll="load" style="overflow:auto">
						<el-table :data="tableData1" border show-summary style="width: 100%;background-color:#edf1f9;">
							<el-table-column v-if="shangjia1" prop="shopName" label="商家" width="100">
							</el-table-column>
							<el-table-column v-if="zhuangtai1" prop="accountType" label="状态" width="100">
							</el-table-column>
							<el-table-column v-if="qudao1" prop="accountSource" label="渠道" width="100">
							</el-table-column>
							<el-table-column v-if="youxi1" prop="gameName" label="游戏" width="100">
							</el-table-column>
							<el-table-column prop="counts" label="数量" width="80">
							</el-table-column>
							<el-table-column prop="acquirePrice" label="金额" width="100">
							</el-table-column>
						</el-table>
						<pagination v-show="total1>0" layout="prev, pager, next" :total="total1"
							:page.sync="xsqueryParams.pageNum" :limit.sync="xsqueryParams.pageSize"
							@pagination="channelList1" />
					</el-card>
				</el-container>
				
			</div>
		</div>
		<!-- 添加手机号信息对话框 -->
		<el-dialog v-if="bpmx" title="渠道明细" :visible.sync="bpmx" append-to-body width="500px">
			<div>
				<el-table :data="tableData3" border show-summary>
					<el-table-column  prop="shopName" label="商家" >
					</el-table-column>
					<el-table-column  prop="accountSource" label="渠道" >
					</el-table-column>
					<el-table-column prop="counts" label="数量" >
					</el-table-column>
					<el-table-column prop="acquirePrice" label="金额" >
					</el-table-column>
				</el-table>
				<pagination v-show="total3>0" layout="prev, pager, next" :total="total3"
					:page.sync="xsqueryParams.pageNum" :limit.sync="xsqueryParams.pageSize"
					@pagination="openBpmx1" />
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
				<el-button @click="bpmx=false">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		accountMonitoring,
		detailed
	} from "@/api/data/numberLibraryReport";
	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: 150,
					statisticsType: 'A',
					shopId: '',
					beginTime: this.$moment().format("YYYY-MM") + '-01',
					endTime: this.$moment().format("YYYY-MM-DD"),
				},
				loading: true,
				loading1: true,
				shangyue:false,
				value1: [],
				disabled: false,
				deptOptions: [],
				MIOptions: [{
					value: 'A',
					label: '店铺统计'
				}, {
					value: 'B',
					label: '账号状态统计'
				}, ],
				radio: 1,
				queryParams: {
					reportsType: '',
					acquireDate: this.$moment().format("YYYY-MM-DD"),
					shopId: '',
				},
				chartPie: '',
				typeName: [], //帖子类型名称
				typeNum: [], //帖子类型数量
				chartData: {
					// 这里是你要绘制的饼图数据
				},
				//游戏类型
				gameoptions: [],
				//销售渠道
				accountoptions: [{
						value: 'game_account_type_0',
						label: '待售'
					}, {
						value: 'game_account_type_1',
						label: '在售'
					},
					{
						value: 'game_account_type_2',
						label: '已售'
					},
				],
				//部门
				bmoptions: [{
					value: 'account_source_0',
					label: '自营'
				}, {
					value: 'account_source_1',
					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,
				bpmx:false,
			}
		},
		created() {
			this.value1[0] = this.xsqueryParams.beginTime
			this.value1[1] = this.xsqueryParams.endTime
			this.initGoodsManager();
		},
		mounted() {

		},
		methods: {
			openBpmx(row){
				this.xsqueryParams.accountSource=row.accountSource
				detailed(this.xsqueryParams).then(res=>{
					this.tableData3=res.rows;
					this.total3=res.total;
					this.bpmx=true;
				})
			},
			openBpmx1(){
				detailed(this.xsqueryParams).then(res=>{
					this.tableData3=res.rows;
				})
			},
			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 == 'counts') {
						//如果是经费（正常的加减法）
						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() {
				getTBusShopInfo().then(res => {
					if (res.data) {
						this.xsqueryParams.shopId = res.data.id;
					} else {
						this.xsqueryParams.shopId = '';
					}
					this.channelList();
				})
				queryTBusShop().then(response => {
					response.data.forEach((item) => {
						this.deptOptions.push({
							label: item.name,
							value: item.id,
						});
					});
				});
			},
			channelList() {
				this.loading = true;
				this.tableData = [];
				this.rxloption.xAxis.data = [];
				this.rxloption.series[0].data = [];
				this.rxeoption.xAxis.data = [];
				this.rxeoption.series[0].data = [];
				if (this.radio == 1) {
					this.shangjia = true;
					this.zhuangtai = false;
					this.qudao = false;
					this.youxi = false;
				} else if (this.radio == 2) {
					this.shangjia = false;
					this.zhuangtai = true;
					this.qudao = false;
					this.youxi = false;
				} else if (this.radio == 3) {
					this.shangjia = false;
					this.zhuangtai = false;
					this.qudao = true;
					this.youxi = false;
				} else if (this.radio == 4) {
					this.shangjia = false;
					this.zhuangtai = false;
					this.qudao = false;
					this.youxi = true;
				}
				//查本月的
				accountMonitoring(this.xsqueryParams).then(res => {
					this.loading = false;
					this.total = res.total;
					this.tableData = res.rows;
					let slList = res.rows;
					let rxl = 0;
					let rxe = 0;
					slList.forEach(res => {
						if (this.radio == 1) {
							this.rxeoption.xAxis.data.push(res.shopName);
							this.rxloption.xAxis.data.push(res.shopName);
						} else if (this.radio == 2) {
							this.rxeoption.xAxis.data.push(res.accountType);
							this.rxloption.xAxis.data.push(res.accountType);
						} else if (this.radio == 3) {
							this.rxeoption.xAxis.data.push(res.accountSource);
							this.rxloption.xAxis.data.push(res.accountSource);
						} else if (this.radio == 4) {
							this.rxeoption.xAxis.data.push(res.gameName);
							this.rxloption.xAxis.data.push(res.gameName);
						}
						this.rxeoption.series[0].data.push(Number(res.acquirePrice));
						this.rxloption.series[0].data.push(Number(res.counts));
						rxl += Number(res.counts);
						rxe += Number(res.acquirePrice);
					})
					this.todaySlaesCount = rxl;
					this.todaySlaesPrice = rxe;
					this.cgzxtList();
				})

			},
			checkMonth(i) {
				if (i < 10) {
					i = "0" + i;
				}
				return i;
			},
			//上月
			channelList1() {
				this.loading1 = true;
				this.tableData1 = [];
				if (this.radio == 1) {
					this.shangjia1 = true;
					this.zhuangtai1 = false;
					this.qudao1 = false;
					this.youxi1 = false;
				} else if (this.radio == 2) {
					this.shangjia1 = false;
					this.zhuangtai1 = true;
					this.qudao1 = false;
					this.youxi1 = false;
				} else if (this.radio == 3) {
					this.shangjia1 = false;
					this.zhuangtai1 = false;
					this.qudao1 = true;
					this.youxi1 = false;
				} else if (this.radio == 4) {
					this.shangjia1 = false;
					this.zhuangtai1 = false;
					this.qudao1 = false;
					this.youxi1 = true;
				}
				//查本月的
				accountMonitoring(this.xsqueryParams).then(res => {
					this.loading1 = false;
					this.total1 = res.total;
					this.tableData1 = res.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
				})
			},
			change(){
				this.handleQuery();
			},
			//搜索
			handleQuery() {
				if (this.radio == 1) {
					this.xsqueryParams.statisticsType = 'A'
				} else if (this.radio == 2) {
					this.xsqueryParams.statisticsType = 'B'
				} else if (this.radio == 3) {
					this.xsqueryParams.statisticsType = 'C'
				} else if (this.radio == 4) {
					this.xsqueryParams.statisticsType = 'D'
				}
				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();
			},
			//搜索
			handleQuerysy() {
				this.shangyue=true;
				this.xsqueryParams.beginTime = this.$moment().month(this.$moment().month() - 1).startOf('month').format(
					'YYYY-MM-DD');
				this.xsqueryParams.endTime = this.$moment().month(this.$moment().month() - 1).endOf('month').format(
					'YYYY-MM-DD');
				this.channelList1();
			},
			//重置
			resetQuery() {
				this.queryParams.acquireDate = this.$moment().format("YYYY-MM-DD");
				this.queryParams.reportsType = 'A';
				this.radio = 1
				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: 44%;

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

	

	.left {
		width: 55%;
		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>