<template>
	<el-drawer v-model="drawVisible" size="60%" title="创建/编辑试卷">
		<el-container>
			<el-header style="height: 200px">
				<el-form
					:model="paperForm"
					label-width="100px"
					ref="paperFormRef"
				>
					<el-row>
						<el-col :span="24">
							<el-form-item label="试卷名" prop="name" required>
								<el-input
									v-model="paperForm.name"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="总分数"
								prop="total_score"
								required
							>
								<el-input-number
									v-model="paperForm.total_score"
									controls-position="right"
									:min="0"
									style="width: 100%"
									disabled
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="通过分数"
								prop="pass_score"
								required
							>
								<el-input-number
									v-model="paperForm.pass_score"
									controls-position="right"
									:min="1"
									style="width: 100%"
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="限时"
								prop="limit"
								required
							>
								<el-input-number
									v-model="paperForm.limit"
									controls-position="right"
									placeholder="分钟"
									:min="1"
									style="width: 100%"
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="单选分数"
								prop="danxuan_score"
								required
							>
								<el-input-number
									v-model="paperForm.danxuan_score"
									controls-position="right"
									:min="1"
									style="width: 100%"
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="多选分数"
								prop="duoxuan_score"
								required
							>
								<el-input-number
									v-model="paperForm.duoxuan_score"
									controls-position="right"
									:min="1"
									style="width: 100%"
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="判断分数"
								prop="panduan_score"
								required
							>
								<el-input-number
									v-model="paperForm.panduan_score"
									controls-position="right"
									:min="1"
									style="width: 100%"
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="单选数量"
								prop="danxuan_count"
								required
							>
								<el-input-number
									v-model="paperForm.danxuan_count"
									controls-position="right"
									:min="0"
									style="width: 100%"
									disabled
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="多选数量"
								prop="duoxuan_count"
								required
							>
								<el-input-number
									v-model="paperForm.duoxuan_count"
									controls-position="right"
									:min="0"
									style="width: 100%"
									disabled
								></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="判断数量"
								prop="panduan_count"
								required
							>
								<el-input-number
									v-model="paperForm.panduan_count"
									controls-position="right"
									:min="0"
									style="width: 100%"
									disabled
								></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-header>
			<el-main class="nopadding">
				<el-container>
					<el-header>
						<div class="left-panel">
							<el-button type="primary" @click="choseQuestion"
								>批量选择</el-button
							>
							<!-- <el-button type="primary" @click="uploadPaper">上传试题</el-button> -->
						</div>
					</el-header>

					<el-main class="nopadding">
						<scFormTable
							ref="table"
							v-model="paperForm.detail"
							row-key="id"
							hideAdd
							dragSort
							@update:modelValue = "computeDetail"
						>
							<el-table-column
							label="题型"
						>
                        <template #default="scope"
						>{{ qTypeEnum[scope.row.question_type]?.text }}
					</template></el-table-column>
							<el-table-column
								label="题目"
								prop="question_name"
								min-width="600px"
							></el-table-column>
							<el-table-column
								label="满分"
								prop="total_score"
							></el-table-column>
							<!-- <el-table-column label="操作">
								<template #default="scope">
									<el-button
										link
										size="small"
										@click="delQuestion(scope.row, scope.$index)"
										type="danger"
										icon="el-icon-delete"
									></el-button>
								</template>
							</el-table-column> -->
						</scFormTable>
					</el-main>
				</el-container>
			</el-main>
			<el-footer>
				<el-button
					type="primary"
					:loading="isSaving"
					@click="paperSubmit()"
					>保 存</el-button
				>
			</el-footer>
			<el-dialog title="选择题目" v-model="questionCVisible" width="90%">
				<Question
					style="height: 500px"
					ref="QuestionChoseRef"
				></Question>
				<template #footer>
					<el-button type="primary" @click="choseConfirm"
						>选择</el-button>
				</template>
			</el-dialog>
			<!-- <el-button type="primary" @click="handleChoose1" icon="el-icon-plus" style="margin-right: 10px;">上传试题</el-button>  -->
			<el-dialog
				v-model="impDialogVisible"
				title="上传试题"
				:left="'200px'"
				:close-on-click-modal="false"
				:height="'600px'"
				>
				<el-row>
				<el-col :span="12">
					<el-select v-model="impForm.question_types" style="margin-right: 10px;" placeholder="题目分类">  
						<el-option  
							v-for="item in type_list"  
							:key="item.id"  
							:label="item.name"  
							:value="item.name">  
						</el-option>
					</el-select> 
					</el-col> 
					<sc-upload-file
						v-model="impForm.doc_path"
						:on-success="handleUpSuccess"
						:multiple="false"
						:limit="10"
						tip="最多上传10个文件,单个文件不要超过10M"
						>
						<el-button type="primary" icon="el-icon-upload"> </el-button>
                </sc-upload-file>
              </el-row>
			  <div style="text-align: right">
            <el-button type="danger" @click="impDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="impDialogVisible=false">确认</el-button>
          </div>
        </el-dialog>
		</el-container>
	</el-drawer>
