<template>
  <div class="u-page">

    <el-container>
      <el-header style="padding: 2px 20px 10px 10px;">
        <div style="padding-bottom: 10px;">
          <div style="display: flex;">

             <!-- <el-cascader :options="resOwnerListMap" v-model="ownership" placeholder="资源归属" clearable :props="resourceProps"></el-cascader> -->
            <div style="display: flex;justify-content:flex-start;">
              <!-- <div style="padding-right:  5px;">
                <el-select placeholder="试卷类型" v-model="params.paperType" style="width: 110px;" clearable>
                  <el-option label="考试卷" :value="1"></el-option>
                  <el-option label="测试卷" :value="2"></el-option>
                </el-select>
              </div> -->
              <div style="padding: 0px 5px;"><el-input placeholder="关键词" v-model="params.keyWord" clearable></el-input></div>
              <div style="padding: 0px 5px;"><el-button icon="el-icon-search" @click="getsearch" type="primary" >搜索</el-button></div>
              <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button></div>
              <div style="padding-left:5px;"><el-button icon="el-icon-plus" type="primary" @click="addPaper()" >新建试卷</el-button></div>
            </div>
          </div>
        </div>
      </el-header>
      <el-container >
        <el-main>
          <el-table style="" :data="pageData.list" border stripe>
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="试卷名称" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.testName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="试题数目" prop="counts">
            </el-table-column>
            <el-table-column label="创建人" prop="sysCreateBy" width="150px"></el-table-column>
			<!-- <el-table-column prop="type" label="资源归属">
         <template slot-scope="scope">
                	{{resOwnerName(scope.row.resOwner1)}}/{{resOwnerName(scope.row.resOwner2)}}{{scope.row.resOwner3? '/' : ''}}{{resOwnerName(scope.row.resOwner3)}}
              </template>
			</el-table-column> -->
            <el-table-column label="最后更新" prop="sysCreateTime" width="160px"></el-table-column>
            <!-- <el-table-column label="试卷类型" prop="content">
              <template slot-scope="scope">
                {{scope.row.paperType == 1? '考试卷':'测试卷'}}
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="150px" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-folder-opened"  @click="eidtVolume(scope.row)">编辑</el-button>
                <el-button type="text" icon="el-icon-delete"  @click="deleteVolume(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div v-if="pageData.list.length > 0" style="text-align: center;margin-top:70px">
            <el-pagination background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pageIndex"
              :page-sizes="[10,20,30,40]"
               :page-size="params.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData.count"
            ></el-pagination>
          </div>
          <div style="height: 100px;"></div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :close-on-click-modal="false" :title="isEidt ? '编辑试卷' : '新建试卷'" :visible.sync="showAddDialog" width="80%" custom-class="g-dialog">
      <el-tabs v-model="formTab">
        <el-tab-pane label="基本信息" name="info">
          <!--试卷基本信息-->
          <el-form label-width="200px">
            <!-- <el-form-item label="资源归属">
               <el-cascader :options="resOwnerListMap" v-model="resOwner" placeholder="资源归属" clearable :props="resourceProps"></el-cascader>
              </el-form-item> -->
            <el-form-item label="试卷名称" required=""><el-input v-model="paper.testName"  maxlength="20"
                      show-word-limit placeholder="请输入名称"></el-input></el-form-item>
            <!-- <el-form-item label="试卷类型">
              <el-radio v-model="paper.paperType" :label="1">考试卷</el-radio>
              <el-radio v-model="paper.paperType" :label="2">测试卷</el-radio>
            </el-form-item>
              <el-form-item label="试卷模式" required="">
              <el-radio v-model="paper.paperMode" :label="1">固定试卷</el-radio>
              <el-radio v-model="paper.paperMode" :label="2">随机试卷</el-radio>
            </el-form-item> -->
            <el-form-item label="难度">
              <el-select v-model="paper.difficulty" placeholder="请选择试卷难度">
                <el-option label="容易" :value="1"></el-option>
                <el-option label="中等" :value="2"></el-option>
                <el-option label="困难" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述"><el-input type="textarea" v-model="paper.remark" placeholder="请输入描述"  maxlength="200"
                      show-word-limit></el-input></el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="编辑试卷" name="paper">
          <el-row :gutter="10">
            <el-col :span="8">
              <!--查询已有试题-->
              <div>
                <el-form :inline="true" size="mini">
                  <el-form-item><el-checkbox v-model="question.all">全部</el-checkbox></el-form-item>
                  <el-form-item>
                    <el-select clearable v-model="qlib.type" placeholder="请选择题型" class="search-width-120">
                      <el-option label="单选题" :value="1"></el-option>
                      <el-option label="多选题" :value="2"></el-option>
                      <el-option label="判断题" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item><el-input class="search-width-120" clearable v-model="qlib.title" placeholder="题干"></el-input></el-form-item>
                  <el-form-item><el-button type="primary" @click="questionList">搜索</el-button></el-form-item>
                </el-form>
              </div>
              <!--选择试题,换成动态的便利-->
              <div class="quest-box ">
                <div class="quest-div">
                  <el-checkbox-group v-model="question.checkQuest">
                    <el-checkbox class="quest-item" v-for="item in question.list" :label="item.id" :key="item.id">[{{typeFilter(item.type)}}]{{item.title}}</el-checkbox>
                  </el-checkbox-group>
                  <div v-if="question.list.length > 0" style="text-align:center">
                      <el-pagination background
                        @current-change="currentChange"
                        :current-page="qlib.pageIndex"
                        :page-size="qlib.pageSize"
                        layout="prev, pager, next"
                        :total="question.count"></el-pagination>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="1">
              <div style="padding-top: 150px;">
                <div><el-button type="primary" @click="arrowRight()" size="mini" icon="el-icon-d-arrow-right"></el-button></div>
                <div style="padding-top: 50px;"><el-button @click="arrowLeft()" type="primary" size="mini" icon="el-icon-d-arrow-left"></el-button></div>
              </div>
            </el-col>
            <el-col :span="15">
              <div>
                <div style="display: flex;justify-content: space-between;">
                  <div>
                    <el-form :inline="true" size="mini">
                      <el-form-item>
                        <el-select clearable v-model="qpaper.qtype" placeholder="请选择题型" class="search-width-120">
                          <!-- <el-option label="全部题型" :value="0"></el-option> -->
                          <el-option label="单选题" :value="1"></el-option>
                          <el-option label="多选题" :value="2"></el-option>
                          <el-option label="判断题" :value="3"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item><el-input class="search-width-120" v-model="qpaper.keyword" clearable placeholder="题干"></el-input></el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="selectQuery()">搜索</el-button>
                        <!-- <el-button type="primary" size="mini" @click="randomTest.showRandom = true">批量导入</el-button> -->
                        <!-- <el-button @click="addPageBreak" type="primary" size="mini">分页符</el-button> -->
                      </el-form-item>
                      <el-form-item><el-checkbox v-model="qpaper.optShow">选项</el-checkbox></el-form-item>
                    </el-form>
                  </div>
                  <div style="line-height:40px;width:37%;text-align: right;font-size: 14px;">
                    本卷共
                    <span class="bigred">{{paperLength}}</span>
                    题, 总分
                    <span class="bigred">{{totalScore}}</span>
                    分
                  </div>
                </div>
              </div>
              <div class="paper-box">
                <div v-if="paper.data.length>0" v-for="(item,idx) in paper.data" :key="idx">
                  <div v-if="item.type < 900">
                    <div style="display: flex;justify-content: space-between;background-color: #dcf1ff;padding: 5px;">
                      <div>
                        <span style="padding-right: 5px;"><el-checkbox v-model="item.checked"></el-checkbox></span>
                        <span v-if="item.type == 1">单选题</span>
                        <span v-if="item.type == 2">多选题</span>
                        <span v-if="item.type == 3">判断题</span>
                        <span style="padding-left: 5px;">难度[{{item.difficulty == 1? '简单' : item.difficulty == 2? '中等': '困难'}}]</span>
                        <!-- <span style="padding-left: 5px;">知识点[{{item.analysis}}]</span> -->
                      </div>
                      <div>
                        <el-input @input="changeInput($event)" v-model="item.defaultScore" style="width: 120px;"   size="mini"  placeholder="分数" @blur="paperCalculation()">
                          <template slot="append">分</template>
                        </el-input>
                        <el-button icon="el-icon-delete" @click="checkDelete(idx)" size="mini"></el-button>
                      </div>
                    </div>
                    <div style="padding: 15px;">
                      <div>{{ item.title }}</div>
                      <div v-if="qpaper.optShow">
                        <div v-if="item.type == 3">{{item.answer?'正确':'错误'}}</div>
                        <div v-else v-for="(opt, optIdx) in item.optionList" :key="optIdx">{{ optIdx + 1 }}, {{ opt.content }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="item.type > 900">
                    <div style="height: 25px;">
                      <span style="float: right;margin-top: -5px;cursor: pointer;" class="el-icon-delete" @click="checkDelete(idx)"></span>
                      <div style="border-bottom: 2px dotted #000000;margin-right: 50px;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button v-if="formTab == 'info'" type="primary" @click="saveAndNext()">下一步</el-button>
        <el-button v-if="formTab == 'paper'" type="primary" @click="savePaper()">保存</el-button>
        <!-- <el-button v-if="formTab == 'paper'" type="warning" @click="previewPaper">预览</el-button> -->
      </span>
    </el-dialog>

    <el-dialog title="【B10】新员工入模培训 基础知识篇" :visible.sync="showPreviewDialog" width="800px">
      <div><img :src="`${webBaseUrl}/temp/exam_paper.png`" style="width: 760px" /></div>
      <span slot="footer" class="dialog-footer"><el-button @click="showPreviewDialog = false">关闭</el-button></span>
    </el-dialog>
	     <el-dialog title="查看试卷" append-to-body :visible.sync="viewVolumeShow" width="40%" custom-class="g-dialog">
            <div style="padding: 10px; font-size: 20px" v-for="(item, index) in viewShowData" :key="item.id">
              <div class="test-info">{{index+1}}.【{{typeFilter(item.type)}}】{{item.title}}</div>
                <div style="padding: 10px" v-if="item.type == 3">
                <div class="test-info"><span>正确答案：{{item.answer? '正确': '错误'}}</span></div>
              </div>
              <div style="padding: 10px" v-else>
                <div class="test-info" v-for="(cc,inx) in item.optionList" :key="inx"><span :class="(cc.isAnswer || cc.score > 0)?'right-key': ''">{{numberToLetter(inx+1)}}：{{cc.content}}</span></div>
              </div>
              <!-- <div style="padding: 10px">
                <div class="test-info">解析</div>
                <div class="test-info"></div>
              </div> -->
            </div>

            <!-- </div>  -->

            <span slot="footer" class="dialog-footer"><el-button @click="viewVolumeShow = false">关闭</el-button></span>
          </el-dialog>
    <el-dialog title="随机导入" :visible.sync="randomTest.showRandom" width="500px">
      <div>
        <el-form :model="randomTest.formInline">
          <el-form-item label="按照数目：">
            选择
            <input class="test-input" v-model="randomTest.formInline.num" />
            题到试卷
          </el-form-item>
          <el-form-item label="按照总分:">
            选择
            <input class="test-input" v-model="randomTest.formInline.score" />
            分的题到试卷中
          </el-form-item>
          <el-form-item label="按照难度:">
            简单
            <input class="test-input" v-model="randomTest.formInline.diff1" />
            中等
            <input class="test-input" v-model="randomTest.formInline.diff2" />
            困难
            <input class="test-input" v-model="randomTest.formInline.diff3" />
          </el-form-item>
          <el-form-item label="按照题型:">
            单选
            <input class="test-input" v-model="randomTest.formInline.type1" />
            多选
            <input class="test-input" v-model="randomTest.formInline.type2" />
            判断
            <input class="test-input" v-model="randomTest.formInline.type3" />
          </el-form-item>
        </el-form>
        <div style="color:#6f6f6f; ">以上内容都需要填写整数</div>
      </div>
      <span slot="footer" class="dialog-footer"><el-button @click="queryLise()"> 搜 索 </el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import apiPaper from '@/api/modules/paper.js';
import examQuestionApi from "@/api/modules/question";
import { deepClone } from '../../utils';
import {numberToLetter, deepCopy} from '../../utils/tools.js';
import { mapGetters,mapActions} from 'vuex';
export default {
  name: 'articleItems',
  data() {
    return {
      keyData:0,
      resOwnerListMap:[],
      numberToLetter:numberToLetter,
      question: {
        checkQuest: [],
        all:false,
        list: [],
        totalPages:0,
        count:0,
      },
      questionData: [],
      resOwner: [],
      ownership: [],
      resourceData: [],
      testRadio:'',
      resourceProps:{
          value: 'code',
          label: 'name',
      },
      randomTest: {
        showRandom: false,
        qids:[],
        formInline: {
          num:'',
          score:'',
          diff1:'',
          diff2:'',
          diff3:'',
          type1:'',
          type2:'',
          type3:'',
        }
      },
      viewVolumeShow:false,
      viewShowData: [],
      isEidt: false,
      formTab: 'info',
      qlib: {
        pageIndex:1,
        type: '',
        title: '',
        pageSize:50,
        qlist: []
      },
      qpaper: {
        //试卷的内容
        optShow: false,
        qtype: '',
        keyword: '',
      },
      value: [1, 4],
      type: '',
      defaultProps: { children: 'children', label: 'label' },
      params: {keyWord:'',pageIndex:1,pageSize: 10 },
      typeList: [],
      pageData: {
        count: 0,
        list: []
      },
      shareShow: false,
      shareInfo: {
        aid: '',
        name: '',
        toType: 1,
        toAid: '',
        toName: '',
        toInfo: '',
        remark: ''
      },
      recommend: {
        dlgShow: false,
        records: [
          { addTime: '2022-02-14 11:30:00', toType: 2, status: 9, toAid: '', toName: '受众名称', toInfo: '', remark: '' },
          { addTime: '2022-02-14 11:30:00', toType: 2, status: 3, toAid: '', toName: '受众名称', toInfo: '', remark: '' },
          { addTime: '2022-02-14 11:30:00', toType: 2, status: 9, toAid: '', toName: '受众名称', toInfo: '', remark: '' }
        ]
      },
      showAddDialog: false,
      paper: {
        testName: '',
        remark: '',
        difficulty: '',
        data: []
      },
      showCompilerDialog: false,
      checkQuest: [],
      selectedQuest: [],
      showPreviewDialog: false,
	  dialog:false,
    paperData: [],
    totalScore:0,
    paperLength:0,
    };
  },
  computed:{
        ...mapGetters(['resOwnerMap','sysTypeMap']),
  //  totalScore() {
  //    let score = 0;
  //    this.paper.data && this.paper.data.forEach(item=>{
  //      if(item.type < 900) {
  //        score += Number(item.defaultScore);
  //      }
  //    })
  //    return score;
  //  },
  //  paperLength(){
  //    let num = 0;
  //    this.paper.data && this.paper.data.forEach(item=>{
  //      if(item.type < 900) {
  //        num++
  //      }
  //    })
  //    return num;
  //  }
  },
  mounted() {
      this.getResOwnerTree().then(rs=>{
      this.resOwnerListMap=rs;
    });
      this.searchData();
    //     if(this.resOwnerListMap.length == 0) {
    //   this.$store.dispatch("getList");
    // }
  },
  methods: {
    changeInput(e){
      this.$forceUpdate();
    },
    currentChange(val) {
      this.qlib.pageIndex = val;
      this.questionList();
    },
    paperCalculation() {
      this.totalScore=0;
      this.paperLength=0;
      this.paper.data.forEach(item=>{
            if(item.type < 900) {
              this.paperLength++;
              this.totalScore += Number(item.defaultScore);
            }
          })
    },
    getsearch(){
     this.params.pageIndex = 1;
     this.searchData();
    },
    reset(){
      this.ownership = []
      this.params.paperType = ''
      this.params.keyWord = ''
     this.params.pageIndex = 1;
      this.searchData();
    },
 ...mapActions({
      getResOwnerTree:'resOwner/getResOwnerTree',
    }),
    resOwnerName(code){
      if(code==''){return '';}
      return this.resOwnerMap.get(code);
    },
    sysTypeName(code){
      if(code==''){return '';}
      return this.sysTypeMap.get(code);
    },
 addPaper(){
  this.showAddDialog = true;
  this.paper = {};
  this.paper.data = [];
  this.resOwner = [];
  this.formTab = 'info';
  this.totalScore=0;
  this.qlib.type= '';
  this.qlib.title= '';
  this.paperLength=0;
  this.question.all = false;
  this.question.list =[];
  this.question.checkQuest = [];
 },
    // 查询已有的数据
    selectQuery() {
      if(this.qpaper.qtype == '' && this.qpaper.keyword == '') {
        this.paper.data = deepCopy(this.paperData);
        this.$forceUpdate();
        return
      }
            let data = deepCopy(this.paperData);
            if(this.qpaper.qtype !== '') {
               data = data.filter(item => {
               if(item.type === this.qpaper.qtype){
                return item;
              }
            });
            }
            if(this.qpaper.keyword !== '') {
                  data = data.filter(item => {
              return item.title.toLowerCase()
                .indexOf(this.qpaper.keyword.toLowerCase()) > -1;
            });
            }
            this.paper.data = data;
            this.$forceUpdate();
    },
    checkDelete(index) {
      this.paper.data.splice(index,1);
      this.paperCalculation();
      this.$forceUpdate();
    },
    // paper.data
    // this.question.checkQuest  待选的试题
    // this.paper.data  选中的试题
   // 向左 不要
    arrowLeft() {
      let paperList = deepClone(this.paper.data)
      let data = paperList.filter((item)=> {
          return item.checked;
      })
      // let item = Array.from(new Set(arr));
      // this.question.list = null;
      this.question.list.push(...data);
      this.question.list =  Array.from(new Set(this.question.list));
     let list = paperList.filter(item=>{
        return !item.checked;
      })
      this.paper.data = list;
       this.paper.data =  Array.from(new Set(this.paper.data));
      this.paperData = list;
       this.paperData =  Array.from(new Set(this.paperData));
       this.paperCalculation();
    },
    // 新建：选择向右 要
    arrowRight() {
      let questionList = deepClone(this.question.list)
      let data = questionList.filter((item)=> {
          return this.question.checkQuest.indexOf(item.id) < 0;
      })
      this.question.list = data; // 去除选中数据
        let list = questionList.filter((item)=> {
          return this.question.checkQuest.includes(item.id);

      })
     // 拿到去除的数据
      this.paper.data.push(...list);// 到已选择列表
     this.paper.data =  Array.from(new Set(this.paper.data));
      this.paperData.push(...list);
      this.paperData =  Array.from(new Set(this.paperData));
     this.paperCalculation();
    },
    // 新建保存、编辑
    savePaper() {
        if(!this.paper.testName) {
          return this.$message.warning('请您完善基本信息必填项！')
        }
        this.paper.resOwner1 = this.resOwner[0];
        this.paper.resOwner2 = this.resOwner[1];
        this.paper.resOwner3 = this.resOwner[2];
        this.paper.counts = this.paperLength;
        this.paper.totalScore = this.totalScore;
        this.paper.paperContent = JSON.stringify(this.paper.data);
        if(this.paper.id) {
          apiPaper.update(this.paper).then((res)=>{
              if(res.status === 200) {
                this.$message.success('编辑成功！')
                this.showAddDialog = false;
                this.searchData();
              } else {
                this.$message.error(res.message);
              }
          })
        } else{
          apiPaper.save(this.paper).then((res)=>{
            if(res.status === 200) {
              this.$message.success('保存成功！')
              this.showAddDialog = false;
              this.searchData();
          } else {
            this.$message.error(res.message+'，减少试题数量再试试');
          }
        })
        }


    },
    typeFilter(num) {
      let name = '';
     switch (num) {
       case 1:
         name = '单选';
         break;
       case 2:
         name = '多选';
         break;
           case 3:
         name = '判断';
         break;
       default:
         break;
     }
     return name;
    },
    // 编辑试题，试题查询
    questionList() {
      this.question.list = [];
      this.qlib.pageSize = 50;
       examQuestionApi.querylist(this.qlib).then(res=>{
          if(res.status === 200) {
            this.question.list.push(...res.result.list);
            this.question.list.forEach(item=>{
              item.checked = false;
            })
            this.question.count = res.result.count;
            this.question.totalPages = res.result.totalPages;
            this.$forceUpdate();
        } else {
            this.$message.error(res.message);
        }
       })
    },
    // 列标查询
    searchData() {
      this.params.resOwner1 = this.ownership[0];
      this.params.resOwner2 = this.ownership[1];
      this.params.resOwner3 = this.ownership[2];
      apiPaper.querylist(this.params).then((res)=>{
        if(res.status === 200) {
            this.pageData.list = res.result.list;
            this.pageData.count = res.result.count;
            this.$forceUpdate();
        } else {
            this.$message.error(res.message);
        }


      })
    },
    viewTopic(row) {
		this.viewVolumeShow=true;
     apiPaper.detail(row.id).then(res=>{
         if(res.status === 200) {
            this.viewShowData = JSON.parse(res.result.paperContent);
        } else {
            this.$message.error(res.message);
        }
      })

	},
    queryLise() {
      //计算试题的ids
      apiPaper.batchImportCount(this.randomTest.formInline).then(res=>{
         if(res.status === 200) {
            // this.pageData.list = res.result.list;
            // this.pageData.count = res.result.count;
        } else {
            this.$message.error(res.message);
        }
      })
      this.randomTest.showRandom = false;
    },
    eidtVolume(row) {
      this.isEidt = true;
      this.showAddDialog = true;
      this.paper = {};
      this.resOwner = [];
      this.formTab = 'info';
      // 删除掉详情接口
      apiPaper.detail(row.id).then(res=>{
         if(res.status === 200) {
            this.paper = res.result;
            this.paper.data = JSON.parse(res.result.paperContent);
            this.paperData = JSON.parse(res.result.paperContent);
            this.paper.paperType = Number(res.result.paperType);
             if(res.result.resOwner3) {
               this.resOwner = [res.result.resOwner1,res.result.resOwner2,res.result.resOwner3];
            } else {
              this.resOwner = [res.result.resOwner1,res.result.resOwner2 ];
            }
            this.paperCalculation();
        } else {
            this.$message.error(res.message);
        }
      })
    },
    changeTab(tab) {
      //判断，如果,如果没有试卷的id 就不能切换到试卷编辑页，要提示先保存
    },
    saveAndNext() {
      this.formTab = 'paper';
      this.searchData();
    },
    addPageBreak() {
      //添加分页符
      this.paper.data.push({ id: '9', type: 901, score: 0, checked: false, content: '' });
      this.$forceUpdate();
    },
    deleteVolume(row) {
      this.$confirm('此操作将数据永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
         apiPaper.del(row.id).then((res)=>{
            if(res.status === 200) {
              this.$message.success('删除成功！');
              this.searchData();
              } else {
                  this.$message.error(res.message);
              }
         })
        });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.params.pageIndex = 1;
      this.searchData();
    },
    handleCurrentChange(val) {
      this.params.pageIndex = val;
      this.searchData();
    },
    previewPaper() {
      this.showCompilerDialog = false;
      this.showPreviewDialog = true;
    }
  },
  watch:{
    'question.all':function(val) {
      if(val === true) {
        let ids = this.question.list.map((item)=>{
          return item.id;
        })
        this.question.checkQuest = ids;
      } else {
        this.question.checkQuest = [];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-input{
  .el-input__inner{
    padding: 0px 5px;
  }
}
.test-input {
  width: 60px;
  margin: 0 5px;
  border: 1px solid #e8e8e8;
}
.test-input:focus {
  border: none;
}
.bigred {
  color: red;
  font-size: 20px;
}
.right-key{
  color: #00aa00;
}
.paper-box {
  //
  border: 1px solid #dfdfdf;
  padding: 5px 10px;
  height: 410px;
  overflow: auto;
}
.el-aside {
  padding: 0px 2px 10px 0px;
}
.el-main {
  padding: 0px 10px;
}
.article-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.article-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.article-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  margin: 5px 0;
  border: 1px solid #dddddd;
  padding: 10px;
}

.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    .article-info-date {
      width: 150px;
      height: 40px;
      line-height: 40px;
      float: right;
      font-weight: 200;
      color: #999999;
      i {
        margin-right: 5px;
      }
    }
  }
  .article-info-summary {
    height: 65px;
    color: #999999;
  }
  .article-info-tools {
    height: 30px;
    .article-info-tools-auth {
      float: left;
      font-size: 13px;
      color: #999999;
      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .article-info-tools-btns {
      float: right;
      .article-info-tools-btn {
        margin: 0 0 0 15px;
      }
    }
  }
}
.case-row-btn {
  line-height: 25px;

  button {
    height: 20px;
    padding: 3px 20px;
  }
}
.label-border-bottom {
  border-bottom: 1px solid #dfdfdf;
  padding: 5px 0;
  margin-bottom: 10px;
}
.label-border-bottom2 {
  border-bottom: 1px solid #dfdfdf;
}
.search-width-120 {
  width: 120px;
}
.algin-center {
  text-align: center;
}
.quest-box {
  min-height: 400px;
  border: 1px solid #dfdfdf;
  padding: 5px 10px;
  .quest-div {
    height: 400px;
    overflow-y: auto;
  }
  .quest-bottom {
    height: 40px;
  }
  .quest-item {
    display: block;
    padding: 5px 3px;
  }
  .quest-item:hover {
    background: #dbd6d6;
  }
}

//
.hr {
  text-align: center;
  line-height: 0px;
  background: blue;
}

.hr:after {
  content: '分页符';
  font-weight: bold;
  font-size: 30px;
  background: white;
  z-index: 2;
}
</style>
