<template>
	<div class="app-container">
		<div class="seetingsDiv" style="">
			<el-button type="primary" @click="dialogClassIVIsible=true">添加分类
			</el-button>
		</div>
		<el-table :data="testpaperlist" id="QuestionTable" border
			style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe=true>
			<el-table-column prop="date" label="ID" width="50">
				<template slot-scope="scope">
					<span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="分类名称">
				<template slot-scope="scope">
					<span>{{ scope.row.ClassTitle }}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<el-dropdown @command="(e)=>{handleCommand(e,scope.row.id)}">
						<span class="el-dropdown-link">
							操作<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="update">编辑</el-dropdown-item>
								<!-- <el-dropdown-item command="b">锁定</el-dropdown-item> -->
								<el-dropdown-item command="del">删除</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background @current-change="currentchange"
			style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.parameter.pageSize"
			layout="total,prev, pager, next" :total="Count">
		</el-pagination>
		<el-dialog title="分类维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="400px"
			:close-on-click-modal="false">
			<el-form ref="TestPaperClassInfo" :model="TestPaperClassInfo" label-width="70px">
				<el-form-item label="分类名称">
					<el-input v-model="TestPaperClassInfo.ClassTitle" placeholder="请输入分类名称"></el-input>
				</el-form-item>
			</el-form>
			<el-button @click="CreateTestPaperClassHealder" style="margin: 10px 0 0 0 ;float:right" type="primary">确定
			</el-button>
			<div style="clear: both;"></div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getTestPaperClassList,
		GetTestPaperClassById,
		UpdateTestPaperClass,
		DeleteTestPaperClass,
		CreateTestPaperClass
	} from '@/api/TestPaper'
	import {
		parseTime
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				parameter: {
					pageIndex: 1,
					pageSize: 12,
					sort: "id",
					sortOrder: 1,
					keyword: ""
				},
				Count: 0,
				testpaperlist: [],
				dialogClassIVIsible: false,
				TestPaperClassInfo: {
					id: 0,
					ParentId: 0,
					ClassTitle: "",
					Addtime: "",
					UpdateTime: "",
					State: 1
				},
			}
		},
		computed: {

		},
		created() {

		},
		mounted() {
			let ContentAreaHight = window.innerHeight - document.getElementById("QuestionTable").offsetTop;
			let lineNumber = ContentAreaHight - 50 - 40;
			this.parameter.pageSize = Math.floor(lineNumber / 49)
			this.getTestPaperClassListHeadler();
		},
		methods: {
			CreateTestPaperClassHealder() {
				if (this.TestPaperClassInfo.id == 0) {
					this.TestPaperClassInfo.Addtime = parseTime(new Date(), "");
					this.TestPaperClassInfo.Addtime = parseTime(new Date(), "");
					CreateTestPaperClass(this.TestPaperClassInfo).then(res => {
						this.$confirm(res.data.message, '消息')
						this.TestPaperClassInfo = {};
						this.getTestPaperClassListHeadler();
					})
				} else {
					UpdateTestPaperClass(this.TestPaperClassInfo).then(res => {
						this.$confirm(res.data.message, '消息')
						this.getTestPaperClassListHeadler();
					});
				}
			},
			getTestPaperClassListHeadler() {
				getTestPaperClassList(this.parameter).then(res => {
					this.testpaperlist = res.data.data;
					this.Count = res.data.totalCount;
				});
			},
			closeClassDialog() {
				this.getTestPaperClassListHeadler();
			},
			currentchange(page) {
				this.parameter.pageIndex = page;
				this.getTestPaperClassListHeadler();
			},
			//表格右边的操作按钮
			handleCommand(value, val) {
				let that = this;
				if (value == "update") {
					// alert("编辑操作"+val)
					this.dialogClassIVIsible = true;
					GetTestPaperClassById(val).then(res => {
						that.TestPaperClassInfo = res.data.data;
					});
				}
				if (value == "del") {
					this.$confirm('确定删除该分类？', '消息', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						callback: (action) => {
							if (action == "confirm") {
								DeleteTestPaperClass(val).then(res => {
									if (res.data.code == 200) {
										this.$confirm(res.data.message, '消息')
										this.getTestPaperClassListHeadler();
									}
								});
							}
						},
					})

				}
			},
		}
	}
</script>

<style>
	.seetingsDiv {
		width: 100%;
		height: 60px;
		background: #efefef;
		line-height: 60px;
		border-radius: 5px;
		box-shadow: 0 0 5px #cdcdcd;
	}
	.seetingsDiv button {
		background-color: #304156;
		border: 0px;
		margin-left: 10px;
		box-shadow: 0 0 5px #cdcdcd;
		float: right;
		margin-top: 12px;
		margin-right: 10px;
	}
</style>
