<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">充值记录</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="" class="riqi">
						<el-date-picker v-model="select_datetime" type="daterange" range-separator="至"
							@change="dateChange" start-placeholder="开始日期" end-placeholder="结束日期"
							value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="" class="shuibiaoId">
						<el-input v-model="searchformUser" clearable placeholder="请输入户号/联系人/手机号"></el-input>
					</el-form-item>
					<el-form-item label="" class="zhuangtai">
						<el-select v-model="selectItem.value" clearable placeholder="支付状态" @change="getItem">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-document" @click="onExport">导出</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div class="">
					<span class="item">总计：<span class="green_txt">{{ amount }}</span>元</span> <span
						class="item">总交易笔数：<span class="green_txt">{{ total_times }}</span>笔</span> <span
						class="item">次均额：<span class="green_txt">{{ avg }}</span>元</span>
				</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row>
					<el-table-column align="center" label="序号" type="index" :index="indexMethod" width="100px">
					</el-table-column>
					<el-table-column align="center" label="户号">
						<template slot-scope="scope">{{ scope.row.card_number }}</template>
					</el-table-column>
					<el-table-column prop="user_name" label="联系人" align="center"></el-table-column>
					<el-table-column prop="order_num" label="交易流水号" align="center"></el-table-column>
					<el-table-column prop="balance" label="充值前余额" align="center" :formatter="formatBalance">
					</el-table-column>
					<el-table-column prop="account" label="支付余额（元）" align="center" :formatter="formatBalance"
						show-overflow-tooltip></el-table-column>
					<!-- <el-table-column prop="account" label="到账余额（元）" align="center" :formatter="formatBalance"
						show-overflow-tooltip></el-table-column> -->
					<el-table-column label="支付状态" align="center">
						<template slot-scope="scope">
							<el-tag class="green_font" v-if="scope.row.pay_state == 2" type="text"
								@click="handleShowDialog(scope.$index, scope.row)">
								已到账
							</el-tag>
							<el-tag class="red_font" v-else-if="scope.row.pay_state == 1" type="text"
								@click="handleShowDialog(scope.$index, scope.row)">
								未到账
							</el-tag>
							<el-tag class="red_font" v-else="scope.row.pay_state == 0" type="text"
								@click="handleShowDialog(scope.$index, scope.row)">
								未支付
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="re_time" label="支付时间" align="center" width="200px"></el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
							:hide-on-single-page="true" :page-size="pageRows" :total="rows_total"
							@current-change="handleCurrentChange"></el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 支付状态对话框 -->
				<el-dialog title="支付状态" :visible.sync="viewdialogFormVisible" :close-on-click-modal="false"
					:close-on-press-escape="false" width="500px" top="0vh" class="my-dialog">
					<hr
						style="width:100%; position:absolute; top:60px; left:0px; background-color:#CCCCCC; height:1px; border:0;">
					<div class="desc">
						<span class="lab">联系人：</span>
						<span class="con">{{ showOrderStatus.userName }}</span>
					</div>
					<div class="desc">
						<span class="lab">支付情况：</span>
						<span class="con">{{ showOrderStatus.orderState }}</span>
					</div>
					<div class="desc">
						<span class="lab">现账户余额：</span>
						<span class="con">{{ showOrderStatus.balance }}</span>
					</div>
					<span class="seal-result" v-if="showOrderStatus.result == 0">已支付</span>
					<span class="seal-result seal-result-fail" v-else-if="showOrderStatus.result == 1">未支付</span>
					<span v-else="showOrderStatus.result == -1"></span>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0.0.toFixed(2),
				total_times: 0,
				avg: 0.0.toFixed(2),
				select_datetime: [],
				startTime: '',
				endTime: '',
				options: [{
					value: 2,
					label: '已到账'
				}, {
					value: 1,
					label: '未到账'
				}, {
					value: 0,
					label: '未支付'
				}],
				selectItem: {
					value: '',
					label: ''
				},
				searchformUser: '', // 查找的姓名
				select_month: '', // 选择的月份
				// 余额列表
				tableData: [], // 余额列表
				rows_total: 0, // 余额列表总记录数
				currentPage: 1, // 余额列表当前页
				pageRows: 8, // 每页记录数
				viewdialogFormVisible: false,
				showOrderStatus: {
					userName: '',
					orderState: '',
					balance: 0,
					result: -1
				}
			}
		},
		created() {
			// 获取总金额
			// this.get_total_amount()
			// 获取余额列表
			let params = {
				page: this.currentPage,
				rows: this.pageRows
			}

			// 初始化日期为今天天 至 明天
			this.initDate()
		},
		methods: {
			/**
			 * 订单详情
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleShowDialog(index, row) {
				// console.log(index, row)
				// 显示支付状态对话框
				this.viewdialogFormVisible = true

				// 获取订单状态
				this.get_order_state(row.user_name, row.stu_number, row.order_num)
			},
			/**
			 * 获取订单状态
			 * @param {Object} userName
			 * @param {Object} orderNo
			 */
			get_order_state(userName, stu_number, orderNo) {
				// 组合参数
				let formData = new FormData();
				formData.append("orderNo", orderNo);
				formData.append("stu_number", stu_number);

				this.showOrderStatus = {
					userName: '',
					orderState: '',
					balance: 0,
					result: -1
				}

				var _this = this;
				this.$axios.post('/jxch-smartmp/HotWaters/wpqueryOrder.action', formData)
					.then(res => {
						// console.log(res.data);
						if (res.data.code == 200) {
							// _this.$message.success('数据加载成功！');
							_this.showOrderStatus.result = 0
						} else if (res.data.code == 205) {
							_this.showOrderStatus.result = 1
						} else if (res.data.code == 520) {
							_this.showOrderStatus.result = -1
						} else {
							_this.showOrderStatus.result = -1
							_this.$message.warning('【获取订单状态】暂无数据！');
						}
						_this.showOrderStatus.userName = userName;
						_this.showOrderStatus.balance = res.data.balance.toFixed(2);
						_this.showOrderStatus.orderState = res.data.message;
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取订单状态】请求异常: ' + err);
					})
			},
			/**
			 * 获取参数
			 * @param {Object} e
			 */
			getItem(e) {
				if (typeof e == 'number' && e == 2) {
					this.selectItem.value = this.options[0].value
					this.selectItem.label = this.options[0].label
				} else if (typeof e == 'number' && e == 1) {
					this.selectItem.value = this.options[1].value
					this.selectItem.label = this.options[1].label
				} else if (typeof e == 'number' && e == 0) {
					this.selectItem.value = this.options[2].value
					this.selectItem.label = this.options[2].label
				} else {
					this.selectItem = {
						value: '',
						label: ''
					}
				}

				// console.log(typeof(this.selectItem));
				// console.log(this.selectItem);
			},
			/**
			 * 序号的计算
			 */
			indexMethod(index) {
				return (this.currentPage - 1) * 8 + index + 1;
			},
			/**
			 * 格式化列数据
			 */
			formatBalance: (row, column, cellValue, index) => {
				// row: 行数据
				// column: 列属性
				// cellValue: 单元格数据值
				// index: 行索引，注意：2.3.9版本以后才有。
				return cellValue.toFixed(2)
			},
			formatStatus: (row, column, cellValue, index) => {
				// row: 行数据
				// column: 列属性
				// cellValue: 单元格数据值
				// index: 行索引，注意：2.3.9版本以后才有。
				// 0：未支付，1：未到账，2：已到账
				if (cellValue == 2) {
					return '已到账'
				} else if (cellValue == 1) {
					return '未到账'
				} else if (cellValue == 0) {
					return '未支付'
				} else {
					return '未知'
				}
			},
			/**
			 * 充值记录列表
			 */
			get_amount_list(params) {
				var _this = this
				// _this.tableData = []
				// _this.rows_total = 0
				this.$axios.get('/jxch-smartmp/HotWaters/waterqueryRe.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total

							_this.amount = res.data.totalAccount.toFixed(2)
							_this.total_times = res.data.total
							_this.avg = res.data.avgAccount.toFixed(2)
						} else {
							_this.$message.success('【充值记录列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【充值记录列表】请求异常: ' + err);
					})
			},
			/**
			 * 充值记录列表改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				// console.log(val);
				this.currentPage = val
				var params = {
					page: this.currentPage,
					rows: this.pageRows,
				}
				if (this.startTime != '' && typeof(this.startTime) != 'undefined') {
					params.begin_time = this.startTime
				}
				if (this.endTime != '' && typeof(this.endTime) != 'undefined') {
					params.end_time = this.endTime
				}
				if (this.searchformUser != '' && typeof(this.searchformUser) != 'undefined') {
					params.user_name = this.searchformUser
				}
				if (typeof this.selectItem.value == 'number' && this.selectItem.label != '') {
					params.value = this.selectItem.value
					// params.label = this.selectItem.label
				}

				// 获取充值记录列表
				this.get_amount_list(params)
			},
			/**
			 * 初始化日期时间
			 */
			initDate() {
				//当前设定的日期时间
				let d = new Date;
				var year1 = d.getFullYear(); // 获取当前年份
				var mon1 = d.getMonth() + 1; // 获取当前月份
				var day1 = d.getDate(); // 获取当前日

				//前一天设定的日期时间
				d.setTime(d.getTime() - 24 * 60 * 60 * 1000);
				var year2 = d.getFullYear(); // 获取当前年份
				var mon2 = d.getMonth() + 1; // 获取当前月份
				var day2 = d.getDate(); // 获取当前日

				this.startTime = this.getDate(year2, mon2, day2)
				this.endTime = this.getDate(year1, mon1, day1)

				this.select_datetime.push(this.startTime)
				this.select_datetime.push(this.endTime)

				// 显示列表
				this.handleCurrentChange(1)
			},
			/**
			 * 获取指定格式 年、月、日
			 * @param {Object} y
			 * @param {Object} m
			 * @param {Object} d
			 */
			getDate(y, m, d) {
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;

				return y + "-" + m + "-" + d;
			},
			/**
			 * 选择起止日期
			 * @param {Object} val
			 */
			dateChange(val) {
				this.startTime = val[0]
				this.endTime = val[1]

				if (this.startTime == this.endTime) {
					this.$message.error('起止日期不能为同一天！')
				} else {
					// 选择日期后，马上搜索
					// this.handleCurrentChange(1)
				}
			},
			/**
			 * 查找姓名对应的 余额列表
			 */
			onSearch() {
				this.currentPage = 1

				this.handleCurrentChange(this.currentPage)
			},
			/**
			 * 导出为Excel表格
			 */
			onExport() {
				var _this = this;
				let formData = new FormData();
				if (typeof _this.startTime != 'undefined' && _this.startTime != '') {
					formData.append("begin_time", _this.startTime);
				}
				if (typeof _this.endTime != 'undefined' && _this.endTime != '') {
					formData.append("end_time", _this.endTime);
				}
				this.$axios.post('/jxch-smartmp/HotWaters/waterre_toExcel.action', formData)
					.then(res => {
						if (typeof res.data.downurl != 'undefined' && res.data.downurl != '' && JSON
							.stringify(res.data) != '{}') {
							// console.log(res.data.downurl);
							window.open('https://jtishfw.ncjti.edu.cn/jxch-smartmp' + res.data.downurl);
						} else {
							_this.$message.error(res.data.message);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【导出表格】请求异常: ' + err);
					})
			},
			/**
			 * 获取查看记录列表
			 */
			get_view_list(params) {
				var _this = this
				_this.view_tableData = []
				// _this.view_rows_total = 0
				this.$axios.get('/jxch-smartmp/HotWaters/waterfindRecharge.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.view_tableData = res.data.rows
							_this.view_rows_total = res.data.total
						} else {
							_this.$message.success('【获取查看记录列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取查看记录列表】请求异常: ' + err);
					})
			}
		}
	}
</script>

<style scoped>
	@import url("congzhijilu.css");
</style>
