<template>
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="pagination" :model="tableFrom" :label-width="labelWidth" :label-position="labelPosition"
				@submit.native.prevent>
				<Row type="flex" >
					<Col class="ivu-text-left mr">
					<FormItem label="员工：">
						<Select v-model="tableFrom.work_member_id" style="width: 250px">
							<Option value="">全部</Option>
							<Option v-for="item in ygList" :key="item.id" :value="item.userid">{{ item.name }}</Option>
						</Select>
						<Button type="primary" class="ml10 search" @click="userSearchs">搜索</Button>
					</FormItem>
					</Col>
				</Row>
			</Form>
			<Table :columns="columns1" :data="tableList" ref="table" :loading="loading" highlight-row
				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row, index }" slot="groupname">
					{{row.checkin_option.groupname}}
				</template>
				<!-- workdays -->
				<template slot-scope="{ row, index }" slot="checkin_time">
					{{ showDate(row.checkin_time)}}
				</template>
				<template slot-scope="{ row, index }" slot="checkin_type">
					{{ row.checkin_type == 1?'上班打卡': '下班打卡'}}
				</template>
				<template slot-scope="{ row, index }" slot="sch_checkin_time">
					{{ showDate(row.sch_checkin_time)}}
				</template>
				<template slot-scope="{ row, index }" slot="status">
					{{ row.status == 1?'正常': (row.status == 2 ? '迟到': (row.status == 3 ?'早退': '未打卡'))}}
				</template>
				<template slot-scope="{ row, index }" slot="time">
					<!-- <span> {{row.add_time | formatDate}}</span> -->
					<div v-for="time in row.time" style="margin-top: 10px;">
						<span>{{time.work_sec| showTime}} </span> - <span>{{time.off_work_sec | showTime}}</span>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="add_time">
					<span> {{row.add_time | formatDate}}</span>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
					:page-size="tableFrom.limit" />
			</div>
		</Card>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getClasses,
		getCheckList
	} from '@/api/check';
	import {
		formatDate
	} from '@/utils/validate';
	import {
		getYgList
	} from "@/api/check";
	import Setting from "@/setting";
	export default {
		name: 'storeCoupon',
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, 'yyyy-MM-dd hh:mm');
				}
			},
			showWd(day) {
				let str = '星期日'
				if(day) {
					switch (day*1){
						case 1:
							str = '星期一'
							break;
						case 2:
							str = '星期二'
							break;
						case 3:
							str = '星期三'
							break;
						case 4:
							str = '星期四'
							break;
						case  5:
							str = '星期五'
							break;
						case 6:
							str = '星期六'
							break;
						case  0:
							str = '星期日'
							break;
						default:
							break;
					}
				}
				return str
			}
		},
		filters: {
			showTime(seconds) {
				if(seconds ) {
					var hours = Math.floor(seconds / 3600);
					var minutes = Math.floor((seconds % 3600) / 60);
					return (hours > 9?hours: '0' + hours ) + ": " + (minutes>9?minutes: '0'+ minutes) 
				}
			}
		},
		data() {
			return {
				roterPre: Setting.roterPre,
				loading: false,
				ygList:[],
				columns1: [{
						title: 'ID',
						key: 'id',
						width: 80
					},
					{
						title: '员工',
						key: 'name',
						minWidth: 80
					},
					{
						title: '打卡类型',
						slot: 'checkin_type',
						minWidth: 100
					},
					{
						title: '打卡奖励',
						key: 'reward_price',
						minWidth: 80
					},
					{
						title: '打卡时间',
						slot: 'sch_checkin_time',
						minWidth: 130
					},
					{
						title: '实际打卡时间',
						slot: 'checkin_time',
						minWidth: 130
					},
					{
						title: '打卡情况',
						slot: 'status',
						minWidth: 80
					},
				],
				tableFrom: {
					page: 1,
					limit: 15,
					work_member_id:''
				},
				tableList: [],
				total: 0,
			}
		},
		created() {
			this.getList();
			this.getygList();
		},
		computed: {
			labelWidth() {
				return this.isMobile ? undefined : 50;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		methods: {
			getygList() {
				getYgList({
					page: 1,
					limit: 1000
				}).then(res => {
					console.log(res)
					this.ygList = res.data.list
				})
			},
			showDate(timestamp) {
				  var date = new Date(timestamp*1000);
				  var year = date.getFullYear();
				  var month = ("0" + (date.getMonth() + 1)).slice(-2);
				  var day = ("0" + date.getDate()).slice(-2);
				  var hours = ("0" + date.getHours()).slice(-2);
				  var minutes = ("0" + date.getMinutes()).slice(-2);
				  var seconds = ("0" + date.getSeconds()).slice(-2);
				  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},
			// 列表
			getList() {
				this.loading = true;
				getCheckList(this.tableFrom).then(async res => {
					let data = res.data
					this.tableList = data.data;
					this.total = res.data.count;
					this.loading = false;
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				});
			},
			pageChange(index) {
				this.tableFrom.page = index;
				this.getList();
			},
			// 表格搜索
			userSearchs() {
				this.tableFrom.page = 1;
				this.getList();
			},
		}
	}
</script>

<style scoped>
	.ivu-col:nth-of-type(1) .ivu-form-item .ivu-form-item-label {
		width: 80px !important;
	}

	.ivu-col:nth-of-type(1) .ivu-form-item .ivu-form-item-content {
		margin-left: 80px !important;
	}
</style>