<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="listquery.companyId"
				filterable
				placeholder="请选择公司"
				@change="changeCompany"
				clearable
				ref="company"
			>
				<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"
				ref="userPostion"
			>
				<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"
			@select="choose"
			@select-all="chooseAll"
			ref="multipleTable"
		>
			<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 label="序号" align="center" width="70">
				<template slot-scope="scope">
					<span>{{scope.$index+(listquery.page - 1) * listquery.limit + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="员工姓名" align="center"></el-table-column>
			<el-table-column prop="companyNames" label="所属公司" align="center">
				<template slot-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 slot-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="APP提成(5%)" width="100px" align="center"></el-table-column>
			<el-table-column label="会员订单数/合计金额(元)" width="120px" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.memberOrderNum}} / {{scope.row.memberAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column label="租车订单数/合计金额(元)" width="120px" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.rentVehicleOrderNum}} / {{scope.row.rentVehicleAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column label="旅游订单数/合计金额(元)" width="120px" align="center">
				<template slot-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, exports } from 'api/statistics'
import { getrewardSetting } from 'api/purseManage'
export default {
	created() {
		this.getList()
		this.getCompany()
		this.getrewardSettingFn()
	},
	data() {
		return {
			loading: false, //页面loading
			total: null, //总页数
			information: {}, //统计数据
			time: [], //时间筛选
			tableData: [], //表格数据
			excelLoading: false, //导出loading
			allCompaniesArr: [], //公司
			options: [], //身份
			allChoose: false, //是否全选
			userIds: [],
			listquery: {
				startDate: null, //开始日期
				endDate: null, //结束日期
				companyId: null, //公司
				userPostionId: null, //身份
				userIds: [],
				page: 1,
				limit: 10
			}
		}
	},
	methods: {
		//全选
		chooseAll(arr) {
			arr.length > 0 ? (this.allChoose = true) : (this.allChoose = false)
		},
		//多选
		choose(val, row) {
			this.userIds = val
			// console.log(val);
			// val.forEach(element => {
			// 	if (this.userIds.filter(item => item != element.userId)) {
			// 		this.userIds.push(element.userId)
			// 	}
			// })
		},
		//页码
		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) {
			this.listquery.companyName = this.$refs.company.query
			this.listquery.page = 1
			this.getList()
		},
		//身份筛选
		changeStaff() {
			this.listquery.page = 1
			this.listquery.postionName = this.$refs.userPostion.selectedLabel
			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
					//点击全选所有分页都全选
					this.$nextTick(function() {
						if (!!this.allChoose) {
							for (
								let index = 0;
								index < this.tableData.length;
								index++
							) {
								this.$refs.multipleTable.toggleRowSelection(
									this.tableData[index]
								)
							}
						}
						//多选
						// for (let i = 0; i < this.userIds.length; i++) {
						// 	let demo = this.tableData.findIndex(
						// 		item => item.userId == this.userIds[i]
						// 	)
						// 	if (demo > 0) {
						// 		this.$refs.multipleTable.toggleRowSelection(
						// 			this.tableData[demo]
						// 		)
						// 	}
						// }
					})

					//第一页才调取统计
					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() {
			if (this.userIds.length > 0) {
				this.userIds.forEach(element => {
					this.listquery.userIds.push(element.userId)
				})
			}
			this.$refs.multipleTable.clearSelection()
			this.userIds = []
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			exports(this.listquery, { responseType: 'arraybuffer' }).then(
				res => {
					const content = res
					const blob = new Blob([content], {
						type: 'application/vnd.ms-excel'
					})
					const fileName =
						this.timestamp(new Date()) + '员工业绩报表.xlsx'
					if (u.indexOf('Edge') > -1) {
						window.navigator.msSaveBlob(blob, fileName)
						console.log('ie')
					} 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
					this.listquery.userIds = []
				}
			)
		},
		timestamp(now) {
			var year = now.getFullYear()
			var month = now.getMonth() + 1
			var date = now.getDate()
			var Hours = now.getHours()
			var Minutes = now.getMinutes()
			var Seconds = now.getSeconds()
			month = month.toString().length == 1 ? '0' + month : month
			date = date.toString().length == 1 ? '0' + date : date
			Hours = Hours.toString().length == 1 ? '0' + Hours : Hours
			Minutes = Minutes.toString().length == 1 ? '0' + Minutes : Minutes
			Seconds = Seconds.toString().length == 1 ? '0' + Seconds : Seconds
			return (
				year +
				'-' +
				month +
				'-' +
				date +
				' ' +
				Hours +
				':' +
				Minutes +
				':' +
				Seconds
			)
		}
	}
}
</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>
