<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" @change="calScore"></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"  @change="calScore"></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" @change="calScore"></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, createPaper } from "@/api/exam";
  import Questionchoose from "@/views/exam/questionChoose";
  export default {
    components: { Questionchoose },
    data() {
      return {
        questions: [],
        Form: {
            name: "",
            // workscope: null,
            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" }
          ],
          limit: [
            { required: true, message: "时间限制不能为空" },
            { type: "number", message: "时间限制必须是数字" }
          ],
          pass_score: [
            { required: true, message: "及格分数不能为空" },
            { type: "number", message: "及格分数必须是数字" }
          ]
        },
        workscopeData: [],
        chooseVisible: false
      };
    },
    watch: {
      questions: "calScore"
    },
    created() {
      this.getQuestioncat();
    },
    methods: {
      getQuestioncat() {
        getQuestioncatList().then(response => {
          this.workscopeData = response.data.results;
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.submitLoding = true;
            createPaper(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 danxuan_count = 0,
          duoxuan_count = 0,
          panduan_count = 0,
          questions = [];
        for (var i = 0, len = this.questions.length; i < len; i++) {
          var total_score = 0
          switch (this.questions[i].type) {
            case "单选":
              danxuan_count = danxuan_count + 1;
              total_score = this.Form.danxuan_score
              break;
            case "多选":
              duoxuan_count = duoxuan_count + 1;
              total_score = this.Form.duoxuan_score
              break;
            case "判断":
              panduan_count = panduan_count + 1;
              total_score = this.Form.panduan_score
              break;
          }
          questions.push({question:this.questions[i].id,total_score:total_score})
        }
        this.Form.danxuan_count = danxuan_count;
        this.Form.duoxuan_count = duoxuan_count;
        this.Form.panduan_count = panduan_count;
        let form = this.Form;
        let score = form.danxuan_count * form.danxuan_score + form.duoxuan_count * form.duoxuan_score + form.panduan_count * form.panduan_score;
        this.Form.total_score = score;
        this.Form.questions_ = questions;
      }
    }
  };
  </script>