<template>
	<div class="app-container calendar-list-container" v-loading="loading">
		<el-row>
			<el-form :inline="true" label-position="left">
				<el-form-item label="统计类型">
					<el-radio-group v-model="listquery.type" @change="changeType">
						<el-radio-button label="0">收入</el-radio-button>
						<el-radio-button label="1">支出</el-radio-button>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="下单时间">
					<el-date-picker v-model="time" type="daterange" placeholder="请选择下单时间" @change="changeTime"></el-date-picker>
				</el-form-item>

				<el-form-item label="订单类型">
					<el-select v-model="listquery.orderType" clearable placeholder="请选择订单类型" @change="changeStaff">
						<el-option label="全部" value>全部</el-option>
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="所属公司" v-show="listquery.type == 0">
					<el-select
						v-model="listquery.companyId"
						filterable
						placeholder="请选择业绩所属公司"
						clearable
						@change="changeCompany"
					>
						<el-option label="全部" value>全部</el-option>
						<el-option v-for="item in allCompaniesArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="支付方式" v-show="listquery.type == 0">
					<el-select
						v-model="listquery.paymentMethod"
						clearable
						placeholder="请选择支付方式"
						@change="changeWay"
					>
						<el-option label="全部" value>全部</el-option>
						<el-option v-for="item in payArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>

				<el-button type="primary" @click="clearSearch">清空搜索</el-button>
				<el-button type="primary" :loading="excelLoading" @click="downloadExcel">导出报表</el-button>
			</el-form>
		</el-row>

		<div class="information" v-if="listquery.type == 0">
			<h4>数据概况</h4>
			<ul class="first">
				<li>
					<p>{{information.orderSum || 0}}</p>
					<p>订单总量</p>
				</li>
				<li>
					<p>{{information.totalReceivables || 0}}</p>
					<p>应收金额</p>
				</li>
				<li>
					<p>{{information.discount || 0}}</p>
					<p>优惠金额</p>
				</li>
				<li>
					<p>{{information.actual || 0}}</p>
					<p>实收金额</p>
				</li>
			</ul>
			<!-- <ul v-else class="second">
				<li>
					<p>{{information.orderSum || 0}}</p>
					<p>订单总量</p>
				</li>
				<li>
					<p>{{information.staffNum || 0}}</p>
					<p>应退还金额</p>
				</li>
				<li>
					<p>{{information.staffNum || 0}}</p>
					<p>实际退还</p>
				</li>
			</ul>-->
		</div>
		<!-- :height="tabHeight" -->
		<el-table :data="tableData" border style="width: 100%" header-align="center">
			<el-table-column prop="crtTime" label="下单日期" align="center" v-if="listquery.type == 0"></el-table-column>
			<el-table-column prop="time" label="退款日期" align="center" v-else></el-table-column>
			<el-table-column prop="no" label="订单ID" align="center"></el-table-column>
			<el-table-column prop="type" label="订单类型" align="center"></el-table-column>
			<el-table-column prop="orderAmount" label="应收金额" align="center" v-if="listquery.type == 0"></el-table-column>
			<el-table-column prop="refundInstruction" label="退还类型" align="center" v-else></el-table-column>
			<el-table-column prop="favorablePrice" label="优惠金额" align="center" v-if="listquery.type == 0"></el-table-column>
			<el-table-column prop="refundAmount" label="退还金额" align="center" v-else></el-table-column>
			<el-table-column prop="realAmount" label="实收金额" align="center" v-if="listquery.type == 0"></el-table-column>
			<el-table-column prop="realname" label="客户名字" align="center"></el-table-column>
			<el-table-column prop="username" label="客户手机号" align="center"></el-table-column>
			<el-table-column label="邀约人/身份" align="center" v-if="listquery.type == 0">
				<template scope="scope">
					<span>{{scope.row.parentRealname}} / {{scope.row.positionName}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="parentUsername" label="邀约人手机号" align="center" v-if="listquery.type == 0"></el-table-column>
			<el-table-column prop="companyName" label="业绩所属公司" align="center" v-if="listquery.type == 0"></el-table-column>
			<el-table-column prop="payWay" label="支付方式" align="center" v-if="listquery.type == 0"></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 { companyList, excel } from 'api/statistics'
import { getAll } from 'api/base_info/branch_company/'
export default {
	created() {
		this.getList()
		this.getCompany()
	},
	data() {
		return {
			tabHeight: '800',
			loading: false,
			total: null,
			information: {},
			time: [],
			allCompaniesArr: [], //公司数据
			tableData: [], //表格数据
			excelLoading: false, //导出loading
			payArr: [
				{ id: 1, name: '微信公众号支付' },
				{ id: 2, name: '支付宝即时支付' },
				{ id: 3, name: '银联' }
			],
			options: [
				{
					id: '1',
					name: '租车'
				},
				{
					id: '2',
					name: '旅游'
				},
				{
					id: '3',
					name: '会员'
				}
			], //身份
			listquery: {
				startDate: null, //开始日期
				endDate: null, //结束日期
				orderType: null, //身份
				page: 1,
				limit: 10,
				companyId: null, //业绩所属公司
				paymentMethod: null, //支付方式
				type: 0
			}
		}
	},
	methods: {
		handleSizeChange(val) {
			this.listquery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listquery.page = val
			this.getList()
		},
		//清空搜索
		clearSearch() {
			this.listquery = {
				startDate: null,
				endDate: null, //结束日期
				orderType: null, //身份
				page: 1,
				limit: 10,
				companyId: null, //业绩所属公司
				paymentMethod: null, //支付方式
				type: this.listquery.type
			}
		},
		//获取分公司
		getCompany() {
			getAll().then(data => {
				this.allCompaniesArr = data.data
			})
		},
		//所属公司筛选
		changeCompany() {
			this.listquery.page = 1
			this.getList()
		},
		//统计类型筛选
		changeType(val) {
			this.listquery.page = 1
			this.getList()
		},
		//支付方式筛选
		changeWay(val) {
			this.listquery.page = 1
			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
			companyList(this.listquery).then(data => {
				if (data.status == 200) {
					if (this.listquery.type == 0) {
						this.tableData = data.data.achievements.list
						this.total = data.data.achievements.total
						if (this.listquery.page == 1) {
							this.information = {
								orderSum: data.data.orderSum, //订单总量
								totalReceivables: data.data.totalReceivables, //应收金额
								discount: data.data.discount, //优惠金额
								actual: data.data.actual //实收金额
							}
						}
					} else {
						this.tableData = data.data.list
						this.total = data.data.total
					}
				}

				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			excel(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
			})
		}
	}
}
</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;

	border-right: 1px solid #eee;
}
.information .first li {
	width: 25%;
}
.information .second li {
	width: 33%;
}
.information li:last-child {
	border: none;
}
</style>