<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增题库')" />
	<th:block th:include="include :: summernote-css" />
	<th:block th:include="include :: element-css" />
	<th:block th:include="include :: select2-css" />
</head>
<style>
	.text {
		font-size: 14px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		width: 100%;
	}
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
		<div class="app-container">
			<el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="150px">
				<el-card>
					<el-form-item label="题目类型 " prop="quType">
						<el-select v-model="postForm.quType" :disabled="quTypeDisabled" class="filter-item" @change="handleTypeChange">
							<el-option
								v-for="item in quTypes"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="难度等级 " prop="levels">
						<el-select v-model="postForm.levels" class="filter-item">
							<el-option
								v-for="item in levels"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="归属题库" prop="repoIds">
						<el-select v-model="postForm.repoIds" multiple placeholder="请选择">
							<el-option th:each="item : ${repo}" th:text="${item.title}" th:label="${item.title}" th:value="${item.id}"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="题目内容" prop="content">
						<el-input v-model="postForm.content" type="textarea" />
					</el-form-item>
					<el-form-item label="整题解析" prop="oriPrice">
						<el-input v-model="postForm.analysis" :precision="1" :max="999999" type="textarea" />
					</el-form-item>
				</el-card>
				<div v-if="postForm.quType!==4" class="filter-container" style="margin-top: 25px">
					<el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd">
						添加
					</el-button>
					<el-table
						:data="postForm.answerList"
						:border="true"
						style="width: 100%;margin-top: 25px"
					>
						<el-table-column
							label="是否答案"
							width="120"
							align="center"
						>
							<template v-slot="scope">
								<el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column
							label="答案内容"
						>
							<template v-slot="scope">
								<el-input v-model="scope.row.content" type="textarea" />
							</template>
						</el-table-column>

						<el-table-column
							label="答案解析"
						>
							<template v-slot="scope">
								<el-input v-model="scope.row.analysis" type="textarea" />
							</template>
						</el-table-column>

						<el-table-column
							label="操作"
							align="center"
							width="100px"
						>
							<template v-slot="scope">
								<el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
							</template>
						</el-table-column>

					</el-table>

				</div>
				<div style="margin-top: 20px">
					<el-button type="primary" icon="el-icon-check" @click="submitForm">保存</el-button>
					<el-button type="info" icon="el-icon-back" onclick="closeItem()">返回</el-button>
				</div>
			</el-form>

		</div>
	</div>
