<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container" v-loading="loading">
			<el-form ref="listQuery" :model="listQuery" label-width="100px" :inline="true">
				<el-row>
					<el-form-item label="时间">
						<!-- <el-date-picker
							v-model="time"
							placeholder="请选择时间"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						></el-date-picker>-->
						<el-date-picker
							v-model="time"
							type="daterange"
							placeholder="请选择时间范围"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="changeTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="统计周期">
						<el-radio-group v-model="listQuery.statisticalWay">
							<el-radio-button :label="1">日</el-radio-button>
							<el-radio-button :label="2">周</el-radio-button>
							<el-radio-button :label="3">月</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="订单状态">
						<el-select v-model="listQuery.orderState" clearable placeholder="请选择">
							<!-- <el-option :value='null'>全部</el-option> -->
							<el-option v-for="item in orderArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单来源">
						<el-select v-model="listQuery.orderOrigin" clearable placeholder="请选择">
							<el-option label="全部" :value="null"></el-option>
							<el-option v-for="item in orderOriginArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="支付方式">
						<el-select v-model="listQuery.payWay" clearable placeholder="请选择">
							<el-option label="全部" :value="null"></el-option>
							<el-option v-for="item in payWayArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>

					<p style="border-top:1px solid #d9d9d9;padding:30px 0 10px 0">统计项目</p>
					<div style="margin-bottom:20px">
						<el-checkbox-group v-model="listQuery.statisticalSigns">
							<span v-for="(item,index) in checkArr" :key="index" class="checkStyle">
								<el-checkbox :label="item.id">{{item.name}}</el-checkbox>
								<p v-show="item.id== 'ad_oavga' || item.id== 'ce_tavga' || item.id== 'bd_rvavga'"></p>
							</span>
						</el-checkbox-group>
					</div>
					<el-button type="primary" @click="search">搜索</el-button>
					<el-button type="primary" @click="clearSearch">清空搜索</el-button>
					<el-button type="primary" :loading="excelLoading" @click="downloadExcel">导出报表</el-button>
				</el-row>
			</el-form>

			<div v-for="(item,index) in chartArr" :key="index">
				<p style="text-align:center">{{checkArr.filter(val => val.id == item.title)[0].name}}</p>
				<ve-line
					:data="item"
					:extend="extend"
					:settings="chartSettings"
					:legend-visible="false"
					:data-zoom="dataZoom"
				></ve-line>
			</div>
		</div>
	</div>
</template>

