<template>
    <div class="app-container">
      <el-row>
        <el-col :span="8">
          <h3>基本信息</h3>
          <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" status-icon>
            <el-form-item label="名称" prop="name">
              <el-input v-model="Form.name" style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label="时间限制" prop="limit">
              <el-input-number v-model="Form.limit" :min="0"></el-input-number>分钟
            </el-form-item>
            <el-form-item label="试卷信息">
              <div>
                单选题
                <span style="color:darkred;font-weight:bold">{{Form.danxuan_count}} 道</span>
                每道
                <el-input-number v-model="Form.danxuan_score" :min="0"></el-input-number>分
              </div>
              <div>
                多选题
                <span style="color:darkred;font-weight:bold">{{Form.duoxuan_count}} 道</span>
                每道
                <el-input-number v-model="Form.duoxuan_score" :min="0"></el-input-number>分
              </div>
              <div>
                判断题
                <span style="color:darkred;font-weight:bold">{{Form.panduan_count}} 道</span>
                每道
                <el-input-number v-model="Form.panduan_score" :min="0"></el-input-number>分
              </div>
              <div>
                总分
                <span style="color:darkred;font-weight:bold">{{Form.total_score}}</span>
              </div>
            </el-form-item>
            <el-form-item label="及格分数" prop="pass_score">
              <el-input-number v-model="Form.pass_score" :min="0"></el-input-number>分
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">保存</el-button>
              <el-button type="warning" @click="goBack()">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="16">
          <h3>选题信息</h3>
          <el-button type="primary" @click="handleChoose" icon="el-icon-plus">选择试题</el-button>
          <div v-for="(item, index) in questions">
            <h4>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(index)"
                icon="el-icon-delete"
              ></el-button>
              {{ index+1 }} -
              <el-tag>{{item.type}}</el-tag>
              {{ item.name }}
              <span>(正确答案:{{item.right}})</span>
            </h4>
            <div v-for="(value, name) in item.options">{{ name }}: {{ value }}</div>
          </div>
        </el-col>
      </el-row>
      <Questionchoose v-bind:chooseVisible="chooseVisible" @closeDg="closeDg" @choseQ="choseQ"></Questionchoose>
    </div>
  </template>
  <script>
  import { getQuestioncatList, updatePaper,getPaperDetail } from "@/api/exam";
  import { genTree } from "@/utils";
  import Questionchoose from "@/views/exam/questionChoose";
  export default {
    components: { Questionchoose },
    data() {
      return {
        questions: [],
        Form: {
            name: "",
            limit: 60,
            total_score: 0,
            pass_score: 60,
            questions_: [],
            danxuan_score: 2,
            danxuan_count: 0,
            duoxuan_score: 4,
            duoxuan_count: 0,
            panduan_score: 2,
            panduan_count: 0
        },
        submitLoding: false,
        rules: {
          name: [
            { required: true, message: "名称不能为空", trigger: "blur" }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          limit: [
            { required: true, message: "时间限制不能为空" },
            { type: "number", message: "时间限制必须是数字" }
          ],
          pass_score: [
            { required: true, message: "及格分数不能为空" },
            { type: "number", message: "及格分数必须是数字" }
          ]
        },
        workscopeData: [],
        chooseVisible: false
      };
    },
    watch: {
      questions: "calScore"
    },
    created() {
      this.getQuestioncat();
      this.Form.id = this.$route.query.id  //接收参数
      this.getPaperDetail();
    },
    methods: {
        getQuestioncat() {
            getQuestioncatList().then(response => {
            this.workscopeData = genTree(response.data);
            });
        },
        getPaperDetail() {
            let that = this;
            getPaperDetail(this.Form.id).then(response => {
                that.Form = response.data;
                debugger;
                that.questions = response.data.questions_;
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
            if (valid) {
                this.submitLoding = true;
                updatePaper(this.Form.id,this.Form).then(response => {
                this.submitLoding = false;
                this.$message({
                    type: "success",
                    message: "编辑成功!"
                });
                this.goBack();
                }).catch(res=>{
                    this.submitLoding = false;
                });
            } else {
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        goBack() {
            this.$router.replace("/exam/testpaper/");
        },
        handleChoose() {
            this.chooseVisible = true;
        },
        closeDg(val) {
            this.chooseVisible = val;
        },
        choseQ(val) {
            this.questions = this.questions.concat(val);
        },
        handleDelete(val) {
            this.questions.splice(val, 1);
        },
        calScore() {
            let that = this;
            let danxuan_count = 0,
            duoxuan_count = 0,
            panduan_count = 0,
            questions = [];
            for (var i = 0, len = that.questions.length; i < len; i++) {
            var total_score = 0
            switch (that.questions[i].type) {
                case "单选":
                danxuan_count = danxuan_count + 1;
                total_score = that.Form.danxuan_score;
                break;
                case "多选":
                duoxuan_count = duoxuan_count + 1;
                total_score = that.Form.duoxuan_score;
                break;
                case "判断":
                panduan_count = panduan_count + 1;
                total_score = that.Form.panduan_score;
                break;
            }
            questions.push({question:that.questions[i].id,total_score:total_score})
            }
            that.Form.danxuan_count = danxuan_count;
            that.Form.duoxuan_count = duoxuan_count;
            that.Form.panduan_count = panduan_count;
            let form = that.Form;
            let score = form.danxuan_count * form.danxuan_score + form.duoxuan_count * form.duoxuan_score + form.panduan_count * form.panduan_score;
            that.Form.total_score = score;
            that.Form.questions_ = questions;
        }
    }
  };
  </script>