<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="专业" prop="LoreID">
				<el-select v-model="queryParams.LoreID" placeholder="请选择专业" clearable>
					<el-option v-for="dict in dict.type.jxjy_ks_pxzy" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="题型" prop="TestTypeID">
				<el-select v-model="queryParams.TestTypeID" placeholder="请选择题型" clearable>
					<el-option v-for="dict in dict.type.jxjy_ks_tx" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="试题难度" prop="TestDiff">
				<el-input v-model="queryParams.TestDiff" placeholder="请输入试题难度" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['jxjy:RubricInfo:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['jxjy:RubricInfo:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['jxjy:RubricInfo:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
					v-hasPermi="['jxjy:RubricInfo:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="RubricInfoList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column  align="center" type="index" />
			<el-table-column label="题型" align="center" prop="TestTypeID">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.jxjy_ks_tx" :value="scope.row.TestTypeID" />
				</template>
			</el-table-column>
			<el-table-column label="试题内容" align="center" prop="TestContent" width="500px" />
			<el-table-column label="创建者" align="center" prop="createBy" />
			<el-table-column label="专业" align="center" prop="LoreID">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.jxjy_ks_pxzy" :value="scope.row.LoreID" />
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['jxjy:RubricInfo:edit']">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
						v-hasPermi="['jxjy:RubricInfo:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 添加或修改题库列对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="60vw" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="培训类别：" prop="SubjectID">
							<el-select v-model="form.SubjectID" disabled placeholder="请选择培训类别">
								<el-option v-for="dict in dict.type.jxjy_zhuanye" :key="dict.value" :label="dict.label"
									:value="parseInt(dict.value)"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="专业：" prop="LoreID">
							<el-select v-model="form.LoreID" placeholder="请选择专业">
								<el-option v-for="dict in dict.type.jxjy_ks_pxzy" :key="dict.value" :label="dict.label"
									:value="parseInt(dict.value)"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="题型：" prop="TestTypeID">
							<el-select v-model="form.TestTypeID" placeholder="请选择题型" @change="changeType">
								<el-option v-for="dict in dict.type.jxjy_ks_tx" :key="dict.value" :label="dict.label"
									:value="parseInt(dict.value)"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="试题难度：" prop="TestDiff">
							<el-select v-model="form.TestDiff" placeholder="请选择试题难度">
								<el-option v-for="dict in dict.type.jxjy_stnd" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="选项数目：" prop="OptionNum">
							<!-- <el-input v-model="form.OptionNum" placeholder="请输入选项数目" /> -->
							<el-select v-model="form.OptionNum" placeholder="请选择题型" @change="chooseNum">
								<el-option v-for="dict in 5" :key="dict" :label="dict+1"
									:value="dict+1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="试题分数：" prop="TestMark">
							<el-input v-model="form.TestMark" placeholder="请输入试题分数" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="试题内容：" prop="TestContent">
							<el-input v-model="form.TestContent" type="textarea" placeholder="请输入试题内容" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-row :gutter="10" v-if="form.TestTypeID != 29">
							<el-col :span="2" style="font-weight:bold;">
								试题选项：
							</el-col>
							<el-col :span="22" v-if="form.TestTypeID == 27">
								<el-form-item label-width="0" prop="StandardAnswer">
									<div style="display: flex;align-items: center;margin-bottom: 18px;" v-for="v in form.OptionNum" :key="v">
										<el-radio v-model="form.StandardAnswer"  :label="abc[v-1]" @change="changeRadio"></el-radio>
										<el-form-item label-width="0" :prop="'tmList.'+(v-1)" :rules="{required: true,message: '请填写选项内容',trigger: ['blur', 'change']}">
											<el-input v-model="form.tmList[v-1]" type="textarea" placeholder="请输入" style="width: 40vw;" />
										</el-form-item>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="22" v-else>
								<el-form-item label-width="0" prop="daAn"> 
									<div v-for="v in form.OptionNum" :key="v">
										<el-checkbox v-model="form.checks[v-1]"  @change="chooseDa(v,$event)">
											 <div style="display: flex;align-items: center;margin-bottom: 18px;">
												{{abc[v-1]}} 
												<el-form-item label-width="0" :prop="'tmList.'+(v-1)" :rules="{required: true,message: '请填写选项内容',trigger: ['blur', 'change']}">
													<el-input v-model="form.tmList[v-1]" type="textarea" placeholder="请输入" style="width: 40vw;margin-left: 24px;" />
												</el-form-item>
											 </div>
										</el-checkbox>
									</div> 
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="10" v-else>
							<el-col :span="2" style="font-weight:bold;">
								标准答案：
							</el-col>
							<el-col :span="22">
								<el-form-item label-width="0" prop="StandardAnswer">
									<el-radio-group v-model="form.StandardAnswer" >
									    <el-radio :label="'正确'">正确</el-radio>
									    <el-radio :label="'错误'">错误</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="24">
						<el-form-item label="试题解析：" prop="TestParse">
							<el-input v-model="form.TestParse" type="textarea" placeholder="请输入内容" />
						</el-form-item>
					</el-col>
				</el-row> 
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listRubricInfo,
		getRubricInfo,
		delRubricInfo,
		addRubricInfo,
		updateRubricInfo
	} from "@/api/xiehui/jxjy/RubricInfo";

	export default {
		name: "RubricInfo",
		dicts: ['jxjy_ks_pxzy', 'jxjy_zhuanye', 'jxjy_ks_tx', 'jxjy_stnd'],
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 题库列表格数据
				RubricInfoList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					SubjectID: null,
					LoreID: null,
					TestTypeID: null,
					TestDiff: null,
					OptionNum: null,
					TestMark: null,
					TestContent: null,
					TestFileName: null,
					TestFile: null,
					OptionContent: null,
					StandardAnswer: null,
					TestParse: null,
					CreateUserID: null,
					CreateDate: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					LoreID:{
						required: true,
						message: '请选择专业',
						trigger: ['blur', 'change']
					},
					TestTypeID:{
						required: true,
						message: '请选择题型名称',
						trigger: ['blur', 'change']
					},
					TestDiff:{
						required: true,
						message: '请选择试题难度',
						trigger: ['blur', 'change']
					},
					OptionNum:{
						required: true,
						message: '请选择选项数目',
						trigger: ['blur', 'change']
					},
					TestMark:{
						required: true,
						message: '请选择选试题分数',
						trigger: ['blur', 'change']
					},
					TestContent:{
						required: true,
						message: '请输入试题内容',
						trigger: ['blur', 'change']
					},
					StandardAnswer:{
						required: true,
						message: '请选择正确答案',
						trigger: ['blur', 'change']
					},
					daAn:{
						required: true,
						message: '请选择正确答案',
						trigger: ['blur', 'change']
					}
					
				},
				abc:['A','B','C','D','E','F']
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询题库列列表 */
			getList() {
				this.loading = true;
				listRubricInfo(this.queryParams).then(response => {
					this.RubricInfoList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					RubricID: null,
					SubjectID: 8,
					LoreID: null,
					TestTypeID: 27,
					TestDiff: null,
					OptionNum: 4,
					TestMark: null,
					TestContent: null,
					TestFileName: null,
					TestFile: null,
					OptionContent: null,
					StandardAnswer: null,
					TestParse: null,
					CreateUserID: null,
					CreateDate: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					tmList:[null,null,null,null],
					daAn:[],
					checks:[false,false,false,false]
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.RubricID)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加题库列";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const RubricID = row.RubricID || this.ids
				getRubricInfo(RubricID).then(response => {
					this.form = response.data;
					if(this.form.TestTypeID == 28){
						//多选
						this.form.daAn = this.form.StandardAnswer.split("")
						this.form.tmList = this.form.OptionContent.split("|")
						this.form.checks = this.form.tmList.map((item,index)=>{
							return this.form.daAn.includes(this.abc[index])==true?true:false
						})
					}else if(this.form.TestTypeID == 27){
						//单选
						this.form.tmList = this.form.OptionContent.split("|")
					}
					this.open = true;
					this.title = "修改题库列";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if(this.form.TestTypeID == 29){
							//判断
							this.form.OptionContent = "正确|错误"
						}else if(this.form.TestTypeID == 28){
							//多选
							this.form.StandardAnswer = this.form.daAn.join("")
							this.form.OptionContent = this.form.tmList.join("|")
						}else{
							//单选
							this.form.OptionContent = this.form.tmList.join("|")
						}
						if (this.form.RubricID != null) {
							
							updateRubricInfo(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							 
							addRubricInfo(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const RubricIDs = row.RubricID || this.ids;
				this.$modal.confirm('是否确认删除题库列编号为"' + RubricIDs + '"的数据项？').then(function() {
					return delRubricInfo(RubricIDs);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('jxjy/RubricInfo/export', {
					...this.queryParams
				}, `RubricInfo_${new Date().getTime()}.xlsx`)
			},
			//选择题目数量
			chooseNum(){
				this.form.tmList = []
				for(let i=1;i<=this.form.OptionNum;i++ ){ 
					this.form.tmList.push(null)
				}
			},
			//多选答案选择
			chooseDa(i,e){
				if(e==true){
					this.form.daAn.push(this.abc[i-1])
					this.form.checks[i-1] = true 
				}else{
					this.form.checks[i-1] = false
					let index = this.form.daAn.findIndex(obj=> obj == this.abc[i-1]  )
					this.form.daAn.splice(index,1)
				}
				this.$forceUpdate()
				this.$refs["form"].validateField("daAn")
			},
			//切换试题类型
			changeType(){
				this.form.StandardAnswer = null
				this.form.daAn = []
				this.form.tmList = []
				this.form.checks = []
				for(let i=1;i<=this.form.OptionNum;i++ ){
					this.form.tmList.push(null)
					this.form.checks.push(false)
				}
			},
			//单选选择
			changeRadio(e){
				this.$refs["form"].validateField("StandardAnswer")
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .el-input.is-disabled .el-input__inner {
		background-color: #fff !important;
		color: #303133 !important
	}
	::v-deep .el-upload{
		display: block !important;
	}
</style>