<template>
  <div>
    <div v-if="showTab==1">
        <div style="padding: 10px; text-align: center;margin-top: 20px;">
          <el-button @click="openCusExam()" type="primary" >自定义考试</el-button>
          <el-button @click="openChoosePaper()" type="primary">选择已有考试</el-button>
        </div>
    </div>
    <div v-if="showTab==2">
        <div  style="display: flex;justify-content: flex-start;">
          <div><el-input v-model="usePaper.keyword" maxlength="50" placeholder="名称"></el-input></div>
          <div style="padding-left: 10px;"><el-button @click="findExamPapers()" type="primary" >查询</el-button></div>
          <div style="padding-left: 10px;"><el-button @click="changeExamShow(1)" type="danger" >返回</el-button></div>
        </div>
        <div>
          <div style="text-align: center;padding-top: 10px; overflow-y: auto;">
            <el-table :empty-text="emptyText" style="100%" height="480" :data="usePaper.list" border stripe>
              <el-table-column prop="testName" label="试卷"></el-table-column>
              <el-table-column prop="sysCreateTime" label="创建时间"></el-table-column>
              <el-table-column prop="sysCreateBy" label="创建人" width="80px" ></el-table-column>
              <el-table-column label="选择" width="60px">
                <template slot-scope="scope">
                    <el-button size="mini" @click="chooseExamPaper(scope.row)" type="primary"  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页功能-->
            <div v-if="usePaper.total >10" style="text-align: center; margin-top:10px">
              <el-pagination background
                @current-change="changePaperPage"
                :current-page="usePaper.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="usePaper.pageSize"
                layout="total,pager"
                :total="usePaper.total"
              ></el-pagination>
            </div>
          </div>
        </div>
    </div>
    <div v-if="showTab==3">
        <div style="display: flex;justify-content: space-between;padding:5px 10px;line-height: 30px; border-bottom: 1px solid #e7e7e7;">
          <div>{{examInfo.paperType==1? '自定义考试':'使用独立考试试卷'}} </div>
          <div>
            <el-checkbox v-model="onlyQuestion">只显示试题</el-checkbox>
            <el-button :loading="loading" style="margin-left: 10px;" @click="saveExam()" type="primary"  > 保 存 </el-button>
            <el-button style="margin-left: 10px;" @click="deleteExam()" type="danger"  > 删 除 </el-button>
          </div>
        </div>
        <div style="padding-top: 10px;overflow: auto;">
          <div v-if="!onlyQuestion">
          <el-form size="small" label-width="80px">
            <!-- 课程内考虑不需要名辽
            <el-form-item label="考试名称">
              <el-input v-model="examInfo.testName" placeholder="请输入名称"></el-input>
            </el-form-item>
            -->
            <el-form-item label="考试时长">
              <el-col :span="8">
                <el-input size="mini" v-model="examInfo.testDuration" placeholder="20-120">
                  <template slot="append">分钟</template>
                </el-input>
              </el-col>
              <el-col :span="12">
                <el-form-item label="及格线">
                  <el-input size="mini" placeholder="20-100" :maxlength="3" v-model="examInfo.passLine">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="评分方式">
              <el-col :span="8">
                  <el-radio-group v-model="examInfo.scoringType">
                      <el-radio :label="1">最高一次</el-radio>
                      <el-radio :label="2">最后一次</el-radio>
                  </el-radio-group>
              </el-col>
              <el-col :span="16">
                <el-form-item label="百分制">
                  <el-checkbox v-model="examInfo.percentScore">实际成绩*100/实际总分</el-checkbox>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="考试说明">
               <el-input type="textarea" show-word-limit v-model="examInfo.info" placeholder="关于考试的说明(限255字以内)" maxlength="255"></el-input>
            </el-form-item>
            <el-form-item  label="随机模式">
              <el-col :span="4">
                <el-radio-group v-model="examInfo.randomMode">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="20" v-if="examInfo.randomMode&&examInfo.paperType==1">
                <el-form-item label="数量">
                    <el-input-number v-model="examInfo.qnum" :min="1" :max="examPaper.items.length" label="数量"></el-input-number>
                    <span style="margin-left:10px;" v-if="examPaper.items.length==0">先添加试题</span>
                    <span style="margin-left:10px;" v-if="examPaper.items.length>0">试卷有 {{examPaper.items.length}} 道试题</span>
                </el-form-item>
              </el-col>
              <el-col :span="20" v-if="examInfo.randomMode&&examInfo.paperType==2">
                <el-form-item label="数量">
                    <el-input-number v-model="examInfo.qnum" :min="1" :max="usePaper.counts" label="数量"></el-input-number>
                    <span style="margin-left:10px;" v-if="usePaper.counts==0">先选择试卷</span>
                    <span style="margin-left:10px;" v-if="usePaper.counts>0">试卷有 {{usePaper.counts}} 道试题</span>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
          </div>
          <div v-if="examInfo.paperType==1">
             <simplePaper :data="examPaper"></simplePaper>
           </div>
           <div v-if="examInfo.paperType==2">
                <div style="font-size: 20px;padding: 10px;" >试卷： {{usePaper.paperName}}</div>
            </div>
        </div>
    </div>
    <div v-if="showTab==9">
        <div style="display: flex;justify-content: space-between;padding:5px 10px;line-height: 30px; border: 1px solid #e7e7e7;">
          <div>考试信息</div><div> </div>
        </div>
        <div style="padding-top: 10px;">
          <el-form size="small" label-width="80px">
              <el-form-item label="试卷类型">
                  {{examInfo.paperType==1? '自定义试卷':'使用考试试卷: '+usePaper.paperName}}
              </el-form-item>
              <el-form-item label="考试时长">
                <el-col :span="6">{{examInfo.testDuration}}分钟</el-col>
                <el-col :span="9">
                  <el-form-item label="及格线">{{examInfo.passLine}}%</el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="评分方式">
                <el-col :span="6">
                    <span v-if="examInfo.scoringType==1">最高一次</span>
                    <span v-if="examInfo.scoringType==2">最后一次</span>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="考试成绩">
                    <span v-if="examInfo.percentScore">按百分制显示</span>
                    <span v-else>按实际得分显示</span>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="考试说明">{{examInfo.info}}</el-form-item>

            <el-form-item label="">
              <el-button  type="primary" @click="changeExamShow(3)"> 修 改 </el-button>
              <el-button  type="danger" @click="deleteExam(3)"> 删 除 </el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>
    <el-dialog title="查看试卷" append-to-body :visible.sync="paperShow" width="800px" custom-class="g-dialog">
          <div>
            <img :src="`${webBaseUrl}/temp/exampaper.png`">
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="paperShow= false">关闭</el-button>
          </span>
    </el-dialog>
  </div>