</template>
<script>
import Question from "./question";
import { qTypeEnum, qLevelEnum } from "@/utils/enum";
import { upload } from "@/api/model/edu"

const defaultForm = {
	name: "",
	danxuan_score: 2,
	duoxuan_score: 4,
	panduan_score: 2,
	danxuan_count: 0,
	duoxuan_count: 0,
	panduan_count: 0,
	total_score: 0,
	detail: [],
	limit: 10
};
export default {
	components: {
		Question,
	},
	data() {
		return {
			impForm:{
				doc_path:'',
				question_types:'',
              },
			qTypeEnum, qLevelEnum,
			mode: "add",
			isSaving: false,
			questionCVisible: false,
			impDialogVisible:false,
			drawVisible: false,
			paperForm: Object.assign({}, defaultForm),
			fileList: [],
			type_list: []		
		};
	},
	
	mounted() {},
	
	methods: {
		open(mode = "add", data) {
			if (mode == "add") {
				this.paperForm = Object.assign({}, defaultForm);
				this.paperForm.detail = [];
				this.drawVisible = true;
			} else {
				this.paperForm = Object.assign({}, data);
				this.drawVisible = true;
			}
		},
		handleUpSuccess(res, file, filelist) {
			let that =this;
				if (res.code == 201){
				that.impForm.doc_path = res.data.path;
				console.log(that.impForm.doc_path);
				} else {
					this.$message.error(res.msg);
			}
        },
      handleRemove() {
          this.fileList = [];
          this.impForm.file = '';
        },
		choseQuestion() {
			this.questionCVisible = true;
			this.$nextTick(() => {
				this.$refs.QuestionChoseRef.initChose();
			});
		},
		computeDetail() {
			let danxuan_count = 0;
			let duoxuan_count = 0;
			let panduan_count = 0;
			this.paperForm.detail.forEach((item) => {
				if (item.question_type == 10) {
					danxuan_count++;
				} else if (item.question_type == 20) {
					duoxuan_count++;
				} else if (item.question_type == 30) {
					panduan_count++;
				}
			});
			this.paperForm.danxuan_count = danxuan_count;
			this.paperForm.duoxuan_count = duoxuan_count;
			this.paperForm.panduan_count = panduan_count;
			this.paperForm.total_score =
				this.paperForm.danxuan_score * this.paperForm.danxuan_count +
				this.paperForm.duoxuan_score * this.paperForm.duoxuan_count +
				this.paperForm.panduan_score * this.paperForm.panduan_count;
		},
		delQuestion(row, index){
			console.log(index)
			this.paperForm.detail.splice(index,1);
			this.computeDetail();
		},
		uploadPaper(){
        	this.impDialogVisible = true;
      	},	
		choseConfirm() {
			let sdata = this.$refs.QuestionChoseRef.checkList;
			if (sdata.length == 0) {
				this.$message.error("请选择题目");
				return;
			}
			// 获取sort
			let sort = 1;
			if (this.paperForm.detail.length > 0) {
				sort =
					this.paperForm.detail[this.paperForm.detail.length - 1]
						.sort;
			}
			// 获取题目总分
			let data = [];
			sdata.forEach((item, index) => {
				var total_score = 0;
				if (item.type == 10) {
					total_score = this.paperForm.danxuan_score;
				} else if (item.type == 20) {
					total_score = this.paperForm.duoxuan_score;
				} else if (item.type == 30) {
					total_score = this.paperForm.panduan_score;
				}
				data.push({
					question: item.id,
					question_name: item.name,
					question_type: item.type,
					total_score: total_score,
					sort: sort + index,
				});
			});
			this.paperForm.detail.push(...data);

			this.questionCVisible = false;
			this.computeDetail();
		},
		paperSubmit() {
			this.$refs.paperFormRef.validate((valid) => {
				if (valid) {
					// 变更题目顺序
					this.paperForm.detail.forEach((item, index) => {
						item.sort = index + 1;
					});
					this.isSaving = true;
					if(this.paperForm.id){
						this.$API.edu.paper.update.req(this.paperForm.id, this.paperForm).then((res) => {
							this.isSaving = false;
							this.$message.success("修改成功");
							this.drawVisible = false;
							this.$emit("paperSubmit");
						}).catch(e=>{this.isSaving = false;})
					}else{
						this.$API.edu.paper.create.req(this.paperForm).then((res) => {
						this.isSaving = false;
						this.$message.success("保存成功");
						this.drawVisible = false;
						this.$emit("paperSubmit");
						}).catch(e=>{this.isSaving = false;})
					}
					}
					
				}); 
		},
	},
};
</script>
