<template>
  <div class="justify-wrapper">
    <el-form ref="addform" :model="formInfo" label-width="80px" :rules="rules">
      <el-form-item label="题干" prop="outline">
        <el-input
          v-model="formInfo.outline"
          type="textarea"
          autosize
          :style="{ width: '70%' }"
        />
      </el-form-item>
      <el-form-item label="困难程度" prop="difficulty">
        <el-select v-model="formInfo.difficulty" :style="{ width: '70%' }">
          <el-option
            v-for="item in difficulties"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="判断" prop="isTrue">
        <el-radio v-model="formInfo.isTrue" label="对" />
        <el-radio v-model="formInfo.isTrue" label="错" />
      </el-form-item>
      <el-form-item label="解析" prop="answer">
        <el-input
          v-model="formInfo.answer"
          type="textarea"
          autosize
          :style="{ width: '70%' }"
        />
      </el-form-item>
    </el-form>
    <div class="tools-wrapper">
      <el-button type="primary" @click="saveAndAdd">保存并继续添加</el-button>
      <!-- <el-button type="primary" @click="save">保存</el-button> -->
      <el-button type="text" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
import { postOnlineExamSubject } from "@/api/test.js";
export default {
  data() {
    return {
      formInfo: {
        outline: "",
        isTrue: "",
        answer: "",
        difficulty: ""
      },
      difficulties: [
        {
          label: "简单",
          value: "简单"
        },
        {
          label: "一般",
          value: "一般"
        },
        {
          label: "困难",
          value: "困难"
        }
      ],
      rules: {
        difficulty: [
          {
            required: true,
            message: "请选择困难程度",
            trigger: "change"
          }
        ],
        outline: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur"
          }
        ],
        isTrue: [
          {
            required: true,
            message: "请输入判断答案"
          }
        ],
        answer: [
          {
            required: true,
            message: "请输入解析",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    goback() {
      this.$router.push({
        path: "/exam/manage/" + this.$route.params.name
      });
    },
    save() {
      // axios
      // $router.push
    },
    saveAndAdd() {
      // axios add
      this.$refs.addform.validate(valid => {
        if (valid) {
          const data = {
            analysis: this.formInfo.answer,
            answer: this.formInfo.isTrue,
            difficulty: this.formInfo.difficulty,
            libraryId: this.$route.params.name,
            question: this.formInfo.outline,
            type: "判断题"
          };
          postOnlineExamSubject(data)
            .then(res => {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.formInfo = {
                outline: "",
                answer: "",
                isTrue: this.formInfo.isTrue,
                difficulty: this.formInfo.difficulty
              };
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.justify-wrapper {
  margin: 10px 10px;
  padding: 10px;
  border-radius: 5px;
  .tools-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-right: 25%;
  }
}
</style>
