<template>
  <div class="app-container">
    <el-card style="    min-height: calc(100vh - 65px);">
      <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" status-icon>
        <el-form-item label="题型" prop="type">
          <el-select v-model="Form.type" style="width: 400px">
            <el-option v-for="item in typeOptions" :key="item.key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="type">
          <el-select v-model="Form.questioncat" placeholder="分类" clearable style="width: 200px" class="filter-item">
                <el-option v-for="item in catOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="题干" prop="name">
          <el-input v-model="Form.name" height="100" width="800px" />
        </el-form-item>
        <el-form-item label="题干图片" prop="img">
          <el-upload 
            class="avatar-uploader" 
            :headers="upHeaders" 
            :action="upUrl"
            accept="image/jpeg, image/gif, image/png, image/bmp" 
            :show-file-list="false" 
            :on-success="handleImgSuccess"
            :before-upload="beforeImgUpload">
            <img v-if="Form.img" :src="Form.img" style="width: 200px;height: 100px;display: block;" />

            <el-button size="small" type="primary" v-else>点击上传</el-button>
          </el-upload>
          <el-button type="text" @click="delImg()" v-if="Form.img">删除</el-button>
        </el-form-item>
        <el-form-item label="选项A" prop="optionA">
          <el-input v-model="Form.options.A" height="30" width="800px" :disabled="inputDisable" />
        </el-form-item>
        <el-form-item label="选项B" prop="optionB">
          <el-input v-model="Form.options.B" height="30" width="800px" :disabled="inputDisable" />
        </el-form-item>
        <el-form-item label="选项C" v-show="Form.type != '判断'">
          <el-input v-model="Form.options.C" height="30" width="800px" />
        </el-form-item>
        <el-form-item label="选项D" v-show="Form.type != '判断'">
          <el-input v-model="Form.options.D" height="30" width="800px" />
        </el-form-item>
        <el-form-item label="选项E" v-show="Form.type != '判断'">
          <el-input v-model="Form.options.E" height="30" width="800px" />
        </el-form-item>
        <el-form-item label="选项F" v-show="Form.type != '判断'">
          <el-input v-model="Form.options.F" height="30" width="800px" />
        </el-form-item>
        <el-form-item label="正确答案" v-if="Form.type == '多选'">
          <el-checkbox-group v-model="Form.right">
            <el-checkbox label="A"></el-checkbox>
            <el-checkbox label="B"></el-checkbox>
            <el-checkbox label="C"></el-checkbox>
            <el-checkbox label="D"></el-checkbox>
            <el-checkbox label="E"></el-checkbox>
            <el-checkbox label="F"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="正确答案" v-else-if="Form.type == '单选'">
          <el-radio-group v-model="Form.right">
            <el-radio label="A"></el-radio>
            <el-radio label="B"></el-radio>
            <el-radio label="C"></el-radio>
            <el-radio label="D"></el-radio>
            <el-radio label="E"></el-radio>
            <el-radio label="F"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="正确答案" v-else>
          <el-radio-group v-model="Form.right">
            <el-radio label="A"></el-radio>
            <el-radio label="B"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="解析">
          <el-input v-model="Form.resolution" style="width:600px" type="textarea" :rows=3></el-input>
        </el-form-item>
        <el-form-item label="真题年份" prop="year">
          <el-input v-model="Form.year"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">立即创建</el-button>
          <el-button @click="resetForm('Form')">重置</el-button>
          <el-button type="warning" @click="goBack()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { createQuestion,getQuestioncatList } from "@/api/exam";
import { upUrl } from "@/api/file";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  data() {
    return {
      upHeaders: { Authorization: "JWT " + getToken() },
      upUrl: upUrl(),
      Form: {
        name: "",
        type: "",
        img: null,
        questioncat: null,
        year: null,
        right: '',
        options: {
          A: '',
          B: ''
        }
      },
      catOptions: [],
      inputDisable: false,
      submitLoding: false,
      rules: {
        type: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
      },
      typeOptions: [
        { key: 1, label: "单选", value: "单选" },
        { key: 2, label: "多选", value: "多选" },
        { key: 3, label: "判断", value: "判断" }
      ],
    };
  },
  watch: {
    'Form.type': 'setOptions'
  },
  created() {
    this.getQuestioncatAll()
  },
  methods: {
    handleImgSuccess(res, file) {
      this.Form.img = res.data.path
    },
    beforeImgUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 0.6;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 600KB!");
      }
      return isLt2M;
    },
    submitForm(formName) {
      let that =this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.submitLoding = true
          for (let key in that.Form.options) {
            if (!that.Form.options[key]) {
              delete that.Form.options[key]
            }
          }
          debugger;
          console.log(that.Form)
          createQuestion(that.Form).then(response => {
            that.submitLoding = false
            if (response.code >= 200) {
              that.$message({
                type: "success",
                message: "新建成功!"
              });
              that.goBack()
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.go(-1)
    },
    getQuestioncatAll() {
      getQuestioncatList().then(response => {
        this.catOptions = response.data.results;
      });
    },
    delImg() {
      this.Form.img = null
    },
    setOptions() {
      if (this.Form.type == '判断') {
        this.Form.options = {
          A: '对',
          B: '错'
        }
        this.inputDisable = true
      } else {
        this.Form.options = {
          A: '',
          B: ''
        }
        this.inputDisable = false
      }
      if (this.Form.type == '多选') {
        this.Form.right = []
      } else {
        this.Form.right = ''
      }
    }
  }
};
</script>
<style scoped>
.app-container {
  height: 100%;
}
</style>