<template>
	<div class="app-container calendar-list-container" v-loading="loading">
		<el-row style="border-bottom:1px dashed #ccc;padding-bottom:20px">
			<el-form :inline="true">
				<el-form-item label="统计类型" style="width:200px">
					<el-radio-group v-model="listquery.radio1">
						<el-radio-button label="0">收入</el-radio-button>
						<el-radio-button label="1">支出</el-radio-button>
					</el-radio-group>
				</el-form-item>

				<el-date-picker v-model="time" type="daterange" placeholder="选择日期范围" @change="changeTime"></el-date-picker>

				<el-select
					v-model="listquery.userPostionId"
					clearable
					placeholder="请选择订单类型"
					@change="changeStaff"
				>
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-button type="primary" :loading="excelLoading" @click="downloadExcel">导出报表</el-button>
			</el-form>
		</el-row>

		<div class="information">
			<h4>数据概况</h4>
			<ul>
				<li>
					<p>{{information.staffNum}}</p>
					<p>订单总量</p>
				</li>
				<li>
					<p>{{information.totalRoyaltyAmount}}</p>
					<p>应退还金额</p>
				</li>
				<li>
					<p>{{information.totalRoyaltyAmount}}</p>
					<p>实际退还</p>
				</li>
			</ul>
		</div>

		<el-table :data="tableData" border style="width: 100%" header-align="center" height="450">
			<el-table-column prop="name" label="退款日期" align="center"></el-table-column>
			<el-table-column prop="companyNames" label="订单ID" align="center">
				<template scope="scope">
					<p v-for="(item,index) in scope.row.companyNames" :key="index">{{item}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="postionNames" label="订单类型" align="center">
				<template scope="scope">
					<span
						v-for="(item,index) in scope.row.postionNames"
						:key="index"
						style="margin-left:10px"
					>{{item}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="退还类型" align="center"></el-table-column>
			<el-table-column prop="sellAmount" label="应退还金额" align="center"></el-table-column>
			<el-table-column prop="royaltyAmount" label="实际退款接" align="center"></el-table-column>
			<el-table-column label="客户名字" align="center">
				<template scope="scope">
					<span>{{scope.row.memberOrderNum}} / {{scope.row.memberAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column label="客户手机号" align="center">
				<template scope="scope">
					<span>{{scope.row.rentVehicleOrderNum}} / {{scope.row.rentVehicleAmount}}</span>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="listquery.page"
			:page-sizes="[10,20,30, 50]"
			:page-size="listquery.limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			style="margin-top:20px"
		></el-pagination>
	</div>
</template>
<script>
import { getDate } from 'api/statistics'

import { getrewardSetting } from 'api/purseManage'
export default {
	created() {
		this.getList()
	},
	data() {
		return {
			loading: false,
			total: null,
			information: {},
			time: [],
			tableData: [], //表格数据
			excelLoading: false, //导出loading
			options: [
				{
					id: '0',
					name: '首次购买'
				},
				{
					id: '1',
					name: '续费'
				},
				{
					id: '2',
					name: '激活'
				},
				{
					id: '3',
					name: '付费'
				}
			], //身份
			listquery: {
				startDate: null, //开始日期
				endDate: null, //结束日期
				userPostionId: null, //身份
				page: 1,
				limit: 10,
				radio1: 0
			}
		}
	},
	methods: {
		handleSizeChange(val) {
			this.listquery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listquery.page = val
			this.getList()
		},
		//时间筛选
		changeTime(val, value) {
			this.listquery.page = 1
			if (!!val) {
				let value = val.split(' - ')
				this.listquery.startDate = value[0] + ' 00:00:00'
				this.listquery.endDate = value[1] + ' 23:59:59'
				this.getList()
			} else {
				this.listquery.startDate = null
				this.listquery.endDate = null
				this.getList()
			}
		},
		//身份筛选
		changeStaff() {
			this.listquery.page = 1
			this.getList()
		},
		//列表数据
		getList() {
			// this.loading = true
			// getDate(this.listquery).then(data => {
			// 	if (data.status == 200) {
			// 		this.tableData = data.data.data
			// 		this.total = data.data.totalCount
			// 	}
			// 	setTimeout(() => {
			// 		this.loading = false
			// 	}, 300)
			// })
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
		}
	}
}
</script>
<style scoped>
.information {
	border: 1px solid #ccc;
	margin: 20px 0;
	padding: 10px 20px;
}
.information h4 {
	color: #333;
	font-size: 16px;
	font-weight: normal;
}
.information ul {
	padding: 0;
	border-top: 1px solid #eee;
	padding: 10px 30px;
	overflow: hidden;
}
.information li {
	list-style: none;
	text-align: center;
	float: left;
	width: 33.33%;
	border-right: 1px solid #eee;
}
.information li:last-child {
	border: none;
}
</style>