<!--	<div class="row">-->
<!--		<div class="col-sm-offset-5 col-sm-10">-->
<!--			<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;-->
<!--			<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>-->
<!--		</div>-->
<!--	</div>-->
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: summernote-js" />
	<th:block th:include="include :: element-js" />
	<th:block th:include="include :: select2-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/repo";
		$("#form-repo-add").validate({
			focusCleanup: true
		});
		function submitHandler() {
			console.log($('#form-repo-add').serialize())
	        // if ($.validate.form()) {
			// 	$.operate.saveTab(prefix + "/add", $('#form-repo-add').serialize());
	        // }
	    }
		$(function() {
			$('#repoIds').select2({
				placeholder: "归属题库",
				allowClear: true
			});
		})
		var app = new Vue({
			el: '#app',
			data: {
				quTypeDisabled: false,
				itemImage: true,
				levels: [
					{ value: 1, label: '普通' },
					{ value: 2, label: '较难' }
				],

				quTypes: [{
					value: 1,
					label: '单选题'
				}, {
					value: 2,
					label: '多选题'
				},
				{
					value: 3,
					label: '判断题'
				}
				],
				sysQuTypeOptions:[],//题库类型
				postForm: {
					repoIds: [],
					tagList: [],
					answerList: []
				},
				rules: {
					content: [
						{ required: true, message: '题目内容不能为空！' }
					],

					quType: [
						{ required: true, message: '题目类型不能为空！' }
					],

					levels: [
						{ required: true, message: '必须选择难度等级！' }
					],

					repoIds: [
						{ required: true, message: '至少要选择一个题库！' }
					]
				},
			},
			mounted(){
				this.getQuType()
				this.getLevelsList()
				this.getRepoIdsList()
			},
			methods: {
				//题库类型
				getQuType(){
					let dictData = {
						dictType:'sys_qu_type'
					}
					$.ajax({
						url: ctx + 'system/dict/data/dataList',
						type: "POST",
						data: dictData,
						success: (res) => {
							this.$nextTick(()=>{
								this.sysQuTypeOptions = res.data
							})

						},
						error: function() {
							// 请求失败时显示错误消息
						}
					});
				},
				//难度等级
				getLevelsList(){
					let dictData = {
						dictType:'sys_level'
					}
					$.ajax({
						url: ctx + 'system/dict/data/dataList',
						type: "POST",
						data: dictData,
						success:  (res) => {
							this.levelsList = res.data
						},
						error: function() {
							// 请求失败时显示错误消息
						}
					});
				},
				//归属题库
				getRepoIdsList(){
					let dictData = {
						dictType:'sys_level'
					}
					$.ajax({
						url: ctx + 'system/dict/data/dataList',
						type: "POST",
						data: dictData,
						success:  (res) => {
							this.repoIdsList = res.data
						},
						error: function() {
							// 请求失败时显示错误消息
						}
					});
				},
				handleTypeChange(v) {
					this.postForm.answerList = []
					if (v === 3) {
						this.postForm.answerList.push({ isRight: true, content: '正确', analysis: '' })
						this.postForm.answerList.push({ isRight: false, content: '错误', analysis: '' })
					}

					if (v === 1 || v === 2) {
						this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
						this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
						this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
						this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
					}
				},

				// 添加子项
				handleAdd() {
					this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
				},

				removeItem(index) {
					this.postForm.answerList.splice(index, 1)
				},
				// 选项卡成功回调执行事件（父窗体静默更新）
				successTabCallback(result) {
					if (result.data.code == web_status.SUCCESS) {
						var topWindow = $(window.parent.document);
						var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
						var topWindow = $('.RuoYi_iframe[data-id="' + currentId + '"]', topWindow)[0];
						if ($.common.isNotEmpty(topWindow) && $.common.isNotEmpty(currentId)) {
							var $contentWindow = topWindow.contentWindow;
							$contentWindow.$.modal.msgSuccess(result.data.msg);
							$contentWindow.$(".layui-layer-padding").removeAttr("style");
							if ($contentWindow.table.options.type == table_type.bootstrapTable) {
								$contentWindow.$.table.refresh();
							} else if ($contentWindow.table.options.type == table_type.bootstrapTreeTable) {
								$contentWindow.$.treeTable.refresh();
							}
						} else {
							$.modal.msgSuccess(result.data.msg);
						}
						$.modal.close();
						$.modal.closeTab();
					} else if (result.data.code == web_status.WARNING) {
						$.modal.alertWarning(result.data.msg)
					} else {
						$.modal.alertError(result.data.msg);
					}
					$.modal.closeLoading();
				},
				submitForm() {
					let rightCount = 0
					this.postForm.answerList.forEach(function(item) {
						if (item.isRight) {
							rightCount += 1
						}
					})
					if (this.postForm.quType === 1) {
						if (rightCount !== 1) {
							this.$message({
								message: '单选题答案只能有一个',
								type: 'warning'
							})

							return
						}
					}
					if (this.postForm.quType === 2) {
						if (rightCount < 2) {
							this.$message({
								message: '多选题至少要有两个正确答案！',
								type: 'warning'
							})

							return
						}
					}
					if (this.postForm.quType === 3) {
						if (rightCount !== 1) {
							this.$message({
								message: '判断题只能有一个正确项！',
								type: 'warning'
							})

							return
						}
					}
					this.$refs.postForm.validate((valid) => {
						if (!valid) {
							return
						}
						let that = this
						axios.post(ctx + 'system/qu/add', this.postForm)
								.then(function (response) {
									if (response.data.code === 0) {
										that.successTabCallback(response)
									}
								})
								.catch(function (error) {
									console.log(error);
								});
					})
				},
			},
		});
	</script>
</body>
</html>
