<template>
	<div>
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" title="打卡规则" hidden-breadcrumb></PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="tableFrom" :model="tableFrom" :label-width="labelWidth" :label-position="labelPosition"
				@submit.native.prevent>
				<Row type="flex">
					<Col v-bind="grid">
					<Button v-auth="['store-check-rule-add']" type="primary" icon="md-add" @click="add">添加打卡规则</Button>
					</Col>
				</Row>
			</Form>
			<Table :columns="columns1" :data="tableList" ref="table" class="mt25" :loading="loading" highlight-row
				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row, index }" slot="groupname">
					{{row.checkin_option.groupname}}
				</template>
				<template slot-scope="{ row, index }" slot="workdays">
					<!-- <el-tag v-for="witem in row.checkin_option.checkindate[0].workdays">{{witem | showWd}}</el-tag> -->
					<div v-for="witem in row.checkin_option.checkindate" class="jg">
						<div>
							<span>工作日：</span>
							<el-tag v-for="item in witem.workdays">{{item | showWd}}</el-tag>
						</div>
						<div class="flex">
							<div>
								<div v-for="itemx in witem.checkintime">
									<div>上班时间：{{itemx.work_sec| showTime}} 金额：{{itemx.start_price}}</div>
									<div>下班时间：{{itemx.off_work_sec | showTime}} 金额：{{itemx.end_price}}</div>
								</div>
							</div>
						</div>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<Icon type="md-checkmark" v-if="row.status === 1" color="#0092DC" size="14" />
					<Icon type="md-close" v-else color="#ed5565" size="14" />
				</template>
				<template slot-scope="{ row, index }" slot="add_time">
					<span> {{row.add_time | formatDate}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<a @click="couponDel(row,'删除打卡规则',index)">删除</a>
				</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>
		<!--表单编辑-->
		<edit-from :FromData="FromData" @changeType="changeType" ref="edits"></edit-from>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		checkGroupList,
		checkRuleList
	} from '@/api/check';
	import editFrom from '@/components/from/from';
	import {
		formatDate
	} from '@/utils/validate';
	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
			},
			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)
				}
			}
		},
		components: {
			editFrom
		},

		data() {
			return {
				roterPre: Setting.routePre,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24
				},
				loading: false,
				columns1: [{
						title: 'ID',
						key: 'id',
						width: 80
					},
					{
						title: '规则名称',
						slot: 'groupname',
						minWidth: 80
					},
					{
						title: '工作日',
						slot: 'workdays',
						minWidth: 500
					},
					{
						title: '添加时间',
						key: 'create_time',
						minWidth: 100
					},
					// {
					//     title: '折扣',
					//     key: 'discount_ratio',
					//     minWidth: 100
					// },
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						minWidth: 170
					}
				],
				tableFrom: {
					page: 1,
					limit: 15
				},
				tableList: [],
				total: 0,
				FromData: null
			}
		},
		created() {
			this.getList();
		},
		computed: {
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth() {
				return this.isMobile ? undefined : 90;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		methods: {
			// 删除
			couponDel(row, tit, num) {
				let delfromData = {
					title: tit,
					url: `work/deleteCheckRule`,
					method: 'POST',
					ids: {id: row.id}
				};
				this.$modalSure(delfromData).then((res) => {
					this.$Message.success(res.msg);
					this.tableList.splice(num, 1)
				}).catch(res => {
					this.$Message.error(res.msg);
				});
			},
			// 列表
			getList() {
				this.loading = true;

				checkRuleList(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();
			},
			changeType(data) {
				this.type = data;
			},
			// 添加
			add() {
				this.$router.push({
					path: "/store/check/rule/add"
				});
			},
		}
	}
</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;
	}

	.flex {
		display: flex;
	}

	.jg {
		border-bottom: 1px solid #999;
	}
	.jg:last-of-type {
		border-bottom: none;
	}
</style>