<template>
	<div class="app-container calendar-list-container" v-loading="loading">
		<el-row style="border-bottom:1px dashed #ccc;padding-bottom:20px">
			<el-date-picker v-model="time" type="daterange" placeholder="选择日期范围" @change="changeTime"></el-date-picker>
			<el-select v-model="company" filterable placeholder="请选择公司" @change="changeCompany" clearable>
				<el-option v-for="item in allCompaniesArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<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-row>

		<div class="information">
			<h4>数据概况</h4>
			<ul>
				<li>
					<p>{{information.staffNum}}</p>
					<p>员工总数(人)</p>
				</li>
				<li>
					<p>{{information.totalSellAmount}}</p>
					<p>员工销售额(元)</p>
				</li>
				<li>
					<p>{{information.totalRoyaltyAmount}}</p>
					<p>员工App提成总额(元)</p>
				</li>
			</ul>
		</div>

		<el-table :data="tableData" border style="width: 100%" header-align="center" height="450">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
			<el-table-column prop="name" label="员工姓名" align="center"></el-table-column>
			<el-table-column prop="companyNames" label="所属公司" align="center"></el-table-column>
			<el-table-column prop="postionNames" label="身份" align="center"></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="APP提成(5%)" width="100px" align="center"></el-table-column>
			<el-table-column label="会员订单数/合计金额(元)" width="120px" align="center">
				<template scope="scope">
					<span>{{scope.row.memberOrderNum}} / {{scope.row.memberAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column label="租车订单数/合计金额(元)" width="120px" align="center">
				<template scope="scope">
					<span>{{scope.row.rentVehicleOrderNum}} / {{scope.row.rentVehicleAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column label="旅游订单数/合计金额(元)" width="120px" align="center">
				<template scope="scope">
					<span>{{scope.row.travelOrderNum}} / {{scope.row.travelAmount}}</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 { getAll } from 'api/base_info/branch_company/'
import { getDate } from 'api/statistics'

import { getrewardSetting } from 'api/purseManage'
export default {
	created() {
		this.getList()
		this.getCompany()
		this.getrewardSettingFn()
	},
	data() {
		return {
			loading: false,
			total: null,
			information: {},
			time: [],
			tableData: [], //表格数据
			excelLoading: false, //导出loading
			allCompaniesArr: [], //公司
			options: [], //身份
			company: '',
			listquery: {
				startDate: null, //开始日期
				endDate: null, //结束日期
				companyIds: null, //公司
				userPostionId: null, //身份
				page: 1,
				limit: 10
			}
		}
	},
	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()
			}
		},
		//分公司筛选
		changeCompany(val) {
			if (this.company) {
				this.listquery.companyIds = [this.company]
				this.listquery.page = 1
				this.getList()
			} else {
				this.listquery.companyIds = null
				this.listquery.page = 1
				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.page.data
					this.total = data.data.page.totalCount
					if (data.data.page.pageNum == 1) {
						this.information = data.data.total
					}
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		},
		//获取分公司
		getCompany() {
			getAll().then(data => {
				this.allCompaniesArr = data.data
			})
		},
		//获取身份
		getrewardSettingFn() {
			getrewardSetting().then(data => {
				this.options = data.data.filter(item => item.id != 6)
			})
		},
		//导出
		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>