<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left" :class="{ 'tab_qiehuan_bg' : tab_qiehuan == 1}" @click="order_click()">
							<div class="title">订单管理</div>
						</div>
						<div class="title-left" :class="{ 'tab_qiehuan_bg' : tab_qiehuan == 2}" @click="tongji_click()">
							<div class="title">预订统计</div>
						</div>
					</div>
					<div v-if="tab_qiehuan == 1" class="cell-body">
						<div class="controls">
							<el-form :inline="true" :model="formInline" class="demo-form-inline">
								<el-form-item label="关键字">
									<el-input v-model="formInline.key" prefix-icon="el-icon-search" clearable placeholder="请输入关键字"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" class="btn-search" @click="btn_search">查询</el-button>
								</el-form-item>
								<el-form-item label="状态">
									<el-select v-model="formInline.status" placeholder="状态" @change="search_state_change">
										<el-option label="全部" value=""></el-option>
										<el-option label="待支付" value="1"></el-option>
										<el-option label="已支付" value="2"></el-option>
										<el-option label="已入住" value="3"></el-option>
										<el-option label="已取消" value="4"></el-option>
										<el-option label="已退款" value="5"></el-option>
										<el-option label="已退房" value="6"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="房型">
									<el-select v-model="formInline.h_type" placeholder="" @change="search_state_change">
										<el-option label="全部" value=""></el-option>
										<el-option label="墨轩湖标准型" value="墨轩湖标准型"></el-option>
										<el-option label="墨轩湖高级型" value="墨轩湖高级型"></el-option>
										<el-option label="墨轩湖豪华型" value="墨轩湖豪华型"></el-option>
                    <el-option label="黄家湖电信楼单人间" value="黄家湖电信楼单人间"></el-option>
										<el-option label="黄家湖电信楼大单间" value="黄家湖电信楼大单间"></el-option>
										<el-option label="黄家湖电信楼标准间" value="黄家湖电信楼标准间"></el-option>
                    <el-option label="文化园标间" value="文化园标间"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="入住日期">
									<el-date-picker v-model="formInline.live_time" type="date" align="right" placeholder="入住日期" @change="search_datetime_change"
										value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="离店日期">
									<el-date-picker v-model="formInline.end_time" type="date" align="right" placeholder="离店日期" @change="search_datetime_change"
										value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="支付日期" v-show="formInline.pay_date_show_in_search">
									<el-date-picker v-model="formInline.pay_time" type="date" align="right" placeholder="支付日期" @change="search_datetime_change"
										value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="核销日期" v-show="formInline.cancel_verification_date_show_in_search">
									<el-date-picker v-model="formInline.hx_time" type="date" align="right" placeholder="核销日期" @change="search_datetime_change"
										value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="取消日期" v-show="formInline.cancel_date_show_in_search">
									<el-date-picker v-model="formInline.cancel_time" type="date" align="right" placeholder="取消日期"
										@change="search_datetime_change" value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="退款日期" v-show="formInline.refund_date_show_in_search">
									<el-date-picker v-model="formInline.refund_time" type="date" align="right" placeholder="退款日期"
										@change="search_datetime_change" value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="退房日期" v-show="formInline.check_out_date_show_in_search">
									<el-date-picker v-model="formInline.tf_time" type="date" align="right" placeholder="退房日期" @change="search_datetime_change"
										value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
								<el-form-item label="创建日期" v-show="formInline.create_date_show_in_search">
									<el-date-picker v-model="formInline.create_time" type="date" align="right" placeholder="创建日期"
										@change="search_datetime_change" value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable>
									</el-date-picker>
								</el-form-item>
							</el-form>
							<el-button type="primary" class="export" @click="handler_download_excel">导出订单</el-button>
						</div>
						<el-table ref="tablefixed" :data="tableData" height="538" style="width: 100%" :cell-style="cell_style" v-loading="loading"
							:header-cell-style="header_cell_style" border stripe>
							<el-table-column label="订单号" fixed align="center" width="150">
								<template slot-scope="scope">
									<span>{{ scope.row.order_num }}</span>
								</template>
							</el-table-column>
							<el-table-column label="状态" fixed align="center" width="100">
								<template slot-scope="scope">
									<span v-if="scope.row.status === '1'" class="txt-cell-red">待支付</span>
									<span v-else-if="scope.row.status === '2'" class="txt-cell-green">已支付</span>
									<span v-else-if="scope.row.status === '3'" class="txt-cell-green">已入住</span>
									<span v-else-if="scope.row.status === '4'" class="txt-cell-red">已取消</span>
									<span v-else-if="scope.row.status === '5'" class="txt-cell-red">已退款</span>
									<span v-else-if="scope.row.status === '6'" class="txt-cell-red">已退房</span>
									<span v-else-if="scope.row.status === '7'" class="txt-cell-red">退款中</span>
								</template>
							</el-table-column>
							<el-table-column label="预订人" fixed align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.user_name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="手机号" fixed align="center" v-if="formInline.status === '1'">
								<template slot-scope="scope">
									<span>{{ scope.row.phone }}</span>
								</template>
							</el-table-column>
							<el-table-column label="手机号" fixed align="center" v-else width="150">
								<template slot-scope="scope">
									<span>{{ scope.row.phone }}</span>
								</template>
							</el-table-column>
							<el-table-column label="入住时间" fixed align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.live_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="离店时间" fixed align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.end_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="预定房型" fixed align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.h_type }}</span>
								</template>
							</el-table-column>
							<el-table-column label="房费（元）" fixed align="center" width="120">
								<template slot-scope="scope">
									<span>{{ scope.row.pay_account.toFixed(2) }}</span>
								</template>
							</el-table-column>
							<el-table-column label="支付时间" align="center" width="158" v-if="formInline.pay_date_show_col">
								<template slot-scope="scope">
									<span>{{ scope.row.create_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="核销时间" align="center" width="158" v-if="formInline.cancel_verification_date_show_col">
								<template slot-scope="scope">
									<span>{{ scope.row.hx_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="取消时间" align="center" width="158" v-if="formInline.cancel_date_show_col">
								<template slot-scope="scope">
									<span>{{ scope.row.cancel_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="退款时间" align="center" width="158" v-if="formInline.refund_date_show_col">
								<template slot-scope="scope">
									<span>{{ scope.row.refund_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="退房时间" align="center" width="158" v-if="formInline.check_out_date_show_col">
								<template slot-scope="scope">
									<span>{{ scope.row.tf_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="创建时间" align="center" width="158" v-if="formInline.create_date_show_col">
								<template slot-scope="scope">
									<span>{{ scope.row.create_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" fixed="right" align="center" width="220" v-if="formInline.action_show_col">
								<template slot-scope="scope">
									<el-button size="mini" round type="primary" @click="collate_handler(scope.$index, scope.row)">核销</el-button>
									<el-button size="mini" round type="danger" @click="refund_handler(scope.$index, scope.row)">退款</el-button>
									<el-button size="mini" round type="warning" @click="checkout_handler(scope.$index, scope.row)">退房</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
								layout="prev, pager, next, jumper" :total="pagination.total">
							</el-pagination>
						</div>
					</div>
					<div v-else class="cell-body">
						<div class="controls">
							<el-form :inline="true" :model="formInline_tongji" class="demo-form-inline">
								<el-form-item label="房型">
									<el-select v-model="formInline_tongji.h_type" placeholder="">
										<el-option label="全部" value=""></el-option>
										<el-option label="标准型" value="标准型"></el-option>
										<el-option label="高级型" value="高级型"></el-option>
										<el-option label="豪华型" value="豪华型"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="入住日期">
									<el-date-picker v-model="formInline_tongji.date" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期">
									</el-date-picker>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" class="btn-search" @click="btn_tongji_search">查询</el-button>
								</el-form-item>
							</el-form>
						</div>
						<el-table :data="tableData_tongji" height="525" style="width: 100%" :cell-style="cell_style" v-loading="loading_list"
							:header-cell-style="header_cell_style" border stripe>
							<el-table-column label="入住日期" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.date }}</span>
								</template>
							</el-table-column>
							<el-table-column label="房型" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.h_type }}</span>
								</template>
							</el-table-column>
							<el-table-column label="预定数量" align="center">
								<template slot-scope="scope">
									<span>
										<div class="create-link" @click="view_data('2', scope.row.h_type)">{{ scope.row.y_num }}</div>
									</span>
								</template>
							</el-table-column>
							<el-table-column label="新增数量" align="center">
								<template slot-scope="scope">
									<span>
										<div>{{ scope.row.a_num }}</div>
									</span>
								</template>
							</el-table-column>
							<el-table-column label="退款数量" align="center">
								<template slot-scope="scope">
									<span>
										<div class="create-link" @click="view_data('5', scope.row.h_type)">{{ scope.row.t_num }}</div>
									</span>
								</template>
							</el-table-column>
							<el-table-column label="取消数量" align="center">
								<template slot-scope="scope">
									<span>
										<div class="create-link" @click="view_data('4', scope.row.h_type)">{{ scope.row.c_num }}</div>
									</span>
								</template>
							</el-table-column>
							<el-table-column label="剩余数量" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.s_yum }}</span>
								</template>
							</el-table-column>
							<el-table-column label="总数量" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.z_num }}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getTableData,
		collate,
		refund,
		checkout,
		downloadExcel,
		tongji
	} from '@/api/order'

	import {
		getDateComponents
	} from '@/js/common'

	export default {
		data() {
			return {
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > new Date('2023-09-15');
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '14px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表单数据
				formInline: {
					live_time: '', // 入住日期
					end_time: '', // 离店日期
					pay_time: '', // 支付日期
					hx_time: '', // 核销日期
					cancel_time: '', // 取消日期
					refund_time: '', // 退款日期
					tf_time: '', // 退房日期
					create_time: '', // 创建日期
					// 查询选项是否显示
					pay_date_show_in_search: true, // 显示支付日期查询选项
					cancel_verification_date_show_in_search: true, // 显示核销日期查询选项
					cancel_date_show_in_search: true, // 显示取消日期查询选项
					refund_date_show_in_search: true, // 显示退款日期查询选项
					check_out_date_show_in_search: true, // 显示退房日期查询选项
					create_date_show_in_search: true, // 显示创建日期查询选项
					// 数据表是否显示相应的列
					pay_date_show_col: true, // 显示支付日期数据列
					cancel_verification_date_show_col: true, // 显示核销日期数据列
					cancel_date_show_col: true, // 显示取消日期数据列
					refund_date_show_col: true, // 显示退款日期数据列
					check_out_date_show_col: true, // 显示退房日期数据列
					create_date_show_col: true, // 显示创建日期数据列
					action_show_col: true, // 显示操作按钮列
					key: '', // 姓名/手机号 关键字
					status: '', // 状态
					h_type: '' // 房型
				},
				formInline_tongji: {
					date: '',
					h_type: ''
				},
				tableData: [],
				tableData_tongji: [],
				cond_data: {},
				cond_tongji_data: {},
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 9,
					total: 0
				},
				pagination_tongji: {
					currentPage: 1,
					pageSize: 9,
					total: 0
				},
				loading: true,
				loading_list: true,
				tab_qiehuan: 1,
				interval: ''
			}
		},
		created() {
			let d = getDateComponents(new Date(), 'yyyy-mm-dd').date
			this.formInline.live_time = d
			// 获取消费记录,表格数据
			this.get_table_data('list');
			// 获取消费记录,表格数据
			this.startRepeatingInterval();
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		beforeunload() {
			this.clearRepeatingInterval(this.timer);
		},
		methods: {
			// 点击跳转查看对应数据
			view_data(param, hType) {
				this.tab_qiehuan = 1;
				this.formInline.status = param;
				this.formInline.h_type = hType;
				this.search_state_change();
				this.get_tongji_data('search');
			},
			// 统计标签
			tongji_click() {
				this.tab_qiehuan = 2;
			},
			// 订单标签
			order_click() {
				this.tab_qiehuan = 1;
			},
			/**
			 * 核销
			 */
			collate_handler(index, row) {
				// console.log(index, row, row.status);
				this.$confirm('确定核销？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					closeOnClickModal: false
				}).then(() => {
					let data = {
						id: row.id,
						status: 3,
						dom: row.dom
					};
					// console.log(data);
					collate(data).then((res) => {
						// console.log(res);
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: res.message
							});
							// 刷新列表
							this.get_table_data('pages');
						} else {
							this.$message.warning(res.message)
						}
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message)
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消核销'
					});
				});
			},
			/**
			 * 退款
			 */
			refund_handler(index, row, param) {
				// console.log(index, row, row.status);
				this.$confirm('确定退款？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					closeOnClickModal: false
				}).then(() => {
					let data = {
						id: row.id,
						status: 5
					};
					// console.log(data);
					refund(data).then((res) => {
						// console.log(res);
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: res.message
							});
							// 刷新列表
							this.get_table_data('pages');
						} else {
							this.$message.warning(res.message)
						}
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message)
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退款'
					});
				});
			},
			/**
			 * 退房
			 */
			checkout_handler(index, row) {
				// console.log(index, row, row.status);
				this.$confirm('确定退房？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					closeOnClickModal: false
				}).then(() => {
					let data = {
						id: row.id,
						status: 6,
						dom: row.dom
					};
					// console.log(data);
					checkout(data).then((res) => {
						// console.log(res);
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: res.message
							});
							// 刷新列表
							this.get_table_data('pages');
						} else {
							this.$message.warning(res.message)
						}
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message)
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退房'
					});
				});
			},
			/**
			 * 下载Excel表格
			 */
			handler_download_excel() {
				this.get_condtion();
				// 开始发送请求，获取配置数据
				downloadExcel(this.cond_data).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}

					if (res.code == 200) {
						this.$message.success('下载成功！')
						let xls = 'https://chtech.ncjti.edu.cn/hotelReservation' + res.downurl
						window.open(xls)
					} else {
						this.$message.error(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 选取的支付时间进行格式化，赋值给formInline
			 */
			search_datetime_change() {
				// 刷新列表
				this.get_table_data('search')
			},
			/**
			 * 搜索状态
			 */
			search_state_change() {
				// 查询选项是否显示
				this.formInline.pay_date_show_in_search = false; // 显示支付日期查询选项
				this.formInline.cancel_verification_date_show_in_search = false; // 显示核销日期查询选项
				this.formInline.cancel_date_show_in_search = false; // 显示取消日期查询选项
				this.formInline.refund_date_show_in_search = false; // 显示退款日期查询选项
				this.formInline.check_out_date_show_in_search = false; // 显示退房日期查询选项
				this.formInline.create_date_show_in_search = false; // 显示创建日期查询选项
				// 数据表是否显示相应的列
				this.formInline.pay_date_show_col = false; // 显示支付日期数据列
				this.formInline.cancel_verification_date_show_col = false; // 显示核销日期数据列
				this.formInline.cancel_date_show_col = false; // 显示取消日期数据列
				this.formInline.refund_date_show_col = false; // 显示退款日期数据列
				this.formInline.check_out_date_show_col = false; // 显示退房日期数据列
				this.formInline.create_date_show_col = false; // 显示创建日期数据列
				this.formInline.action_show_col = false; // 显示操作按钮列

				if (this.formInline.status == 1) {
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项

					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.action_show_col = false; // 显示操作按钮列

				} else if (this.formInline.status == 2) {
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项
					this.formInline.pay_date_show_in_search = true; // 显示支付日期查询选项

					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.pay_date_show_col = true; // 显示支付日期数据列
					this.formInline.action_show_col = true; // 显示操作按钮列

				} else if (this.formInline.status == 3) {
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项
					this.formInline.pay_date_show_in_search = true; // 显示支付日期查询选项
					this.formInline.cancel_verification_date_show_in_search = true; // 显示核销日期查询选项

					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.pay_date_show_col = true; // 显示支付日期数据列
					this.formInline.cancel_verification_date_show_col = true; // 显示核销日期数据列
					this.formInline.action_show_col = true; // 显示操作按钮列

				} else if (this.formInline.status == 4) {
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项
					this.formInline.pay_date_show_in_search = true; // 显示支付日期查询选项
					this.formInline.cancel_date_show_in_search = true; // 显示核销日期查询选项

					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.pay_date_show_col = true; // 显示支付日期数据列
					this.formInline.cancel_date_show_col = true; // 显示取消日期数据列
					this.formInline.action_show_col = true; // 显示操作按钮列

				} else if (this.formInline.status == 5) {
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项
					this.formInline.pay_date_show_in_search = true; // 显示支付日期查询选项
					this.formInline.refund_date_show_in_search = true; // 显示退款日期查询选项

					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.pay_date_show_col = true; // 显示支付日期数据列
					this.formInline.refund_date_show_col = true; // 显示退款日期数据列
					this.formInline.action_show_col = true; // 显示操作按钮列

				} else if (this.formInline.status == 6) {
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项
					this.formInline.pay_date_show_in_search = true; // 显示支付日期查询选项
					this.formInline.check_out_date_show_in_search = true; // 显示退房日期查询选项

					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.pay_date_show_col = true; // 显示支付日期数据列
					this.formInline.check_out_date_show_col = true; // 显示退房日期数据列
					this.formInline.action_show_col = true; // 显示操作按钮列

				} else {
					this.formInline.pay_date_show_in_search = true; // 显示支付日期查询选项
					this.formInline.cancel_verification_date_show_in_search = true; // 显示核销日期查询选项
					this.formInline.cancel_date_show_in_search = true; // 显示取消日期查询选项
					this.formInline.refund_date_show_in_search = true; // 显示退款日期查询选项
					this.formInline.check_out_date_show_in_search = true; // 显示退房日期查询选项
					this.formInline.create_date_show_in_search = true; // 显示创建日期查询选项
					// 数据表是否显示相应的列
					this.formInline.pay_date_show_col = true; // 显示支付日期数据列
					this.formInline.cancel_verification_date_show_col = true; // 显示核销日期数据列
					this.formInline.cancel_date_show_col = true; // 显示取消日期数据列
					this.formInline.refund_date_show_col = true; // 显示退款日期数据列
					this.formInline.check_out_date_show_col = true; // 显示退房日期数据列
					this.formInline.create_date_show_col = true; // 显示创建日期数据列
					this.formInline.action_show_col = true; // 显示操作按钮列
				}

				// 刷新列表
				this.get_table_data('search');
			},
			// 统计表格数据
			get_tongji_data(param) {
				this.loading_list = true

				this.get_tongji_condtion();

				let data = this.cond_tongji_data;
				if (param == 'search') {
					data.page = 1
					this.pagination_tongji.currentPage = 1
				}
				// console.log(data);
				tongji(data).then((res) => {
					// console.log(res);
					if (typeof res.data !== 'undefined' && res.data !== '') {
						// this.pagination_tongji.total = res.total
						this.tableData_tongji = []
						for (var i = 0; i < res.data.length; i++) {
							this.tableData_tongji.push(res.data[i])
						}
					} else {
						this.tableData_tongji = []
						this.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				});
				this.loading_list = false;
			},
			startRepeatingInterval() {
				this.interval = setInterval(() => {
					this.get_tongji_data('list')
				}, 3000); // 1000 毫秒后执行 myFunction
			},
			clearRepeatingInterval() {
				if (this.interval) {
					clearInterval(this.interval);
				}
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data(param) {
				this.loading = true
				this.get_condtion();

				let data = this.cond_data;
				if (param == 'search') {
					data.page = 1
					this.pagination.currentPage = 1
				}
				// console.log(data);
				getTableData(data).then((res) => {
					// console.log(res);
					if (typeof res.rows !== 'undefined' && res.rows !== '') {
						this.pagination.total = res.total
						this.tableData = []
						for (var i = 0; i < res.rows.length; i++) {
							this.tableData.push(res.rows[i])
						}
					} else {
						this.tableData = []
						this.$message.warning('没有符合条件的数据！')
					}
					this.$refs.tablefixed.doLayout();
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				});
				this.loading = false;
			},
			get_tongji_condtion() {
				let data = {
					page: this.pagination_tongji.currentPage,
					rows: this.pagination_tongji.pageSize
				}

				if (typeof this.formInline_tongji.date !== undefined && this.formInline_tongji.date !== '' && this.formInline_tongji.date !== null) {
					data.date = this.formInline_tongji.date
				} else {
					let d = getDateComponents(new Date(), 'yyyy-mm-dd')
					this.formInline_tongji.date = d.date
				}

				if (this.formInline_tongji.h_type !== '') {
					data.h_type = this.formInline_tongji.h_type
				}

				this.cond_tongji_data = data;
			},
			/**
			 * 条件
			 */
			get_condtion() {
				let data = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize
				}
				if (this.formInline.key !== '') {
					data.key = this.formInline.key
				}
				if (this.formInline.h_type !== '') {
					data.h_type = this.formInline.h_type
				}
				if (this.formInline.live_time !== '' && this.formInline.live_time !== null) {
					data.live_time = this.formInline.live_time
				}
				if (this.formInline.end_time !== '' && this.formInline.end_time !== null) {
					data.end_time = this.formInline.end_time
				}
				if (this.formInline.pay_time !== '' && this.formInline.pay_time !== null) {
					data.pay_time = this.formInline.pay_time
				}
				if (this.formInline.hx_time !== '' && this.formInline.hx_time !== null) {
					data.hx_time = this.formInline.hx_time
				}
				if (this.formInline.cancel_time !== '' && this.formInline.cancel_time !== null) {
					data.cancel_time = this.formInline.cancel_time
				}
				if (this.formInline.refund_time !== '' && this.formInline.refund_time !== null) {
					data.refund_time = this.formInline.refund_time
				}
				if (this.formInline.tf_time !== '' && this.formInline.tf_time !== null) {
					data.tf_time = this.formInline.tf_time
				}
				if (this.formInline.create_time !== '' && this.formInline.create_time !== null) {
					data.create_time = this.formInline.create_time
				}
				if (this.formInline.status !== '') {
					data.status = this.formInline.status
				}

				this.cond_data = data;
			},
			/**
			 * 搜索
			 */
			btn_search() {
				this.get_table_data('search')
			},
			btn_tongji_search() {
				this.get_tongji_data('search')
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_table_data('pages')
			},
			currentPageTongjiChange(val) {
				this.pagination_tongji.currentPage = val
				this.get_table_data('pages')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						align-items: center;
						margin-bottom: 10px;
						padding-bottom: 10px;
						border-bottom: 1px solid #CCCCCC;

						.title-left {
							display: flex;
							align-items: center;
							cursor: pointer;
							box-sizing: border-box;

							.title {
								text-align: center;
								font-size: 22px;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
								padding: 8px 10px;
								border-bottom: 2px solid #fefefe;
							}

							.title-detail {
								margin-left: 50px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #1A202B;
							}

						}

						.tab_qiehuan_bg {
							border-bottom: 2px solid #3762FE;
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.controls {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.demo-form-inline {
								display: inline-flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: flex-start;

								.btn-search {
									background: #3762FE;
									border-color: #3762FE;
									font-size: 14px;
									color: #FFFFFF;
									font-family: Microsoft YaHei-3970(82674968);
									border-radius: 5px;
								}

								.el-date-editor--datetimerange {
									padding: 3px 8px;
									width: 370px;
								}

								.el-select {
									width: 130px;
								}
							}

							.export {
								background: #3762FE;
								border-color: #3762FE;
								font-size: 14px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
								margin-bottom: 22px;
							}
						}

						.btn-cell-blue {
							color: #2B4CFE;
							border: none;
							font-size: 18px;
						}

						.btn-cell-black {
							color: #53575A;
							border: none;
							font-size: 18px;
						}

						.txt-cell-green {
							color: #67C23A;
						}

						.txt-cell-red {
							color: #F56C6C;
						}

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 20px;
							padding-right: 100px;

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 400px;
			height: 320px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				background: #E6EBFE;
				border-radius: 10px 10px 0px 0px;
				font-weight: bold;
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item {
					margin-bottom: 0;

					.el-form-item__label,
					.el-form-item__content {
						font-size: 16px;
						font-family: Microsoft YaHei-3970(82674968);
						color: #53575A;
					}

					.el-input__inner {
						width: 100px;
					}
				}
			}
		}

	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 140px;
	}

	.el-form-item {
		margin-bottom: 10px;
	}

	.create-link {
		cursor: pointer;
		color: #0000ff;
		font-size: 18px;
	}

	.create-link:hover {
		font-size: 20px;
		text-decoration: underline;
	}
</style>
