<template>
  <a-card :bordered="true" hoverable :title="title">
    <template v-if="!courseId" slot="extra">
      <a-button size="small" @click="questionColse">返回</a-button>
    </template>
    <div class="questionLeft">
      <h1 class="questionNumber">题序</h1>
      <!--  题目序号 -->
      <div v-for="(item, index) in quesitonList" :key="item" class="questionLeftItem" @click="quesionId(item, index)" :class="{ active_color: index == isactive }">
        {{ index + 1 }}
      </div>
    </div>

    <div class="questionDetail">
      <br />
      <div>
        <a-button v-if="!courseId" type="primary" class="create-button" style="font-size: 15px; margin: 0px 10px 10px 0px" @click="questionSave">新增题目</a-button>
        <a-button v-if="!courseId" type="primary" class="create-button" style="font-size: 15px; margin: 0px 10px 10px 0px" @click="questionBatch">
          批量导入
        </a-button>
        <a-button v-if="!courseId" type="primary" class="create-button" style="font-size: 15px; margin: 0px 10px 10px 0px" @click="showModal">
          模板下载
        </a-button>
        <a-modal v-if="!courseId" v-model="visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
          <a-button type="primary" class="create-button" style="font-size: 15px; margin:-15px 50px 3px 50px" @click="questionBatchDownloadDemo">示例模板</a-button>
          <a-button type="primary" class="create-button" style="font-size: 15px; margin:-15px 30px 3px 70px" @click="questionBatchDownload">纯净模板</a-button>
        </a-modal>
      </div>
      <b>
        <h1 class="questionContent">课程题目库预览</h1>
      </b>
      <a-divider :style="{ backgroundColor: '#000' }" />
      <div class="question">
        <h1 class="questionName" v-if="quesitonList != null && quesitonList.length != 0">
          （{{ questionDetail.questionTypeName }}）{{ questionDetail.questionName }}
          <span v-if="!courseId" class="edit" @click="edit(questionDetail.id)">编辑</span>
          <a-popconfirm v-if="!courseId" title="确定要删除此题？" ok-text="确定" cancel-text="取消" @confirm="del(questionDetail.id)">
            <span class="edit">删除</span>
          </a-popconfirm>
        </h1>

        <!-- 显示单选题和多选题 -->
        <div v-if="questionDetail.questionType == 1 || questionDetail.questionType == 2">
          <div class="answer">A. {{ questionDetail.answerA }}</div>
          <div class="answer">B. {{ questionDetail.answerB }}</div>
          <div class="answer">C. {{ questionDetail.answerC }}</div>
          <div class="answer">D. {{ questionDetail.answerD }}</div>
          <div v-if="questionDetail.answerE" class="answer">E. {{ questionDetail.answerE }}</div>
          <div v-if="questionDetail.answerF" class="answer">F. {{ questionDetail.answerF }}</div>
        </div>

        <!-- 显示简答题 -->
        <div v-if="questionDetail.questionType == 4">
          <div class="answer">正确答案:&nbsp;&nbsp;&nbsp;&nbsp;{{ questionDetail.rightAnswers }}</div>
        </div>

        <!-- 显示填空题 -->
        <div v-if="questionDetail.questionType == 5">
          <div class="answer" v-for="(item, ind) in questionDetail.answerList" :key="ind">
            正确答案{{ ind + 1 }}:&nbsp;&nbsp;&nbsp;&nbsp;{{ item }}
          </div>
        </div>

        <div class="info_parent" v-if="quesitonList != null && quesitonList.length != 0">
          <div class="info">解析</div>
          <div class="info_main">
            {{ questionDetail.asnwerParse }}
          </div>
        </div>
        <a-divider :style="{ backgroundColor: '#000' }" />
      </div>
    </div>

    <input ref="inputFile" type="file" style="display: none" @change="questionBatchImport" />
  </a-card>
</template>

<script>
import { getQuestionListByCourseId } from '@/api/course/course'
import { getQuestionDeatil, deleteQuestion, importTemplate } from '@/api/course/question/question'
import { ossUpload } from '@/api/sys/oss'

