<template>
  <div class="fullHeight">
    <div v-show="!isExamManage">
      <!-- header -->
      <div class="searchBox whiteBlock">
        <el-form :inline="true" size="medium" class="demo-form-inline">
          <el-form-item label="科目" prop="name">
            <el-select v-model="name" placeholder="请选择" clearable>
              <el-option v-for="item in subjectNameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题名称" prop="questionName">
            <el-input placeholder="请输入" v-model="questionName" suffix-icon="el-icon-search" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="expintBtn" suffix-icon="el-icon-search" size="medium" type="primary" @click="getRecordList()">
              查询
            </el-button>
            <el-button class="expintBtn" size="medium" type="primary" @click="addExam()">
              新增考试
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- table -->
      <div class="table_wrap whiteBlock"  style="height: 677px">
        <el-table class="tables" :data="listData" height="200">
          <el-table-column width="200" align="center" prop="name" label="考试科目"></el-table-column>
          <el-table-column align="center" prop="name" label="试题名称"></el-table-column>
          <el-table-column align="center" prop="radio" label="单选题"></el-table-column>
          <el-table-column align="center" prop="multi" label="多选题"></el-table-column>
          <el-table-column align="center" prop="duration" label="考试时长(分钟)"></el-table-column>
          <el-table-column align="center" prop="passLine" label="及格分数"></el-table-column>
          <el-table-column align="center" width="" prop="createTime" label="上传时间"></el-table-column>
          <el-table-column width="240px" label="操作" align="center">
            <template slot-scope="scope">
              <div style="display:flex;justify-content:center">
                <div @click="editExam(scope.row)" style="margin-left:10px;" class="operationText">
                  <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                  <span style="white-space: nowrap;display:flex;align-items:center">编辑</span>
                </div>
                <div @click="examDetail(scope.row)" style="margin-left:10px;" class="operationText">
                  <img src="@/assets/images/icon-detail.png" width="15px" height="15px" />
                  <span style="white-space: nowrap;display:flex;align-items:center">试题详情</span>
                </div>
                <el-button size="mini" type="text" style="color:#ec4b52;margin-left:10px;font-size:14px" class="delete-btn" icon="el-icon-delete" @click.native.stop="removeExam(scope.row) ">
                  <span style="color:black">删除</span>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pagerBox" @size-change="sizeChange" @current-change="currentChange" :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize" layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background></el-pagination>
      </div>
      <!-- 新增 -->
      <el-dialog :modal-append-to-body="false" :title="title" :visible.sync="dialogVisible" width="660px">
        <div class="dialogContainer">
          <!-- <div class="dialogLeft"> -->
            <el-form :model="examForm" ref="examForm" :rules="examRules" label-width="100px" class="demo-ruleForm">
              <el-form-item label="考试科目" prop="subjectId" >
                <el-select v-model="examForm.subjectId" placeholder="请选择">
                  <el-option :label="item.name" :value="item.id" v-for="(item,i) in examSubjectList" :key="i"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试卷名称" prop="name" >
                <el-input v-model="examForm.name"></el-input>
              </el-form-item>
              <el-form-item label="考试时间" prop="duration" >
                <el-input-number :min="0" :controls="false" :precision="0" style="width: 190px" v-model="examForm.duration"></el-input-number>
                <span style="margin-left: 10px;color:#a6a7b2;">分钟</span>
              </el-form-item>
              <el-form-item label="及格分数线" prop="passLine" >
                <el-input-number :min="0" :max="100" :controls="false" :precision="0" style="width: 190px" v-model="examForm.passLine"></el-input-number>
                <span style="margin-left: 10px;color:#a6a7b2;">分</span>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" rows="3" :show-word-limit="true" v-model="examForm.remark"></el-input>
              </el-form-item>
              <el-form-item label="抽题模式" prop="checkQuestionType" >
                <el-radio-group v-model="examForm.checkQuestionType" @input="handleDialog">
                  <div style="display:flex">
                    <!-- <div @click="dialogVisible2 = true"> -->
                    <div @click="openDoor">
                      <el-radio :label="1">手动抽题</el-radio>
                    </div>
                    <div style="margin-left:10px" @click="dialogVisible3 = true">
                      <el-radio :label="2">随机抽题</el-radio>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
              <!-- @click="submitForm('examForm')" -->
            </el-form>
          <!-- </div> -->
        </div>
        <div class="dialogFooter">
          <el-button @click="dialogVisible = false"><i class="el-icon-circle-close"></i> 取 消</el-button>
          <el-button type="primary" @click="submitBtn('examForm')"><i class="el-icon-circle-check"></i> 确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增-手动抽题 -->
      <el-dialog :modal-append-to-body="false" :title="'手动抽题'" :visible.sync="dialogVisible2" width="1200px">
        <div class="dialogContainer2">
          <div class="d2Left">
            <el-tree 
            :data="level1CompanyData" 
            :highlight-current="true"
             :check-on-click-node="false" 
             :props="defaultProps1" 
             style="margin-top: 10px;" 
             ref="groupTreeList"  
             @node-click="onNodeClick"
             :current-node-key="currentNodekey"
             node-key="id">
              <span class="custom-tree-node" slot-scope="{ node }">
                <span style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;" class="courseName" :title="node.label">
                  {{ node.label }}
                </span>
              </span>
            </el-tree>
          </div>
          <div class="d2Right">
            <el-table class="tables" height="500px" ref="questionListTable" :data="questionList" style="min-height:425px">
              <el-table-column type="selection" align="center" width="55"></el-table-column>
              <el-table-column align="" prop="questionName" label="题干内容">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.questionName" placement="left">
                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ scope.row.questionName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80px" label="题目类型">
                <template slot-scope="scope">
                <div>{{ scope.row.type && typeArr[scope.row.type - 1].name }}</div>
              </template>
              </el-table-column>
              <el-table-column prop="difficulty" align="center" width="80px" label="难易程度">
                <template slot-scope="scope">
                  <div>{{  scope.row.difficulty && levelArr[scope.row.difficulty - 1].name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="score" align="center" width="80px" label="分数"></el-table-column>
              <el-table-column prop="options" align="center" width="80px" label="试题答案"></el-table-column>
              <el-table-column prop="createTime" align="center" width="170px" label="创建时间"></el-table-column>
              <el-table-column prop="isEnable" align="center" width="100px" label="状态">
                <template slot-scope="scope">
                  <div :style="scope.row.isEnable == 1 ? 'color: green' : 'color: red'">{{  scope.row.isEnable == 1 ? "已应用" : "未应用" }}</div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination class="pagerBox" @size-change="sizeChange" @current-change="currentChange" :current-page="question.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="question.pageSize" layout="total, sizes, prev, pager, next" :total="Number(question.total)" background></el-pagination> -->
          </div>
        </div>
        <div class="dialogFooter">
          <el-button @click="cancel2()"><i class="el-icon-circle-close"></i> 取 消</el-button>
          <el-button type="primary" @click="submitBtn2('1')"><i class="el-icon-circle-check"></i> 确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增-随机抽题 -->
      <el-dialog :modal-append-to-body="false" :title="'随机抽题'" :visible.sync="dialogVisible3" width="1200px">
        <div class="dialogContainer3">
          <div>
            <div style="margin-left:56px;margin-bottom:20px">
              <el-radio-group v-model="randomQuestion.radio" @input="handleSelect" clearable>
                <el-radio label="0">从指定科目类型中选择</el-radio>
                <el-radio label="1">从全部题库中选择</el-radio>
              </el-radio-group><br>
              <el-select v-model="randomQuestion.name" :disabled="isDisabled" size="mini" placeholder="请选择" style="margin-top: 5px" clearable>
                <el-option :label="item.name" :value="item.id" v-for="(item,i) in subjectNameList" :key="i"></el-option>
                <!-- <el-option v-for="item in subjectNameList" :key="item.value" :label="item.name" :value="item.value"></el-option> -->
              </el-select>
            </div>
            <div>
              <div>单选题:
                <el-select v-model="randomQuestion.examSingle.diffculty" @change="singleChange" size="mini" placeholder="请选择难易程度" style="margin-top: 5px" clearable>
                  <el-option v-for="item in levelArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
                <el-select ref="singleRef" v-model="randomQuestion.examSingle.count" size="mini" placeholder="请选择" style="margin-top: 5px;margin-left:5px" clearable>
                  <el-option v-for="item in radioDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select> 道 当前题库单选题{{radioDataList.length}}道
              </div>
              <div>多选题:
                <el-select v-model="randomQuestion.examMultiple.diffculty" @change="multipleChange" size="mini" placeholder="请选择难易程度" style="margin-top: 5px" clearable>
                  <el-option v-for="item in levelArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="randomQuestion.examMultiple.count" size="mini" placeholder="请选择" style="margin-top: 5px;margin-left:5px" clearable>
                  <el-option v-for="item in checkDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select> 道 当前题库多选题{{checkDataList.length}}道
              </div>
              <!-- <div>单选题:
                <el-select v-model="randomQuestion.examSingle.diffculty" size="mini" placeholder="请选择难易程度" style="margin-top: 5px">
                  <el-option v-for="item in levelArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="randomQuestion.examSingle.count" size="mini" placeholder="请选择" style="margin-top: 5px;margin-left:5px">
                  <el-option v-for="item in radioDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select> 道 当前题库单选题{{radioDataList.length}}道
              </div>
              <div>多选题:
                <el-select v-model="randomQuestion.examMultiple.diffculty" size="mini" placeholder="请选择难易程度" style="margin-top: 5px">
                  <el-option v-for="item in levelArr" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="randomQuestion.examMultiple.count" size="mini" placeholder="请选择" style="margin-top: 5px;margin-left:5px">
                  <el-option v-for="item in checkDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select> 道 当前题库多选题{{checkDataList.length}}道
              </div> -->

            </div>
          </div>
        </div>
        <div class="dialogFooter" style="margin-top:30px">
          <el-button @click="cancel3()"><i class="el-icon-circle-close"></i> 取 消</el-button>
          <el-button type="primary" @click="submitBtn3('0')"><i class="el-icon-circle-check"></i> 确 定</el-button>
        </div>
      </el-dialog>
      <!-- 考试详情 -->
      <el-dialog :modal-append-to-body="false" :title="'试卷详情'" :visible.sync="dialogVisible4" width="1200px">
        <div class="dialogContainer4">
          <div class="d4Top">
            <div class="topTitle"><div class="beforeTitle"></div>
              <div class="">基本信息</div>
            </div>
            <div style="width:80%;display:grid;grid-gap:20px;grid-template-columns: repeat(2, 1fr);">
              <p style="margin-bottom: 10px; margin-left:20px;width:50%">科目名称：{{examDetailInfo.name}}</p>
              <p style="margin-bottom: 10px; margin-left:20px;width:50%">试题名称：{{examDetailInfo.name}}</p>
              <p style="margin-bottom: 10px; margin-left:20px;width:50%">考试时长：{{examDetailInfo.duration}}</p>
              <p style="margin-bottom: 10px; margin-left:20px;width:50%">及格分数：{{examDetailInfo.passLine}}</p>
              <p style="margin-bottom: 10px; margin-left:20px;width:200%">考试备注：{{examDetailInfo.remark}}</p>
              <!-- <p style="margin-bottom: 10px; margin-left:20px"><span style="color: #ea3941">* </span>考试周期：{{examDetailInfo.beginTime}}至{{examDetailInfo.endTime}}</p> -->
            </div>
          </div>
          <div class="d4Bottom">
            <div class="bottomTitle">
              <div class="beforeTitle"></div>
              <div class="">试题详情</div>
            </div>
            <el-table class="tables" :data="examDetailInfo.topiceExamInfoList" height="200" style="min-height:300px">
              <el-table-column align="center" type="index" label="序号"></el-table-column>
              <el-table-column align="center" prop="questionName" label="试题内容" ></el-table-column>
              <el-table-column align="center" prop="questionType" label="题型" width="100">
                <template slot-scope="scope">
                  <div>{{ typeArr[scope.row.type - 1].name  }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="optionList" label="选项">
                <template slot-scope="scope">
                  <div style="margin-left:10px">
                    <div v-for="(item,i) in scope.row.optionList" :key="i">
                      <p style="padding-right:0px;">{{item.optionCode}}、{{item.optionDesc}}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="score" label="分数" width="100"></el-table-column>
              <el-table-column align="center" prop="options" label="答案"></el-table-column>

            </el-table>
          </div>
        </div>
        <!-- <div class="dialogFooter">
          <el-button @click="dialogVisible3 = false"><i class="el-icon-circle-close"></i> 取 消</el-button>
          <el-button type="primary" @click="submitBtn3('0')"><i class="el-icon-circle-check"></i> 确 定</el-button>
        </div> -->
      </el-dialog>
    </div>
    <!-- 考试管理 -->
    <div class="examManageContainer" v-show="isExamManage">
      <div class="searchBox whiteBlock">
        <div class="emcHeaderInfo">
          <div class="emcTitle">
            <div style="display:flex">
              <div class="beforeTitle"></div>
              <div class="">考试管理</div>
            </div>
            <div><el-button type="primary" size="mini" plain @click="isExamManage = !isExamManage">返 回</el-button></div>
          </div>
          <div class="emcHeader">
            <div class="">试题总分：{{examManageInfo.examTotalScore}}分</div>
            <div class="headerItem">及格分数线：{{examManageInfo.passLine}}分</div>
            <div class="headerItem">考题数量：{{examManageInfo.radio + examManageInfo.multi}}题</div>
            <div class="headerItem">考试有效期：{{examManageInfo.beginTime}}至{{examManageInfo.endTime}}</div>
            <div class="headerItem">目前参考人数：{{examManageInfo.joinCount}}人</div>
            <div class="headerItem">目前缺考人数：{{examManageInfo.noJoinCount}}人</div>
          </div>
        </div>
      </div>
      <div class="table_wrap whiteBlock" style="height: 677px">
        <!-- 考试管理Tab -->
        <el-tabs v-model="emActiveTab" @tab-click="handleEmTab" style="padding: 0 15px;">
          <el-tab-pane :label="'考试记录'" name="examRecord"></el-tab-pane>
          <!-- <el-tab-pane :label="'数据分析'" name="dataAnalysis"></el-tab-pane> -->
        </el-tabs>
        <div v-show="emActiveTab === 'examRecord'">
          <el-form :inline="true" size="medium" class="demo-form-inline" style="margin-left:20px">
            <el-form-item label="姓名">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="选择日期">
              <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button class="expintBtn" size="medium" plain type="primary">查询</el-button>
              <el-button class="expintBtn" size="medium" type="primary">导出明细</el-button>
            </el-form-item>
          </el-form>
          <el-table class="tables" style="min-height:500px" :data="listData" height="200" max-height="530px">
            <el-table-column width="200" align="center" prop="name" label="科目"></el-table-column>
            <el-table-column align="center" prop="questionName" label="试题名称"></el-table-column>
            <el-table-column align="center" prop="examCycle" label="考试周期"></el-table-column>
            <el-table-column align="center" prop="examPersonCount" label="考试人数"></el-table-column>
            <el-table-column align="center" prop="examSingle" label="单选题"></el-table-column>
            <el-table-column align="center" prop="examMultiple" label="多选题"></el-table-column>
            <el-table-column align="center" prop="examJudge" label="判断题"></el-table-column>
            <el-table-column align="center" prop="uploadPerson" label="上传人"></el-table-column>
            <el-table-column align="center" prop="uploadTime" label="上传时间"></el-table-column>
          </el-table>
          <el-pagination class="pagerBox" style="margin-top: 10px" @size-change="examSizeChange" @current-change="examCurrentChange" :current-page="examPagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="examPagInfo.pageSize" layout="total, sizes, prev, pager, next" :total="Number(examPagInfo.total)" background></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSubdivisionProjectApi, //所有分部分项工程， 以父子节点形式呈现
  addSubdivisionProjectApi, //新增
  upSubdivisionProjectApi, //修改
  delSubdivisionProjectApi, //
} from '@/assets/js/api/quality'
import { filterAnswer } from "@/util/nowDate/index";
import {
  listExamSubjectApi,
  getWorkerInfoListApi, 
  // getTeamInfoListApi,
  getDepartmentListApi,
  addCourseApi,
  pageCourseApi,
  pageQuestionBankApi,
  getQuestionOption,
  addPaperApi,
  editPaperApi,
  pagePaperApi,
  detailIdPaperApi,
  pageRecordApi,
  delPaperApi,
  getRandomQuestionApi
} from '@/assets/js/api/examSystem/examSystem'

import {
  dateFormat
} from '@/util/nowDate/index'


export default {
  mounted() {},
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${ i }`,
          // disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      title:"",
      levelArr: [
        { name: "简单", value: 1 },
        { name: "一般", value: 2 },
        { name: "困难", value: 3 },
      ],
      typeArr: [
        { name: "单选题", value: 1 },
        { name: "多选题", value: 2 },
      ],
      ruleForm:{},
      defaultProps1: {
        // children: "list",
        children: "children",
        label: "name",
        // label: "label",
      },
      isDisabled: true,  //随机抽题select选择器开关
      randomQuestion:{
        examSingle:{
          diffculty:"",
          count: null
        },
        examMultiple:{
          diffculty:"",
          count: null
        },
        examJudge:{},
        radio:"1",
        name:"",
      },
      emActiveTab: 'examRecord',
      examManageInfo:{examTotalScore:'100',passLine: 60,questionCount: '100', examPeriod: '2024-05-12 00:00:00-2024-06-01 00:00:00', joinCount: '100',noJoinCount: '2'},
      isExamManage: false, // 考试管理开关
      examInfoList: [], // 考试信息列表
      activeTab: '1',   // 考试信息列表Tab
      examDetailInfo:{},  // 考试基本信息
      level1CompanyData: [],
      defaultProps: { // 随机抽题左边树形映射数据
        children: "children",
        label: "workerName",
      },
      questionList: [],
      name: '',  // 科目名字
      questionName: '', // 试题名称
      data: generateData(),
      value: [1],
      renderFunc(h, option) {
        return <span>{ option.key } - { option.label }</span>;
      },
      examForm: {
        subjectId:'',
        name:'',
        duration:'',
        passLine:'',
        remark:'',
        checkQuestionType:'',
        questions:[]
      },
      subjectNameList: [
        { value: '选项1', label: '黄金糕' }, 
        { value: '选项2', label: '双皮奶' }, 
        { value: '选项3', label: '蚵仔煎' }, 
        { value: '选项4', label: '龙须面' }, 
        { value: '选项5', label: '北京烤鸭' }
      ],
      pagInfo: {
        //公用分页
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      examPagInfo:{
        //公用分页
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      examDetailPagInfo:{
        //公用分页
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      projectSn: '',
      dialogVisible: false, //新增弹窗
      dialogVisible2: false, //新增二级弹窗
      dialogVisible3: false, //新增三级弹窗
      dialogVisible4: false, //考试详情弹窗
      workerInfo: {
        children: [],
        id: '',
        level: 0,
        parentId: '',
      },
      listData: [],
      listData3: [
        { ruleType: '1', symbol: '+', ruleScore: 3 },
        { ruleType: '', symbol: '', ruleScore: '' },
      ],
      examRules:{
        subjectId: [
          {
            required: true,
            message: '必填',
            trigger: 'change',
          },
        ],
        name: [
          {
            required: true,
            message: '必填',
            trigger: 'change',
          },
        ],
        duration: [
          {
            required: true,
            message: '必填',
            trigger: 'blur',
          },
        ],
        passLine: [
          {
            required: true,
            message: '必填',
            trigger: 'blur',
          },
        ],
        checkQuestionType: [
          {
            required: true,
            message: '必填',
            trigger: 'change',
          },
        ],
      },
      dialogImageUrl: '',
      showBigImg: false,
      examSubjectList: [],                          // 科目类别列表

      compulsoryList: [],                           

      addCourseForm: {},                            // 新增课程表单
      personType: 0,                                // 人员类型

      personnelName:"",                             // 人员名称

      // 题目列表
      question: {
        //公用分页
        pageNo: 1,
        pageSize: 100000,
        total: 0,
      },
      questionSubjectId:'',
      currentNodekey:"",
      checkList:[],

      examAddDetail:{
        questions:[],
      },
      filterDataList:[],
      radioNum:0,
      checkNum:0,
      radioDataList:[],
      checkDataList:[],
      randomQueryList:[],
      randomQuestionList:[]
    }
  },
  filters: {
    filterAnswerIndex(index) {
      return filterAnswer(index);
    },
  },
  computed:{

  },
  watch: {
    dialogVisible(newV,oldV){
      if(this.dialogVisible === false) {
        // this.$refs.examForm.resetFields()
      }
      if(this.title === '新增考试') {
        this.$refs.examForm.resetFields()
        this.clearDialog()
      }
    },
    "randomQuestion.examSingle.diffculty"(){
      console.log(this.randomQuestion.examSingle.diffculty,this.filterDataList);
      this.radioDataList = this.filterDataList.filter(item => item.type == 1 && item.difficulty == this.randomQuestion.examSingle.diffculty).map((item,index) => {
         return {
           value: index+1,
           lable: index+1,
         }
      });
    },
    "randomQuestion.examMultiple.diffculty"(){
      this.checkDataList = this.filterDataList.filter(item => item.type == 2 && item.difficulty == this.randomQuestion.examMultiple.diffculty).map((item,index) => {
         return {
           value: index+1,
           lable: index+1,
         }
      });
    },
    "randomQuestion.name"(){
      console.log(this.randomQuestion.name);
      this.clearFilter();
       this.getList({
            pageNo: 1,
            pageSize: 99999,
            questionName: "",
            questionSubjectId: this.randomQuestion.name,
      })
    },
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    this.getRecordList()

     this.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;

     this.getList();
     this.getExamSubjectList()
    //  this.userEnterpriseId = "1706588724057112577";//测试用
    // this.loadData() // 查询班组及部门
  },
  methods: {
    cancel2(){
      // this.examForm.checkQuestionType = null
      this.dialogVisible2 = false
    },
    cancel3(){
      // this.examForm.checkQuestionType = null
      this.dialogVisible3 = false
    },
    singleChange(){
      // 清空选中的值
      this.randomQuestion.examSingle.count = null
    },
    multipleChange(){
      this.randomQuestion.examMultiple.count = null
    },
    getRandomQuestion(){
      this.randomQueryList = []
      let singleRandom = {
        type:1,
        number:this.randomQuestion.examSingle.count,
        difficulty:this.randomQuestion.examSingle.diffculty,
        subjectId:this.randomQuestion.examSingle.name,
      }
      let multipleRandom = {
        type:2,
        number:this.randomQuestion.examMultiple.count?this.randomQuestion.examMultiple.count:'',
        difficulty:this.randomQuestion.examMultiple.diffculty?this.randomQuestion.examMultiple.diffculty:'',
        subjectId:this.randomQuestion.examMultiple.name?this.randomQuestion.examMultiple.name:'',
      }
      this.randomQueryList.push(singleRandom)
      this.randomQueryList.push(multipleRandom)
      console.log(this.randomQueryList)
      getRandomQuestionApi(this.randomQueryList).then((res) =>{
        if(res.success){
          this.randomQuestionList = res.result
        }
      })
    },
    removeExam(obj){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // alert('还未对接口')
          delPaperApi({ id: obj.id }).then((res) => {
            if (res.success) {
              // this.getRecordList()
              this.$message.success('删除成功')
              this.refreshFn()
            } else {
              this.$message({
                type: 'error',
                message: res.message,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    clearFilter(){
      this.randomQuestion.examSingle.diffculty = "";
      this.randomQuestion.examSingle.count= null;
      this.randomQuestion.examMultiple.diffculty= "";
      this.randomQuestion.examMultiple.count= null;
      this.radioDataList = [];
      this.filterDataList = [];
    },
    getList(row) {
      pageQuestionBankApi({
        pageNo: row ? row.pageNo : this.question.pageNo,
        pageSize: row ? row.pageSize : this.question.pageSize,
        questionName: "",
        subjectId: row ? row.questionSubjectId : this.questionSubjectId,
        isEnable:1
      }).then((result) => {
        if (result.success) {
          console.log(result);
          if(row){
            console.log("我是~~~~~~~");
            this.filterDataList = result.result.records;
          }else {
            this.questionList = result.result.records;
            this.question.total = result.result.total
          }
        }
      })
    },
    getExamSubjectList() {  // 获取科目类别列表
      let data = {
        sn: this.projectSn,
      }
      // listTreeExamSubjectApi(data).then((res) => {
      listExamSubjectApi(data).then((res) => {
        if (res.code == 200) {
          this.examSubjectList = res.result
          this.level1CompanyData = res.result
          this.subjectNameList = res.result
          // console.log('==========考试科目列表==========',this.listData)
        }
      })
    },
    
    handleClose(){  // 关闭弹框
      this.clearObj()
      this.dialogVisible = false
    },
    clearObj(){ //清空表单
      this.addCourseForm = {}
    },
    handleEmTab(val){

    },
    gotoExamManage(val){
      console.log(val);

      this.examManageInfo = val;

      pageRecordApi({
        pageNo: this.examPagInfo.pageNo,
        pageSize: this.examPagInfo.pageSize,
        id: val.id,
      }).then((result) => {
        if (result.success) {
          console.log(result);
        }
    })
      
      
      this.isExamManage = true;
    },
    async examDetail(val) {
      console.log("~~~~~~~~~~~~~~",val);
      this.examDetailInfo = val;
      // await pageQuestionBankApi({
      await getQuestionOption({
        // pageNo: 1,
        // pageSize: 10000,
        id: val.id,
        projectSn: this.projectSn
      }).then((result) => {
        if (result.success) {
          this.examDetailInfo.topiceExamInfoList = result.result;
          console.log(this.examDetailInfo.topiceExamInfoList,'11111111111111111111111')
          this.dialogVisible4 = true
        }
      })
    },
    
   //新增按钮
    async addExam() { // 打开弹窗
      this.personType = 1
      this.title = "新增考试";
      this.dialogVisible = true
    },
    openDoor(){
      // this.examForm.questions = this.examForm.questions.split(',')
      if(this.title === '编辑考试'){
        let tempStr = this.examForm.questions.split(',')
        this.$nextTick(() => {
          for(let i=0;i<this.questionList.length;i++){
            for(let j = 0;j<tempStr.length;j++){
              if(tempStr[j] == this.questionList[i].id){
                this.$refs.questionListTable.toggleRowSelection(this.questionList[i],true)
              }
            }
          }
        })
      }
      this.dialogVisible2 = true
    },
    //编辑按钮
    async editExam(row) { // 打开弹窗
      this.personType = 1
      this.title = "编辑考试";
      // console.log(row);
      this.examForm = JSON.parse(JSON.stringify(row))
      
      

      console.log(this.examForm);
      this.dialogVisible = true
    },
    //删除按钮
    deleteBefore(val) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // delSubdivisionProjectApi({ id: val }).then((res) => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!',
          //   })
          //   this.getRecordList()
          // })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //获取列表数据
    getRecordList() {
      let data = {
        projectSn: this.projectSn,
      }

      pagePaperApi({
          pageNo: this.pagInfo.pageNo,
          pageSize: this.pagInfo.pageSize,
          name: this.questionName,
          subjectId:this.name,
        }).then((result) => {
          if (result.success) {
            console.log(result);
            this.listData = result.result.records
            this.pagInfo.total = result.result.total
          }
      })
    },
    //新增/编辑
    submitBtn() {

      console.log(this.compulsoryList)
      this.$refs.examForm.validate((valid) => {
        if (valid) {
          let examInfo = {
              checkQuestionType:this.examForm.checkQuestionType,
              name:this.examForm.name,
              duration:this.examForm.duration,
              passLine:this.examForm.passLine,
              projectSn:this.$store.state.projectSn,
              subjectId:this.examForm.subjectId,
              remark:this.examForm.remark,
              questions:this.examForm.checkQuestionType == 1 ? this.examForm.questions.map(item => item.id).join(',') : this.randomQuestionList.map(item => item.id).join(','),
              examRecordList:this.compulsoryList.map(item => {
                return {
                  id:item.id,
                }
              }),
              radio:this.examForm.checkQuestionType == 1 ? this.examForm.questions.filter(item => item.type == 1).length : this.randomQuestion.examSingle.count,
              multi:this.examForm.checkQuestionType == 1 ? this.examForm.questions.filter(item => item.type == 2).length : this.randomQuestion.examMultiple.count,
          }
          
          if (this.title == '新增考试') {
            addPaperApi(examInfo).then((res) => {
              this.$message.success('新增成功')
              this.handleClose()
              this.getRecordList()
            })
          } else {
            examInfo.id = this.examForm.id
            editPaperApi(examInfo).then((res) => {
              if(res.success){
                this.$message.success('编辑成功')
                this.handleClose()
                this.getRecordList()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 手动抽题/随机抽题dialog开关
    handleDialog(val){
      // if(val === '1'){
      if(val === 1){
        this.currentNodekey = this.subjectNameList[0].id;
          this.$nextTick(() => {
            this.$refs.groupTreeList.setCurrentKey(this.subjectNameList[0].id) // 默认选中节点第一个
          })
        this.questionSubjectId = this.subjectNameList[0].id;
        this.getList();
        this.dialogVisible2 = false
        this.dialogVisible2 = true
      }
      // if(val === '2'){
      if(val === 2){
        this.dialogVisible3 = false;
        if(this.randomQuestion.radio == 1) {
          this.getList({
            pageNo: 1,
            pageSize: 99999,
            questionName: '',
            subjectId: '',
          })
        }
       
        this.dialogVisible3 = true;
      }
    },
    onNodeClick(e) {
      console.log(e);
      this.questionSubjectId = e.id;
      this.getList()
    },
    // 随机抽题下拉框select开关
    handleSelect(val){
      this.randomQuestion.name = ''
      this.clearFilter();
      if(val === '0') {
        this.isDisabled = false
      }
      if(val === '1') {
        this.isDisabled = true
      }
    },
    clearDialog(){
      this.examForm = {
        subjectId:'',
        name:'',
        duration:'',
        passLine:'',
        remark:'',
        checkQuestionType:'',
      }
    },
    //切换条数
    sizeChange(val) {
      this.pagInfo.pageSize = val
      this.getRecordList()
    },
    //切换页数
    currentChange(val) {
      this.pagInfo.pageNo = val
      this.getRecordList()
    },
    //切换条数
    examSizeChange(val) {
      this.examPagInfo.pageSize = val
    },
    //切换页数
    examCurrentChange(val) {
      this.examPagInfo.pageNo = val
    },
    //切换条数
    examDetailSizeChange(val) {
      this.examDetailPagInfo.pageSize = val
    },
    //切换页数
    examDetailCurrentChange(val) {
      this.examDetailPagInfo.pageNo = val
    },
    
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    submitBtn2(){
      this.examForm.questions = this.$refs.questionListTable.selection;
      this.dialogVisible2 = false;
    },
    submitBtn3(){
      this.getRandomQuestion()
      this.dialogVisible3 = false;
    },
    refreshFn(){
      this.pagInfo.pageNo = 1
      this.getRecordList()
    }
  },
}
</script>
<style lang="less" scoped>
.fixOption{
  margin-left: 20px;
}
//examManage
.examManageContainer{
  width: 100%;
  height: 100%;
  .emcHeaderInfo{
    width: 100%;
    .emcTitle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 500;
      .beforeTitle{
        height: 16px;
        width: 3px;
        border-radius: 3px;
        background-color: #4181EF;
        margin-right: 13px;
      }
    }
    .emcHeader{
      display: flex;
      .headerItem{
        margin-left: 25px;
      }
    }
  }
}
//examManage

// dialog4
.dialogContainer4{
  // width: 100%;
  height: 550px;
  padding: 0 20px;
  .d4Top{
    width: 100%;
    height: 33%;
    .topTitle{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30px;
      font-size: 16px;
      font-weight: 500;
      .beforeTitle{
        height: 16px;
        width: 3px;
        border-radius: 3px;
        background-color: #4181EF;
        margin-right: 13px;
      }
    }
  }
  .d4Bottom{
    width: 100%;
    height: 67%;
    .bottomTitle{
      border-top: 1px solid #f3f5fc;
      border-bottom: 1px solid #f3f5fc;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30px;
      font-size: 16px;
      font-weight: 500;
      height: 40px;
      .beforeTitle{
        height: 16px;
        width: 3px;
        border-radius: 3px;
        background-color: #4181EF;
        margin-right: 13px;
      }
      .tabItem{
        cursor: pointer;
        margin-left: 20px;
        &.active{
          font-weight: bold;
          color: #4181EF;
        }
      }
    }
  }
}
// dialog4

// dialog3
.dialogContainer3{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
// dialog3

// dialog2
.dialogContainer2{
  display: flex;
  justify-content: space-between;
  width:100%;
  height:545px;
  .d2Left{
    width: 25%;
    height: 100%;
    // background-color: darkred;
  }
  .d2Right{
    width: 75%;
    height: 90%;
    // background-color: darkblue;

  }
}
// dialog2

// dialog
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
.dialogContainer{
  width:100%;
  display: flex;
  // justify-content: space-between;
  justify-content: center;
  height:475px;
  /deep/ .el-dialog__body{
    padding: 0 20px;
  }
  .dialogLeft{
    width:100%;
    height:100%;
    /deep/ .el-textarea .el-input__count{
      margin: -50px -10px -40px -50px;
      background-color: rgb(1, 1, 1, 0);
    }
    // background-color: darkred;
    /deep/ .el-upload-dragger {
      width: 230px;
      height: auto;
    }
    /deep/ .el-input {
      width: 230px;
    }
    /deep/ .el-textarea {
      width: 230px;
    }
    /deep/ .el-date-editor--daterange.el-input__inner {
      width: 230px;
    }
    /deep/ .el-upload-dragger .el-icon-upload{
      margin: 0 0 0;
    }
    /deep/ .el-upload__tip{
      margin: 0 0 0;
    }
    /deep/ .el-upload--picture-card{
      width: 100px;
      height: 100px;
      line-height: 102px;
    }
  }
  .dialogRight{
    
    width:65%;
    height:95.9%;
    // background-color: darkblue;
    display: flex;
    .transLeft{
      width:50%;
      height:100%;
      // background-color: darkred;
      border: 1px solid #d7dbe9;
      border-radius: 3px;
      .tlOne{
        margin: 5px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tlTwo{
        margin: 0 5px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;

      }
      .tlThree{
        // border: 1px solid;
        height: 480px;
        .dialog-tree{
          margin:0px 0px;
          .treeStyle();
          /deep/.el-tree-node__content{
            position: relative;
          }
          /deep/.el-tree-node__content > label.el-checkbox{
            position: absolute;
            right: 0;
          }
        }
      }
    }
    .transMid{
      width:10%;
      height:100%;
      .transBtn{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    .transRight{
      width:40%;
      height:100%;
      border: 1px solid #d7dbe9;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .trItem{
        // background-color: blue;
        height:98%;
        margin: 0 5px;
        .trItemInner{
          border: 1px solid #d7dbe9;
          border-radius: 3px;
          height: 95.8%;
          margin: 5px 0px;
          .innerOne{
            margin: 5px 5px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .innerTwo{
            margin: 5px 5px;
          }
          .innerThree{
            margin: 0 5px;
            // border: 1px solid;
            height: 172px;
          }
        }
      }
    }
  }
}
.dialogFooter{
  display: flex;
  justify-content: center;
}
//dialog

.greenSpan {
  color: green;
}
.detailIcon {
  background: url(~@/assets/images/projectImg/numBgc.png);
}
.down {
  text-decoration: none;
  color: #fff;
}
.expintBtn {
  display: inline-block !important;
  margin-right: 10px;
}
.table_wrap {
  height: 800px;
  overflow: auto;
  margin-top: -15px;
}
.treeStyle(){
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 55px);
        display: inline-block;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
      padding: 0 6px;
      &.is-leaf {
        color: transparent !important;
      }
    }
    .treeTitle {
      background-color: #f7f7f7;
      margin-bottom: 10px;
    }
  }
}
</style>
  