<template>
	<div>
		<el-table :data="data" border stripe height="650px">
			<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="name" width="100px">
				<template slot-scope="{row}">
					<span> {{row.name}}</span>
				</template>
			</el-table-column>


			<el-table-column label="考试开始时间" prop="startAt" width="160px" align="center">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" v-model="row.startAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
					<span v-else>{{row.startAt}}</span>
				</template>
			</el-table-column>

			<el-table-column label="考试结束时间" prop="endAt" width="160px" align="center">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" v-model="row.endAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
					<span v-else>{{row.endAt}}</span>
				</template>
			</el-table-column>


			<el-table-column align="center" width="160px" label="操作" class-name="small-padding fixed-width">
				<template slot-scope="{row, $index}">
					<el-button type="success" size="small" icon="el-icon-circle-check" @click="selectExam(row)">查看</el-button>
					<el-button type="danger" size="small" icon="el-icon-delete" @click="deleteType(row, $index)">删除</el-button>

				</template>
			</el-table-column>
		</el-table>

	</div>
</template>

<script>
	import {
		postData,
		getTrainExamList
	} from "@/api/xinpei";
	import {
		toDatetime
	} from "@/utils/date"

	export default {
		name: "Api",
		data() {
			return {
				listApi: getTrainExamList,
				dialogFormVisible: false,
				tableIsIndeterminate: false,
				checkAll: false,
				listKey: 'examList',
				tableData: [],
				form: {
					id: 0,
					name: '',
					span: 6,
					icon: "i1",
					orderId: 1,
					content: '',
				},
				rules: {
					name: [{
						required: true,
						message: "请输入考试计划",
						trigger: "blur"
					}],
					address: [{
						required: true,
						message: "请输入考试地址",
						trigger: "blur"
					}],
					startAt: [{
						required: true,
						message: "请输入开始时间",
						trigger: "blur"
					}],
					endAt: [{
						required: true,
						message: "请输入结束时间",
						trigger: "blur"
					}],
				}
			};
		},
		props: ['planId', 'planName', '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()
			},
			cancelEdit(row, index) {
				row = Object.assign(row, row.temp);
				row.edit = false;
				delete(row["temp"]);
			},
			initEdit(row, index) {
				let form = Object.assign({}, row);
				row.edit = true;
				row.temp = form;
			},
			getTableData() {
				let param = {
					planId: this.planId
				}
				postData("getTrainExamList", param).then(res => {
					if (res.code == 200) {
						let list = res.data || []
						this.tableData = list.map(item => {
							item.edit = false
							return item
						});
					}
				});
			},
			selectExam(item) {
				this.$emit("selectExam", item)
			},
			doAddCategory() {
				let param = {
					planId: this.planId
				}
				this.$refs.elAdd.validate(async (valid) => {
					if (!valid) return;
					Object.assign(param, this.form)
					postData("addTrainExam", param).then(res => {
						if (res.code == 200) {
							this.$message.successMsg("新增成功", 1)
							this.dialogFormVisible = false
							this.getTableData()
						}
					});
				})
			},
			deleteType(row, index) {
				this.$confirm("此操作将永久删除分类, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					postData("delTrainExam", {
						examId: row.examId
					}).then(res => {
						if (res.code == 200) {
							this.$message.successMsg("删除成功", 1)
							this.tableData.splice(index, 1)
						}
					})
				})
			},
			confirmEdit(row) {
				let param = Object.assign({}, row)
				delete(param["temp"])
				postData("addTrainExam", param).then(res => {
					if (res.code == 200) {
						row.edit = false;
						delete(row["temp"])
						this.$message.successMsg('数据更新成功', 1);
					}
				});
			}
		},
		created() {
			this.getTableData();
		}
	};
</script>
<style scoped lang="scss">
	.button-box {
		padding: 10px 20px;

		.el-button {
			float: right;
		}
	}

	.el-tag--mini {
		margin-left: 5px;
	}

	.warning {
		color: #dc143c;
	}
</style>