import axios from 'axios'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  props:{
    courseId:{
      type: String,
    }
  },
  data() {
    return {
      title:"题库管理",
      quesitonList: [],
      questionDetail: {},
      isactive: 1,
      visible: false,
      add:'add',
    }
  },

  created: function () {
    this.getQuestion()
  },
  methods: {
    getQuestion() {
      // 查询所有题目id列表
      getQuestionListByCourseId({ id: this.$route.query.id || this.courseId }).then((res) => {
        this.quesitonList = res.data

        if (!res.data) return

        let questionId = 0, index = 0;
        if(this.$route.query.questionId){
          questionId = this.$route.query.questionId
          index = this.$route.query.isactive;
        } else if(this.$route.query.opt){
          questionId = this.quesitonList[this.quesitonList.length-1];
          index = this.quesitonList.length-1;
        } else{
          questionId = this.quesitonList[0];
          index = 0;
        } 
        
        this.quesionId(questionId, index)
      })
    },

    //题目ID查看题目
    quesionId: function (i, index) {
      if (this.quesitonList != null && this.quesitonList.length != 0) {
        //ID不为空则执行下面
        this.isactive = index
        this.questionId = i

        getQuestionDeatil({ id: i }).then((res) => {
          this.questionDetail = res.data
          //获取题目的名称
          if (this.questionDetail.questionType == '1') this.questionDetail.questionTypeName = '单选题'
          if (this.questionDetail.questionType == '2') this.questionDetail.questionTypeName = '多选题'
          if (this.questionDetail.questionType == '3') this.questionDetail.questionTypeName = '判断题'
          if (this.questionDetail.questionType == '4') this.questionDetail.questionTypeName = '简答题'
          if (this.questionDetail.questionType == '5') this.questionDetail.questionTypeName = '填空题'
        })
      }
    },

    //关闭按钮
    questionColse() {
      this.$router.push({
        path: '/course/CourseList',
        query: {
          courseName: this.$route.query.courseName,
          pageNum: this.$route.query.pageNum,
        },
      })
    },
    questionSave() {
      this.$router.push({
        path: '/course/question/QuestionAdd',
        query: {
          courseId: this.$route.query.id,
          isactive: this.isactive,
          // id: this.questionId,
          opt: this.add,
        },
      })
    },
    edit(record) {
      this.$router.push({
        path: '/course/question/QuestionAdd',
        query: {
          id: record,
          isactive: this.isactive,
          questionType: this.questionDetail.questionType,
          courseId: this.$route.query.id,
        },
      })
    },

    //删除
    del(id) {
      deleteQuestion({ id: id }).then((res) => {
        if (res.code == 200) {
          this.getQuestion()
          this.$message.success('删除成功！')
        } else {
          this.getQuestion()
          this.$message.error('后台报错了~')
        }
      })
    },

    //批量导入
    questionBatch() {
      this.$refs.inputFile.click()
    },
    questionBatchImport() {
      if (!this.$refs.inputFile.value || this.$refs.inputFile.value === '') return
      const data = new FormData()
      data.append('file', this.$refs.inputFile.files[0])
      data.append('sourceId', 'questionImport')
      data.append('fileType', 'excel')

      const header = {}
      header['Content-Type'] = 'multipart/form-data'
      header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)

      axios
        .post(ossUpload(), data, { headers: header })
        .then((res) => {
          this.$refs.inputFile.value = ''
          if (res.data.code === 200) {
            let params = { fileUrl: res.data.url, courseId: this.$route.query.id }
            importTemplate(params).then((res1) => {
              this.$message.success('题目导入成功!')
              this.getQuestion()
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch((err) => {
          this.$refs.inputFile.value = ''
          this.$message.error(res)
        })
    },

    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.visible = false
    },

    // 下载模板
    questionBatchDownload() {
      window.location.href = '/dawa/sys/oss/show?id=1'
    },
    //下载示例模板
    questionBatchDownloadDemo() {
      window.location.href = '/dawa/sys/oss/show?id=2'
    },
  },
}
</script>

<style scoped>
.questionLeft {
  width: 300px;
  height: auto;
  float: left;
  background-color: #f0f2f5;
}
.questionLeftItem {
  width: 50px;
  height: 50px;
  line-height: 50px;
  float: left;
  text-align: center;
  border: 1px solid #000;
  margin: 5px 5px;
  cursor: pointer;
  background-color: white;
}

.active_color {
  background-color: wheat;
}

/* wheat */
.questionDetail {
  width: calc(100% - 300px - 20px);
  height: auto;
  float: left;
  margin-left: 20px;
  background-color: #f0f2f5;
}
.div-button {
  margin-bottom: 10px;
  font-size: 16px;
}
.create-button {
  float: right;
  width: 135px;
  height: 35px;
}
.close-button {
  width: 135px;
  height: 35px;
  float: left;
}
.questionNumber {
  width: 300px;
  height: 40px;
  text-align: center;
  font-size: 23px;
  font: bold;
  background-color: gainsboro;
  /* margin-top: 45px; */
}
.questionContent {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.question {
  margin-left: 10px;
}
.questionName {
  font-weight: bold;
}
.edit {
  float: right;
  margin-right: 30px;
  color: #1890ff;
  cursor: pointer;
}
.answer {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}
.info_parent {
  margin-top: 10px;
  height: auto;
}
.info {
  width: 50px;
  height: 20px;
  line-height: 15px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #000;
  background-color: white;
}
.info_main {
  width: calc(100% - 50px - 20px);
  margin-left: 20px;
  font-size: 13px;
  margin-left: 70px;
  margin-top: -20px;
}
</style>