<template>
	<div class="pl10 pr10">
		<el-table ref="table" height="600px" :data="data" :highlight-current-row="true" border>
			<el-table-column align="center" width="95">
				<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" width="90"> </el-table-column>
			<el-table-column label="身份证" prop="cardId" width="165"> </el-table-column>
			<el-table-column label="报考岗位" prop="courseName" min-width="120"> </el-table-column>

			<el-table-column label="分期" prop="planName" min-width="100">
				<template v-slot="{row}">
					<span style="line-height: 28px;"> {{planName}}</span>
				</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>
	import {
		toDatetime,
		toDate
	} from "@/utils/date";
	import DropSearch from '@/components/select/DropSearch.vue';

	export default {
		name: "Api",
		data() {
			return {
				page: 1,
				size: 10,
				listKey: 'tableData',
				tableIsIndeterminate: false,
				checkAll: false

			};
		},
		props: ['data', 'planName', '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()

			},
			okTrainPlan(item) {
				this.searchInfo.planId = item.plan_id;
			},
			addUser(row, index) {
				row.index = index;
				let tableData = this.tableData
				this.$emit("add", row, (item) => {
					tableData.splice(index, 1)
				})
			},
			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>