</template>
<script>
  import simplePaper from "@/components/Course/simpleTestPaper.vue";
  import apiCourse from '../../api/modules/course.js';
  import apiExamPaper from '../../api/modules/paper.js';
  import { deepClone } from "../../utils";
  export default{
    components:{simplePaper},
    props:{
      courseId:{
        type: String,
        default:'',
      },
      contentId:{
        type: String,
        default:'',
      }
    },
    data(){
      return {
        loading:false,
        emptyText:'加载中...',
        examChange:{}, //用于保存，检查是否改变
        showTab:0, //显示哪个
        onlyQuestion:false, //只显示问题
        paperShow:false, //查看试卷
        examPaper:{items:[]}, //试题列表的对象
        examInfo:{
          id:'',
          name:'',
          testDuration:30,
          testName:'',
          courseId:this.courseId,
          contentId:'',
          paperType:1,//默认是自定义
          paperId:'',
          arrange:0,
          qnum:0,
          times:1,
          passScore:60,
          showAnswer:false,
          showAnalysis:false,
          randomType:1,
          scoringType:1,
          passLine:60,
          randomMode:false,
          percentScore:true,//默认是百分制
          paperContent:'',
          info:''
        },
        usePaper:{ //使用考试试卷
          pageIndex:1,
          pageSize:10,
          total:0,
          list:[],
          keyword:'',
          paperId:'',//选择的试卷的id
          paperName:'',//选择的试卷的名称
          paperJson:{items:[]},
        }
      }
    },
    mounted() {
      if(this.contentId){
        this.reloadExam();
      }else{
        this.showTab=1;
      }
    },
    watch:{
      contentId(newVal,oldVal){
        if(newVal!=oldVal){
          this.reloadExam();
        }
      }
    },
    methods:{
      reloadExam(){
        //console.log('contentId='+this.contentId);
        this.emptyText='加载中...';
        this.examPaper={items:[]};
        this.examInfo.id='';
        this.examInfo.paperType=1;
        this.examInfo.paperId='';
        this.examInfo.paperContent="{}";
        if(this.contentId){
          apiCourse.getExam(this.contentId).then(res=>{
             if(res.status==200){
                 this.examInfo=res.result;
                 if(res.result.paperType==1){
                   this.examInfo.paperContent=res.result.paperContent;
                   this.examPaper=JSON.parse(res.result.paperContent);
                 }else{
                   apiExamPaper.detail(this.examInfo.paperId).then(rs=>{
                     if(rs.status==200){
                         this.usePaper.paperId=rs.result.id;
                         this.usePaper.paperName=rs.result.testName;
                         this.usePaper.counts=rs.result.counts;
                         //this.usePaper.paperJson= rs.result.paperContent;
                     }
                   })
                 }
                 this.showTab=9;
                 //this.examChange = deepClone(this.exam);
             }else if(res.status==404){

             }else{
               this.$message.error(res.message);
             }
          })
        }else{
          this.showTab=1;//选择状态
        }
      },
      saveExam(){//保存
        //检查是否完整
        if(this.examInfo.paperType==1){
            if(this.examPaper.items.length==0){
              this.$message.error("您还没有添加考试的试题");
              return;
            }
            let pass=true;
            this.examPaper.items.forEach(qitem=>{
                if(qitem.options.length==0){
                  pass=false;
                }else{
                  let hasAnswer=qitem.options.some(opt=>{
                    return opt.answer;
                  });
                  if(!hasAnswer){
                    pass=false;
                  }
                }
            });
            if(!pass){
              this.$message.error("试卷试题请填写完整，每个试题必须要有答案");
              return;
            }
            this.examInfo.paperContent=JSON.stringify(this.examPaper);
        }else{
           if(this.examInfo.paperId==''){
             this.$message.error("您还未选择任何试卷，请先选择试卷");
             return;
           }
        }
        if(!this.examInfo.randomMode){
          this.examInfo.qnum = 0
        }
        this.$emit("save",this.examInfo);
      },
      deleteExam(){ //删除
        this.$confirm('您确认要删除此考试内容吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.examInfo.randomMode = false;
          this.examInfo.qnum = 0;
          this.$emit("remove",this.examInfo);
        }).catch(() => {

        });

      },
      changeExamShow(idx){
        this.showTab=idx;
      },
      openCusExam(){ //自定义考试
        this.showTab=3;
        this.examInfo.paperType=1;
        this.examInfo.paperId='';
        this.usePaper.pageIndex=1;
        this.usePaper.keyword="";
      },
      openChoosePaper(){
        this.showTab=2;
        this.examInfo.paperType=2; //选择试卷
        this.examInfo.paperId='';

        this.findExamPapers();
      },
      findExamPapers(){ //查询已有的考试试卷
        this.usePaper.pageIndex=1;
        this.emptyText='加载中...';
        this.loadExamPapers();
      },
      loadExamPapers(){
        let pars={
          pageIndex:this.usePaper.pageIndex,
          pageSize:this.usePaper.pageSize,
          keyWord:this.usePaper.keyword
        }

        apiExamPaper.querylist(pars).then(rs=>{
            if(rs.status==200){
              this.usePaper.list=rs.result.list;
              this.usePaper.total=rs.result.count;
            }else{
              this.$message.error('查询可用试卷失败');
            }
            this.emptyText='暂无搜索内容';
        })
      },
      changePaperPage(pindex){
         this.usePaper.pageIndex=pindex;
         this.loadExamPapers();
      },
      chooseExamPaper(epaper){ //选择试卷后
        if(epaper.counts==0){
          this.$message.error('此试卷无试题内容，请重新选择');
          return;
        }
        this.examInfo.paperType=2;// 选择已有试卷
        this.examInfo.paperId=epaper.id;// 选择已有试卷
        this.usePaper.paperId=epaper.id;
        this.usePaper.paperName=epaper.testName;
        //this.usePaper.paperJson= epaper.paperContent;
        this.loadExamPaper();
        this.changeExamShow(3);
      },
      loadExamPaper(){
        if(this.examInfo.paperType!=2){
          return;
        }
        apiExamPaper.detail(this.examInfo.paperId).then(rs=>{
          if(rs.status==200){
              this.usePaper.paperId=rs.result.id;
              this.usePaper.paperName=rs.result.testName;
              this.usePaper.counts=rs.result.counts;
              //this.usePaper.paperJson= rs.result.paperContent;
          }
        })
      }
    }
  }
</script>

<style>
</style>
