<template>
	<el-dialog
		:title="title"
		:visible.sync="open"
		width="60%"
		:before-close="handleClose">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="今天" name="toDay"></el-tab-pane>
			<el-tab-pane label="年" name="year"></el-tab-pane>
			<el-tab-pane label="月" name="month"></el-tab-pane>
		</el-tabs>

		<!-- 时间线 -->
		<el-timeline v-loading="loading">
				<el-timeline-item v-if="listData.length !== 0" v-for="(item, index) in listData" :key="index" :timestamp="parseTime(item.day, '{y}-{m}-{d}')" placement="top">
					<el-card>
						<h4>进入学校时间</h4>
						<p>{{ parseTime(item.inTime, '{y}-{m}-{d}') }}</p>

						<div v-if="item.outTime !== null">
							<h4>离开学校时间</h4>
							<p>{{ parseTime(item.outTime, '{y}-{m}-{d}') }}</p>
						</div>
					</el-card>
				</el-timeline-item>
				<el-empty v-if="listData.length === 0" :image-size="200"></el-empty>
		
		</el-timeline>
	</el-dialog>

</template>

<script>
import { listStudentInOutLog } from '@/api/system/access_log';
export default {
	name: 'StudentInoutLog',
	data() {
		return {
			open: false,
			activeName: 'toDay',
			title: '',
			form: {
				toDay: '',
			},
			loading: false,
			listData: []
		}
	},
	methods: {
		getList() {
			if (this.activeName === 'toDay') {
				this.form.toDay = this.parseTime(new Date(), '{y}-{m}-{d}')
				this.form.year = null
				this.form.month = null
			} else if (this.activeName === 'month') {
				this.form.month = this.parseTime(new Date(), '{m}')
				this.form.year = null
				this.form.toDay = null;
			} else if (this.activeName === 'year') {
				this.form.year = this.parseTime(new Date(), '{y}');
				this.form.toDay = null
				this.form.month = null
			}
			this.loading = true
			listStudentInOutLog(this.form).then(res => {
				console.log(res);
				this.listData = res.data;
			}).finally(() => {
				this.loading = false
			})
		},
		handleOpen(row) {
			this.title = row.studentName + '的进出记录';
			this.form.studentId = row.id
			this.open = true;
			this.getList();
		},
		handleClose() {
			this.open = false;
		},
		handleClick(tab, event) {
			
			this.getList();
		},
	},
}
</script>

<style>

</style>