<script>
import {
	received_statistics,
	excelExport
} from 'api/statistics/vehicleStatistics'
import { formatDate } from 'utils/dateFormattor'
import { objDeepCopy } from '../../utils'
export default {
	data: function() {
		this.extend = {
			// 'xAxis.0.axisLabel.rotate': 45
		}
		this.dataZoom = [
			{
				type: 'slider',
				start: 0,
				end: 30
			}
		]
		this.chartSettings = {
			labelMap: {
				orderAmount: '金额',
				orderNum: '订单量'
			}
		}
		return {
			excelLoading: false,
			loading: true,
			time: null,
			checkArr: [
				{ name: '订单总额 ', id: 'aa_ota' },
				{ name: '订单量 ', id: 'ab_otq' },
				{ name: '订单平均量 ', id: 'ac_oavgq' },
				{ name: '订单平均金额 ', id: 'ad_oavga' },
				{ name: '租车订单总额 ', id: 'ba_rvta' },
				{ name: '租车订单量', id: 'bb_rvtq' },
				{ name: '租车订单平均量 ', id: 'bc_rvavgq' },
				{ name: '租车平均金额 ', id: 'bd_rvavga' },
				{ name: '旅游订单总额', id: 'ca_tta' },
				{ name: '旅游订单量 ', id: 'cb_ttq' },
				{ name: '旅游订单平均量 ', id: 'cd_tavgq' },
				{ name: '旅游平均金额 ', id: 'ce_tavga' },
				{ name: '会员订单总额 ', id: 'da_mta' },
				{ name: '普通会员订单总额 ', id: 'db_cmta' },
				{ name: '普通会员订单量 ', id: 'dc_cmtq' },
				{ name: '黄金会员订单总额 ', id: 'dd_gmta' },
				{ name: '黄金会员订单量 ', id: 'de_mgtq' },
				{ name: '钻石会员订单总额 ', id: 'df_dmta' },
				{ name: '钻石会员订单量 ', id: 'dg_dmtq' },
				{ name: '会员平均金额 ', id: 'dh_mavga' },
			],
			//快捷筛选
			listQuery: {
				startDate: null, //开始时间
				endDate: null, //结束时间
				page: 1, //当前页
				limit: 10, //每页条数
				statisticalWay: 1, //统计方式
				orderState: '', //订单状态
				orderOrigin: null, //来源
				payWay: null, //支付方式
				statisticalSigns: ['aa_ota'] //筛选
			},
			//订单状态
			orderArr: [
				{
					name: '全部',
					id: ''
				},
				{
					name: '未支付',
					id: 0
				},
				{
					name: '已支付',
					id: 1
				}
			],
			//订单来源
			orderOriginArr: [
				{
					name: 'APP',
					id: 1
				},
				{
					name: '小程序',
					id: 2
				},
				{
					name: '后台',
					id: 3
				}
			],
			//支付方式
			payWayArr: [
				{
					name: '微信公众号支付',
					id: 1
				},
				{
					name: '支付宝即时到账',
					id: 2
				}
			],
			chartData: {
				columns: ['dateStr', 'orderAmount'],
				rows: []
			},
			chartArr: {}
		}
	},
	created() {
		this.getList()
	},
	methods: {
		//时间关闭
		changeTime(val) {
			if (!val) {
				this.time = null
				this.listQuery.endDate = null
				this.listQuery.startDate = null
			}
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			excelExport(this.listQuery, { responseType: 'arraybuffer' }).then(
				res => {
					const content = res
					const blob = new Blob([content], {
						type: 'application/vnd.ms-excel'
					})
					const fileName = '订单统计.xlsx'
					if (u.indexOf('Edge') > -1) {
						window.navigator.msSaveBlob(blob, fileName)
					} else {
						const elink = document.createElement('a')
						elink.download = fileName
						elink.style.display = 'none'
						elink.href = URL.createObjectURL(blob)
						document.body.appendChild(elink)
						elink.click()
						URL.revokeObjectURL(elink.href) // 释放URL 对象
						document.body.removeChild(elink)
					}
					this.excelLoading = false
				}
			)
		},
		//搜索
		search() {
			if (!!this.time && !!this.time[0]) {
				this.listQuery.startDate =
					formatDate(new Date(this.time[0]), 'yyyy-MM-dd') +
					' 00:00:00'
				this.listQuery.endDate =
					formatDate(new Date(this.time[1]), 'yyyy-MM-dd') +
					' 23:59:59'
			}
			this.getList()
		},
		//清空搜索
		clearSearch() {
			this.listQuery = {
				startDate: null, //开始时间
				endDate: null, //结束时间
				page: 1, //当前页
				limit: 10, //每页条数
				statisticalWay: 1, //统计方式
				orderState: '', //订单状态
				orderOrigin: null, //来源
				payWay: null, //支付方式
				statisticalSigns: ['aa_ota'] //筛选
			}
			this.time = null
			this.getList()
		},
		getList() {
			this.loading = true
			received_statistics(this.listQuery).then(data => {
				if (data.status == 200) {
					let info = data.data
					let params = {}
					let choose = this.listQuery.statisticalSigns
					let way = this.listQuery.statisticalWay
					var x
					var y
					let dateIndex = way == 1 ? 2 : way == 2 ? 1 : 1
					let orderIndex = way == 1 ? 3 : way == 2 ? 2 : 2
					for (let i = 0; i < choose.length; i++) {
						if (info[choose[i]] != '') {
							params[choose[i]] = {
								columns: [
									Object.keys(info[choose[i]][0])[dateIndex], //年费
									Object.keys(info[choose[i]][0])[orderIndex] //金额
								],
								rows: info[choose[i]].sort(function(a, b) {
									if (way === 1) {
										x = a.date
										y = b.date
									}
									if (way === 2) {
										x = a.weekOfYear
										y = b.weekOfYear
									}
									if (way === 3) {
										x = a.month
										y = b.month
									}
									return x < y ? -1 : x > y ? 1 : 0
								}),
								title: choose[i]
							}
						}
					}
					this.chartArr = params
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		}
	}
}
</script>

<style scoped>
.checkStyle {
	margin-right: 30px;
	/* display: inline-block; */
	line-height: 40px;
}
</style>