<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">
				<div class="total_balance">余额共计：15898元</div>
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="姓名：" class="shuibiaoId">
						<el-input v-model="formInline.user" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查找</el-button>
					</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%"
					@selection-change="handleSelectionChange" highlight-current-row>
					<el-table-column align="center" label="学号" width="260">
						<template slot-scope="scope">{{ scope.row.id }}</template>
					</el-table-column>
					<el-table-column prop="stuName" label="姓名" align="center" width="400"></el-table-column>
					<el-table-column prop="balance" label="余额（元）" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" align="center" width="280">
						<el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">查看记录
						</el-button>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 编辑对话框 -->
				<el-dialog title="充值记录" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<div class="right-tip">共计：14578元</div>
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="筛选条件：">
							<el-select v-model="formInline.region" placeholder="月份">
								<el-option label="1月" value="shanghai"></el-option>
								<el-option label="2月" value="beijing"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
						@selection-change="handleSelectionChange" highlight-current-row>
						<el-table-column align="center" label="时间">
							<template slot-scope="scope">{{ scope.row.id }}</template>
						</el-table-column>
						<el-table-column align="center" prop="balance" label="金额" show-overflow-tooltip>
						</el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer">
						<div class="dialog-pages">
							<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
						</div>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				editdialogFormVisible: false,
				delDialogVisible: false,
				form: {
					id: 'KB580002652',
					drom: '18',
					room: '118'
				},
				formLabelWidth: '120px',
				formInline: {
					user: '',
					options: [{
						value: '选项1',
						label: '全部'
					}, {
						value: '选项2',
						label: '黄金糕'
					}],
					value: '选项1'
				},
				tableData: [{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188'
				}],
				multipleSelection: []
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!')
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath)
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath)
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row)
					})
				} else {
					this.$refs.multipleTable.clearSelection()
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			handleEdit(index, row) {
				this.editdialogFormVisible = true
				console.log(index, row)
			},
			handleDelete(index, row) {
				this.delDialogVisible = true
				console.log(index, row)
			}
		}
	}
</script>

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