<template>
	<div style="font-size: 10px;">
		<div class="button-box clearflex">
			<el-button @click="dialogFormVisible=true" type="primary">新增考试计划</el-button>
		</div>

		<div class="search-term">
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline">

			</el-form>
		</div>

		<el-table :data="tableData" border stripe>
			<el-table-column label="考期序号" width="80" prop="planId" align="center"></el-table-column>
			<el-table-column label="考试分期" prop="name" width="120">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" size="small" v-model="row.name" type="textarea" />
					<span v-else>{{row.name}}</span>
				</template>
			</el-table-column>

			<el-table-column label="考试开始时间" prop="startAt" 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">
				<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 label="报名开始时间" prop="applyStartAt">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" v-model="row.applyStartAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
					 align="left"></el-date-picker>
					<span v-else>{{row.applyStartAt}}</span>
				</template>
			</el-table-column>

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

			<el-table-column label="打印准考证时间" prop="printStartAt">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" v-model="row.printStartAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
					 align="left"></el-date-picker>
					<span v-else>{{row.printStartAt}}</span>
				</template>
			</el-table-column>

			<el-table-column label="考点" prop="address">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" type="textarea" v-model="row.address" />
					<span v-else>{{row.address}}</span>
				</template>
			</el-table-column>

			<el-table-column label="已报名人数" prop="totalCounter" width="100" align="center">
				<template slot-scope="{row}">
					<el-button type="text" @click="initPlanDialog(row.planId)">{{row.counter}}</el-button>
				</template>
			</el-table-column>

			<el-table-column label="考试容纳人数" prop="totalCounter" width="110">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" type="number" v-model="row.totalCounter" />
					<span v-else>{{row.totalCounter}}</span>
				</template>
			</el-table-column>


			<el-table-column align="center" width="160" label="操作" class-name="small-padding fixed-width">
				<template slot-scope="{row, $index}">
					<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check" @click="confirmEdit(row, $index)">提交</el-button>
					<el-button v-if="row.edit" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row, $index)">取消</el-button>
					<el-button v-if="!row.edit" type="primary" size="small" icon="el-icon-edit" @click="initEdit(row, $index)">编辑</el-button>
					<el-button v-if="!row.edit" type="danger" size="small" icon="el-icon-delete" @click="deletePlan(row, $index)">删除</el-button>

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

		<el-dialog title="新增考试计划" center :visible.sync="dialogFormVisible" width="850px">
			<el-form :model="form" :rules="rules" label-width="150px" ref="elAdd"  :inline="true">

				<el-row :gutter="10" class="el-row">
					<el-col :span="12">
						<el-form-item label="考点" prop="address">
							<el-input v-model="form.address" type="text" style="width:220px"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="考试类型" prop="courseType">
							<el-input v-model="form.courseType" type="text" style="width:220px"></el-input>
						</el-form-item>
					</el-col>
				</el-row>


				<el-row :gutter="10" class="el-row">
					<el-col :span="12">
						<el-form-item label="考试分期" prop="name">
							<el-input v-model="form.name" type="text" style="width: 220px;"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">

						<el-form-item label="容纳人数" prop="totalCounter">
							<el-input v-model="form.totalCounter" type="text" style="width: 220px;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10" class="el-row">
					<el-col :span="12">
						<el-form-item label="考试开始时间" prop="startAt">
							<el-date-picker v-model="form.startAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="考试结束时间" prop="endAt">
							<el-date-picker v-model="form.endAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10" class="el-row">
					<el-col :span="12">

						<el-form-item label="报名开始时间" prop="applyStartAt">
							<el-date-picker v-model="form.applyStartAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="报名结束时间" prop="applyEndAt">
							<el-date-picker v-model="form.applyEndAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10" class="el-row">
					<el-col :span="12">
						<el-form-item label="打印准考证时间" prop="printStartAt">
							<el-date-picker v-model="form.printStartAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" align="left"></el-date-picker>
						</el-form-item>
					</el-col>

				</el-row>



			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="dialogFormVisible=false">取 消</el-button>
				<el-button @click="doAddCategory" type="primary">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="考试计划人员" center :visible.sync="planDialog" width="90%">
			<IUserApply :planId="planId"></IUserApply>
			
			
		</el-dialog>

	</div>
</template>

<script>
	import {
		postData,
		getTrainPlanList
	} from "@/api/xinpei";
	import {
		toDatetime
	} from "@/utils/date"
	import infoList from "@/mixins/infoList";
	import IUserApply from './components/IUserApply.vue'

	export default {
		name: "Api",
		components: {
			IUserApply
		},
		data() {
			return {
				listApi: getTrainPlanList,
				dialogFormVisible: false,
				planDialog: false,
				planId: 0,
				form: {
					planId: 0,
					name: '',
					totalCounter: '',
					startAt: '',
					endAt: '',
					address: '宁德',
					courseType: '施工现场专业人员',
					applyStartAt: '',
					applyEndAt: '',
					printStartAt: '',
				},
				rules: {
					name: [{
						required: true,
						message: "请输入考试计划",
						trigger: "blur"
					}],
					courseType: [{
						required: true,
						message: "请输入考试类型",
						trigger: "blur"
					}],
					address: [{
						required: true,
						message: "请输入考点",
						trigger: "blur"
					}],
					applyStartAt: [{
						required: true,
						message: "请输入申请开始时间",
						trigger: "blur"
					}],
					applyEndAt: [{
						required: true,
						message: "请输入申请结束时间",
						trigger: "blur"
					}],
					printStartAt: [{
						required: true,
						message: "请输入打印准考证时间",
						trigger: "blur"
					}],
					startAt: [{
						required: true,
						message: "请输入开始时间",
						trigger: "blur"
					}],
					totalCounter: [{
						required: true,
						message: "请输入容纳人数",
						trigger: "blur"
					}],
					endAt: [{
						required: true,
						message: "请输入结束时间",
						trigger: "blur"
					}],
				}
			};
		},
		mixins: [infoList],
		methods: {
			//条件搜索前端看此方法
			onSubmit() {
				this.page = 1;
				this.pageSize = 10;
				this.getTableData();
			},
			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;
			},
			doAddCategory() {
				this.$refs.elAdd.validate(async (valid) => {
					if (!valid) return;
					let param = Object.assign({}, this.form)
					param.totalCounter = +param.totalCounter
					postData("addTrainPlan", param).then(res => {
						if (res.code == 200) {
							this.$message.successMsg("新增成功", 1)
							this.dialogFormVisible = false
							this.getTableData()
						}
					});
				})
			},
			initPlanDialog(planId) {
				this.planId = planId
				this.planDialog = true
			},
			deletePlan(row, index) {
				this.$confirm("此操作将永久删除考试计划, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					postData("delTrainPlan", {
						planId: row.planId
					}).then(res => {
						if (res.code == 200) {
							this.$message.successMsg("删除成功", 1)
							this.tableData.splice(index, 1)
						}
					})
				})
			},
			confirmEdit(row) {
				let param = Object.assign({}, row)
				param.totalCounter = +param.totalCounter
				delete(param["temp"])
				postData("addTrainPlan", 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>
