<template>
	<div>
		<el-table ref="table" :data="data.slice( (page-1)*size, page*size)" :highlight-current-row="true" height="650px"
		 border>

			<el-table-column align="center" width="100">
				<template slot="header" slot-scope="scope">
					<el-checkbox class="returnCheck" :indeterminate="tableIsIndeterminate" :scope="scope" v-model="checkAll" @change="handleChange">全选</el-checkbox>
				</template>

				<template slot-scope="{row}">
					<el-checkbox v-model="row._selected" @change="tableCheckboxChange(row)"></el-checkbox>
				</template>
			</el-table-column>

			<el-table-column label="姓名" prop="nickname" min-width="70"> </el-table-column>
			<el-table-column label="身份证" prop="cardId" min-width="180"> </el-table-column>

			<el-table-column label="岗位" prop="courseName" min-width="120"> </el-table-column>

			<el-table-column label="座位号" prop="seat" min-width="80"> </el-table-column>

			<el-table-column label="准考证" prop="seat" min-width="90">
				<template slot-scope="{row}">
					<el-button v-if="row.certificateUrl==''" type="text" @click="printApplyCert( row )">新生成</el-button>
					<el-button v-else type="text" @click="printApplyCert( row )">再生成</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination :current-page="page" :page-size="size" :page-sizes="[10, 20, 30, 50, 100, 1000]" :style="{ float: 'right', padding: '20px' }"
		 :total="data.length" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, prev, pager, next, jumper">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: "Api",
		data() {
			return {
				page: 1,
				keyword: '',
				size: 10,
				listKey: 'userList',
				tableIsIndeterminate: false,
				checkAll: false

			};
		},
		props: ['data', 'checkboxId'],
		watch: {
			checkboxId() {

				let isAllTrue = this.data.every(
					item => {
						return !!item._selected
					}
				)
				let isAllFalse = this.data.every(
					item => {
						return !item._selected
					}
				)
				if (isAllTrue) {
					this.tableIsIndeterminate = false;
					this.checkAll = true;
				} else if (isAllFalse) {
					this.tableIsIndeterminate = false;
					this.checkAll = false;
				} else {
					this.checkAll = false;
					this.tableIsIndeterminate = true;
				}
			}
		},
		methods: {
			handleChange(val) {
				let that = this
				if (val) {
					this.$emit('handleSelectAll', this.listKey)
					this.tableIsIndeterminate = false;
				} else {
					this.$emit('handleSelectNull', this.listKey)
					this.tableIsIndeterminate = false;
				}
				this.$forceUpdate()
			},
			tableCheckboxChange(e) {
				let that = this
				let isAllTrue = that.data.every(
					item => {
						return !!item._selected
					}
				)
				let isAllFalse = that.data.every(
					item => {
						return !item._selected
					}
				)
				if (isAllTrue) {
					this.tableIsIndeterminate = false;
					this.checkAll = true;
				} else if (isAllFalse) {
					this.tableIsIndeterminate = false;
					this.checkAll = false;
				} else {
					this.checkAll = false;
					this.tableIsIndeterminate = true;
				}
				this.$forceUpdate()

			},
			dropUser(item, index) {
				item.index = index
				this.$emit("drop", item)

			},
			printApplyCert(row) {
				this.$emit("print", row)
			},
			handleSizeChange(val) {
				this.size = val
			},
			handleCurrentChange(val) {
				this.page = val
			}
		}
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

	.warning {
		color: #dc143c;
	}

	.el-checkbox.returnCheck .el-checkbox__input+.el-checkbox__label,
	.el-checkbox.returnCheck .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #909399;
		font: 12px "Helvetica Neue";
		font-weight: bold;
	}

	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.1);
	}
</style>
