<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="shuibiaoId">
						<el-select v-model="drom_options.value" placeholder="请选择" class="my-select"
							@change="selectGetBuild(drom_options.value)">
							<el-option v-for="item in drom_options.builds" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</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="姓名" width="160">
						<template slot-scope="scope">{{ scope.row.user_name }}</template>
					</el-table-column>
					<el-table-column prop="stu_number" label="学号" align="center" width="180"></el-table-column>
					<el-table-column prop="room" label="充值宿舍号" :formatter="formatRoom" align="center" width="190">
					</el-table-column>
					<el-table-column prop="account" label="金额（元）" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="order_num" label="订单号" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="re_time" label="时间" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" align="center" width="260">
						<template slot-scope="scope">
							<el-button type="text" v-if="scope.row.handler_state == '未处理'"
								@click="handleShowDialog(scope.$index, scope.row)">未处理
							</el-button>
							<el-button type="text" class="exception" v-else>已处理</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="table-footer">
					<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>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drom_value: 0, // 项目编码
				drom: '水费', // 项目
				// 项目下拉列表
				drom_options: { // 下拉列表的数据绑定
					builds: [{
						value: 0,
						label: '水费'
					}, {
						value: 1,
						label: '电费'
					}],
					value: 0
				},
				currentPage: 1, // 余额列表当前页
				pageRows: 8, // 每页记录数
				tableData: [], // 异常列表
				rows_total: 0
			}
		},
		created() {
			// 获取请求参数
			let params = {
				page: this.currentPage,
				rows: this.pageRows
			}
			// 水费支付异常列表
			this.get_water_exception_list(params)
		},
		methods: {
			/**
			 * 格式化充值宿舍号
			 */
			formatRoom: (row, column, cellValue, index) => {
				// row: 行数据
				// column: 列属性
				// cellValue: 单元格数据值
				// index: 行索引，注意：2.3.9版本以后才有。
				if (cellValue.trim() == "")
					return "-----"
				else
					return cellValue
			},
			/**
			 * 列表改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				// console.log(val);
				this.currentPage = val
				var params = {
					page: this.currentPage,
					rows: this.pageRows
				}
				
				if (this.drom == '水费') {
					// 水费支付异常列表
					this.get_water_exception_list(params)
				} else if (this.drom == '电费') {
					// 电费支付异常列表
					this.get_electric_exception_list(params)
				}
			},
			/**
			 * 处理异常对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleShowDialog(index, row) {
				// this.detail_dialogFormVisible = true
				// console.log(index, row)
				var _this = this
				this.$confirm('是否现在处理？', '提示', {
						confirmButtonText: '确定处理',
						cancelButtonText: '暂不处理',
						type: 'warning'
					})
					.then(_ => {
						// console.log(_);
						if (_ == 'confirm') {
							// console.log(row.id);
							var params = {
								id: row.id
							}
							if (this.drom == '水费') {
								this.$axios.get('/jxch-smartmp/HotWaters/waterhandlerPayError.action', {
										params: params
									})
									.then(res => {
										// console.log(res.data);
										if (res.data.code == 1 && res.data.msg == '处理成功') {
											row.handler_state = '已处理'
											_this.$message.success('处理成功！');
										} else {
											_this.$message.warning('【处理】失败！');
										}
									})
									.catch(err => {
										// console.log(err);
										_this.$message.error('【处理】请求异常: ' + err);
									})
							} else if (this.drom == '电费') {
								this.$axios.get('/jxch-smartmp/HotWaters/waterhandlerElecPayError.action', {
										params: params
									})
									.then(res => {
										// console.log(res.data);
										if (res.data.code == 1 && res.data.msg == '处理成功') {
											row.handler_state = '已处理'
											_this.$message.success('处理成功！');
										} else {
											_this.$message.warning('【处理】失败！');
										}
									})
									.catch(err => {
										// console.log(err);
										_this.$message.error('【处理】请求异常: ' + err);
									})
							}
						}
					})
					.catch(_ => {
						console.log(_);
					});
			},
			/**
			 * 获取水费支付异常列表
			 */
			get_water_exception_list(params) {
				var _this = this
				// _this.tableData = []
				// _this.rows_total = 0
				this.$axios.get('/jxch-smartmp/HotWaters/waterfindErrorPayByNo.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.warning('【获取水费支付异常列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取水费支付异常列表】请求异常: ' + err);
					})
			},
			/**
			 * 获取电费支付异常列表
			 */
			get_electric_exception_list(params) {
				var _this = this
				// _this.tableData = []
				// _this.rows_total = 0
				this.$axios.get('/jxch-smartmp/HotWaters/waterfindErrorElcPayByNo.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.warning('【获取电费支付异常列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取电费支付异常列表】请求异常: ' + err);
					})
			},
			/**
			 * 选择项目
			 */
			selectGetBuild(vId) {
				// console.log(vId);
				this.drom_value = vId
				let obj = {};
				obj = this.drom_options.builds.find((item) => {
					return item.value === vId; //筛选出匹配数据
				});
				// console.log(obj);
				this.drom_options.value = obj.value
				this.drom_options.label = obj.label
				// 获取项目
				this.drom = this.drom_options.label

				// 获取请求参数
				let params = {
					page: this.currentPage,
					rows: this.pageRows
				}

				if (this.drom == '水费') {
					// 水费支付异常列表
					this.get_water_exception_list(params)
				} else if (this.drom == '电费') {
					// 电费支付异常列表
					this.get_electric_exception_list(params)
				} else {
					this.$message.error('选择了未知项目')
				}
			}
		}
	}
</script>

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