<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">当日消费：14879元</div>
				<el-link type="primary" class="xiaofei" @click="handleEdit()">年/月消费</el-link>
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="楼栋号：" class="shuibiaoId">
						<el-select v-model="drom_value" placeholder="请选择" class="my-select">
							<el-option v-for="item in drom_options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="宿舍号：" class="shuibiaoId">
						<el-select v-model="room_value" placeholder="请选择" class="my-select">
							<el-option v-for="item in room_options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="日期：" class="shuibiaoId">
						<el-select v-model="date_value" placeholder="请选择" class="my-select">
							<el-option v-for="item in date_options" :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%"
					@selection-change="handleSelectionChange" highlight-current-row>
					<el-table-column type="selection" label="全选" align="center" width="55"></el-table-column>
					<el-table-column label="学号" align="center">
						<template slot-scope="scope">{{ scope.row.id }}</template>
					</el-table-column>
					<el-table-column prop="stuName" label="姓名" align="center" ></el-table-column>
					<el-table-column prop="balance" label="消费金额（元）" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="drom" label="楼栋号" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="room" label="宿舍号" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="dt" label="消费时间" align="center" show-overflow-tooltip></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 class="export-table">
						<el-button type="primary" size="small" @click="toggleSelection()">表格导出</el-button>
					</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="view-balance">当日消费：{{ day_balance }}元</div>
						<div class="view-balance">当月消费：{{ month_balance }}元</div>
						<div class="view-balance">当年消费：{{ year_balance }}元</div>
						<div class="view-balance"></div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				day_balance: 88888,
				month_balance: 888888,
				year_balance: 8888888,
				drom_options: [{
					value: '0',
					label: '全部'
				},{
					value: '1',
					label: '1栋'
				}, {
					value: '2',
					label: '2栋'
				}, {
					value: '3',
					label: '3栋'
				}, {
					value: '4',
					label: '4栋'
				}],
				room_options: [{
					value: '0',
					label: '全部'
				}, {
					value: '1102',
					label: '1102'
				}, {
					value: '1103',
					label: '1103'
				}, {
					value: '1104',
					label: '1104'
				}],
				date_options: [{
					value: '0',
					label: '当天日期'
				}, {
					value: '2021-08-10',
					label: '2021-08-10'
				}, {
					value: '2021-09-20',
					label: '2021-09-20'
				}, {
					value: '2021-10-19',
					label: '2021-10-19'
				}],
				drom_value: '0',
				room_value: '0',
				date_value: '0',
				editdialogFormVisible: false,
				delDialogVisible: false,
				formLabelWidth: '120px',
				formInline: {
					user: '',
					options: [{
						value: '选项1',
						label: '全部'
					}, {
						value: '选项2',
						label: '黄金糕'
					}],
					value: '选项1'
				},
				tableData: [{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				},{
					id: '20140309010103',
					stuName: '吴亦凡',
					balance: '188',
					drom: '1栋',
					room: '1101',
					dt: '2021-01-01'
				}],
				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("shangjiaduizhang.css");
</style>
