<template>
  <div class="main-content">
    <div class="left">
      <div class="left-title">
        科目类型
      </div>
      <div class="left-tree">
        <el-tree
          :current-node-key="currentNodekey"
          node-key="id"
          :data="level1CompanyData"
          :highlight-current="true"
          :check-on-click-node="false"
          :props="defaultProps"
          style="margin-top: 10px;"
          @node-click="onNodeClick"
          ref="groupTreeList"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <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>
    <div class="right">
      <div class="search_wrap">
        <el-form
          :model="tableParameter"
          size="medium"
          :inline="true"
          class="demo-form-inline"
        >
          <el-form-item label="试题内容">
            <el-input
              v-model="tableParameter.name"
              suffix-icon="el-icon-search"
              placeholder="请搜索试题内容"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="inquireBtn">{{
              $t("message.laborMange.inquire")
            }}</el-button>
            <el-button type="warning" @click="refreshBtn" plain>{{
              $t("message.laborMange.refresh")
            }}</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="medium" @click="addQuestionBtn"
          >添加试题</el-button
        >
      </div>
      <vue-scroll style="height: calc(100% - 160px)">
        <el-table
          ref="multipleTable"
          :data="tableListData"
          tooltip-effect="dark"
          style="width: 100%; color: #737996"
          @selection-change="handleCheckedCitiesChange"
        >
          <el-table-column prop="questionName" label="试题内容"></el-table-column>
          <el-table-column prop="type" width="100px" label="题目类型">
            <template slot-scope="scope">
              <div>{{ scope.row.type && typeArr[scope.row.type - 1].name }}</div>
              <!-- <div>
                  {{ $t('message.laborMange.contactNumber') }}：
                  <span class="values">{{ scope.row.phoneNumber }}</span>
                </div>
                <div class="personItemBottom">
                  {{ $t('message.laborMange.belongsToTeam') }}：
                  <span class="values">{{ scope.row.teamName }}</span>
                </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" width="100px" 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" width="100px" label="试题分数">
            <!-- <template slot-scope="scope">
              <div>{{  scope.row.difficulty && levelArr[scope.row.difficulty - 1].name }}</div>
            </template> -->
          </el-table-column>
          <el-table-column prop="options" width="100px" label="试题答案">
            <template slot-scope="scope">
              {{sortedOptions(scope.row.options)}}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" width="180px" label="创建时间"></el-table-column>
          <el-table-column prop="isEnable" width="80px" 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-column
            :label="$t('message.deviceManage.operation')"
            align="center"
            width="270px"
          >
            <template slot-scope="scope">
              <div class="operation-style">
                <div class="operationText" @click="editQuestionBtn(scope.row)">
                  <img
                    src="@/assets/images/tableIcon/icon-edit.png"
                    width="15px"
                    height="15px"
                  />
                  <span>编辑</span>
                </div>
                <div class="operationText" @click="previewDialog(scope.row)">
                  <img
                    src="@/assets/images/tableIcon/preview.png"
                    width="15px"
                    height="15px"
                  />
                  <span>预览</span>
                </div>
                <div class="operationText" @click="moveDialogQuestionBank(scope.row)">
                  <img
                    src="@/assets/images/tableIcon/move.png"
                    width="15px"
                    height="15px"
                  />
                  <span>移动</span>
                </div>
                <div class="operationText" @click="deleteQuestionBank(scope.row)">
                  <img
                    src="@/assets/images/tableIcon/icon-delete.png"
                    width="15px"
                    height="15px"
                  />
                  <span>删除</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
      <div class="flex table_wrap_bottom">
        <div>
          <el-pagination
            class="pagerBox"
            style="margin-top: 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(total)"
            background
          ></el-pagination>
          <!--  -->
        </div>
      </div>
    </div>
    <!-- 新增试题 -->
    <el-dialog
      :title="title"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="questionForm"
          label-width="110px"
          size="medium"
          :model="questionForm"
          style="width: 75%;margin: 0 auto;"
          :rules="questionFormRules"
        >
          <el-form-item label="试题内容" prop="questionName">
            <el-input
              type="textarea"
              v-model="questionForm.questionName"
              rows="2"
              placeholder="请输入"
            ></el-input>
              <!-- :minlength="0"
              :maxlength="500"
              @input="handleInputArea()" -->
          </el-form-item>
          <el-form-item label="科目类型" prop="subjectId">
            <el-select v-model="questionForm.subjectId" placeholder="请选择">
              <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="type">
            <el-select
              v-model="questionForm.type"
              placeholder="请选择"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in typeArr"
                :key="index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难易程度" prop="difficulty">
            <el-select
              v-model="questionForm.difficulty"
              placeholder="请选择"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in levelArr"
                :key="index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题分数" prop="score">
            <el-input-number
              :min="0"
              :max="100"
              :precision="0"
              :controls="false"
              v-model="questionForm.score"
              placeholder="请输入试题分数"
            ></el-input-number>
              <!-- :label="$t('message.workType.placeholder')" -->
          </el-form-item>
          <el-form-item label="试题选型及答案"> </el-form-item>
          <!-- <vue-scroll style="height: 300px;"> -->
            
          <div class="question-list" v-show="questionForm.type == 1">
            <div v-if="title === '添加试题'">
              <el-radio-group v-model="radio">
                <div
                  class="question-list-item"
                  v-for="(item, index) in questionArr"
                  :key="index"
                >
                  <el-radio
                    :label="index"
                    >{{ index | filterAnswerIndex }}、</el-radio>
                  <el-input
                    v-model="item.questionContent"
                    placeholder="请输入"
                    size="medium"
                  ></el-input>
                  <i
                    class="el-icon-remove"
                    @click="deleteQuestionAnswer(index)"
                  ></i>
                </div>
              </el-radio-group>
            </div>
            <div v-if="title ==='编辑试题'">
              <el-radio-group v-model="questionForm.options">
                <div
                  class="question-list-item"
                  v-for="(item, index) in questionArr"
                  :key="index"
                >
                  <el-radio
                    :label="item.optionCode"
                    >{{ index | filterAnswerIndex }}、</el-radio>
                  <el-input
                    v-model="item.questionContent"
                    placeholder="请输入"
                    size="medium"
                  ></el-input>
                  <i
                    class="el-icon-remove"
                    @click="deleteQuestionAnswer(index)"
                  ></i>
                </div>
              </el-radio-group>
            </div>

          </div>
          <div class="question-list"  v-show="questionForm.type == 2">
            <div v-if="title === '添加试题'">
              <el-checkbox-group v-model="checkList">
                <div
                  class="question-list-item"
                  v-for="(item, index) in questionArr"
                  :key="index"
                >
                  <el-checkbox :label="index"
                    >{{ index | filterAnswerIndex }}、</el-checkbox
                  >
                  <el-input
                    v-model="item.questionContent"
                    placeholder="请输入"
                    size="medium"
                  ></el-input>
                  <i
                    class="el-icon-remove"
                    @click="deleteQuestionAnswer(index)"
                  ></i>
                </div>
              </el-checkbox-group>
            </div>
            <div v-if="title === '编辑试题'">
              <el-checkbox-group v-model="checkList">
                <div
                  class="question-list-item"
                  v-for="(item, index) in questionArr"
                  :key="index"
                >
                  <el-checkbox :label="index"
                    >{{ index | filterAnswerIndex }}、</el-checkbox
                  >
                  <el-input
                    v-model="item.questionContent"
                    placeholder="请输入"
                    size="medium"
                  ></el-input>
                  <i
                    class="el-icon-remove"
                    @click="deleteQuestionAnswer(index)"
                  ></i>
                </div>
              </el-checkbox-group>
            </div>
          </div>
     
          <!-- </vue-scroll> -->
          <div class="add-btn">
            <el-button
              size="medium"
              type="primary"
              plain
              @click="addQuestionAnswer()"
              >新增选项</el-button
            >
          </div>
          <el-form-item label="是否应用" prop="isApplication">
            <el-radio-group v-model="questionForm.isApplication">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button
          class="cancleBtn"
          @click="dialogVisible = false"
          icon="el-icon-circle-close"
          size="medium"
          >取消
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="submitQuestion"
          size="medium"
          >确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 移动 -->
    <el-dialog
      title="移动"
      :append-to-body="true"
      :visible.sync="moveDialogVisible"
      class="moveDialog"
      width="50%"
    >
      <div class="move-tree-content">
        <div class="tree-part">
          <el-tree
            :data="level1CompanyData"
            :highlight-current="true"
            :check-on-click-node="false"
            :props="defaultProps"
            ref="groupTree"
            @node-click="onNodeClick2"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <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>
      <div class="dialog-footer">
        <el-button
          class="cancleBtn"
          @click="moveDialogVisible = false"
          icon="el-icon-circle-close"
          size="medium"
          >取消
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="moveQuestionBank"
          size="medium"
          >确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog
      title="预览"
      :append-to-body="true"
      :visible.sync="previewDialogVisible"
      class="previewDialog"
      width="40%"
    >
      <div class="preview-content">
        <div class="preview-question-title">
          1、{{questionForm.questionName}}({{questionForm.type == 1 ? '单选题' : '多选题'}})
        </div>
        <div class="preview-question-content">
          <div class="preview-question-item" v-for="(item, index) in questionArr" :key="item.id">
            <el-radio v-model="questionForm.options" :label="item.optionCode" v-if="questionForm.type == 1"
              ><span></span></el-radio
            >
            <el-checkbox style="pointer-events: none;" :checked="multipleOption(item.optionCode,questionForm.options)" v-if="questionForm.type == 2"
              ><span></span></el-checkbox
            >
            <span class="active-style">{{ item.optionCode }}、{{item.optionDesc}}</span>
            <!-- <span class="active-style">{{ index | filterAnswerIndex }}、{{item.optionDesc}}</span> -->
          </div>
          <div style="width:90%;display:flex;justify-content:space-between;">
            <div>试题分数：{{questionForm.score}}</div>
            <div>难易程度：{{questionForm.difficulty === 1 ? '简单' : questionForm.difficulty === 2 ? '一般' : questionForm.difficulty === 3 ?'困难' : ''}}</div>
            <div>是否应用：{{questionForm.isEnable === 1 ? '是':'否'}}</div>
          </div>
          <!-- <div class="preview-question-item">
            <el-radio :label="true" v-if="questionForm.type == 1"
              ><span></span></el-radio
            >
            <el-checkbox v-if="questionForm.type == 2"
              ><span></span></el-checkbox
            >
            <span class="default-style">{{ 1 | filterAnswerIndex }}、456</span>
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { filterAnswer } from "@/util/nowDate/index";
import {
  listTreeExamSubjectApi,
  deleteQuestionBankApi,
  editQuestionBankApi,
  listExamSubjectApi,
  addQuestionBankApi,
  pageQuestionBankApi,
  exportQuestionBankApi,
  detailIdQuestionBankApi,
  moveQuestionBankApi,
  
} from '@/assets/js/api/examSystem/examSystem'
export default {
  name: "questionManagement",
  data() {
    return {
      radio: 0,
      questionArr: [{ isCheck: true, questionContent: "" },{ isCheck: true, questionContent: "" },{ isCheck: true, questionContent: "" },{ isCheck: true, questionContent: "" }],
      levelArr: [
        { name: "简单", value: 1 },
        { name: "一般", value: 2 },
        { name: "困难", value: 3 },
      ],
      typeArr: [
        { name: "单选题", value: 1 },
        { name: "多选题", value: 2 },
      ],
      questionForm: {
        questionName: null,
        subjectId:'',
        type: 1,
        difficulty: 1,
        score: 0,
        isApplication: 1,
        
      },
      questionFormRules: {

        questionName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        subjectId: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
          },
        ],
        difficulty: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        isApplication: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        score: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      editQuestion:{},
      title: "添加试题",
      previewDialogVisible: false,
      moveDialogVisible: false,
      dialogVisible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      activeNav: 1,
      level1CompanyData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //请求表格参数
      tableParameter: {
        name: "",
      },
      tableListData: [], //表格数据
      subjectId:"",
      subjectId2:"",
      projectSn:"",
      subjectNameList:[],
      subjectName:"",
      currentNodekey:"",
      checkList:[],

    };
  },
  created() {
    console.log(filterAnswer(0));
    this.projectSn = this.$store.state.projectSn
    this.getExamSubjectList();
    this.getExamSubjectTreeList();
  },
  filters: {
    filterAnswerIndex(index) {
      return filterAnswer(index);
    },
  },
  computed: {
    headers() {
      return {
        Authorization: this.$store.state.userInfo.token,
      };
    },
  },
  watch:{
    previewDialogVisible(newV,oldV){
      if(newV === false) this.resetForm()
    },
    dialogVisible(newV,oldV){
      if(this.title === '添加试题'){
        this.$refs.questionForm.resetFields()
      }
    }
  },
  methods: {
    handleInputArea(){
      this.$forceUpdate()
    },
    getExamSubjectList() {  // 获取科目类型列表
      let data = {
        sn: this.projectSn,
      }
      // listTreeExamSubjectApi(data).then((res) => {
      listExamSubjectApi(data).then((res) => {
        if (res.code == 200) {
          this.subjectNameList = res.result
          console.log('==========考试科目列表==========',this.listData)
        }
      })
    },
    //获取列表数据
    getExamSubjectTreeList() {
      let data = {
        sn: this.$store.state.projectSn,
      }
      listTreeExamSubjectApi(data).then((res) => {
      // listExamSubjectApi(data).then((res) => {
        if (res.code == 200) {
          this.level1CompanyData = res.result;
          console.log('11111111111111',res);
          console.log(this.level1CompanyData[0].id);
          this.currentNodekey = this.level1CompanyData[0].id;
         this.$nextTick(() => {
          this.$refs.groupTreeList.setCurrentKey(this.level1CompanyData[0].id) // 默认选中节点第一个
         })

         this.subjectId = this.level1CompanyData[0].id;
      this.getList()
          console.log('==========考试科目列表==========',res.result)
        }
      })
    },
    getList() {
      pageQuestionBankApi({
        pageNo: this.page,
        pageSize: this.pageSize,
        questionName: this.tableParameter.name,
        subjectId: this.subjectId,
      }).then((result) => {
        if (result.success) {
          console.log(result);
          this.tableListData = result.result.records
          this.total = result.result.total
        }
      })
    },
    multipleOption(option,options){
      if(options === undefined) return true
      return options.includes(option) ? true : false
    },
    optionStr(index){
      let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
      return str[index]
    },
    sortedOptions(options){
      return options.split('').sort().join('')
    },
    resetForm(){
      this.questionForm = {
        questionName: "",
        type: 1,
        difficulty: 1,
        isApplication: 1,
        score: 0
      }
    },
    // 提交试题
    submitQuestion() {
      console.log(this.questionArr);
      let findIndex = this.questionArr.findIndex(
        (item) => item.questionContent == ''
      ); // 检测试题答案是否为空，有空则不允许提交
      let someFlag = this.questionArr.some((item) => item.isCheck); // 检测试题是否有选正确答案

      if (
        this.questionArr.length == 0 ||
        findIndex != -1 ||
        !someFlag
      ) { 
        console.log(this.questionArr.length == 0,'length')
        console.log(findIndex != -1,'index')
        console.log(someFlag,'isflag')
        this.$message.warning("请添加试题并完整填写以及选中答案");
        return;
      }
      
      this.$refs.questionForm.validate((valid) => {
        if (valid) {
          console.log(this.questionArr,'questionArr');
          console.log(this.questionForm,'questionForm');
          console.log(this.checkList,'checkList');
          //选项列表
          let tempOptions =  this.questionArr.map((item,index) => {
            return {
              optionCode:this.optionStr(index),
              optionDesc:item.questionContent,
            }
          })
          if(this.title == "编辑试题") {
            // // 选项列表
            // let radioOptions =  this.questionArr.map((item,index) => {
            //   return {
            //     optionCode:this.optionStr(index),
            //     optionDesc:item.questionContent,
            //   }
            // })
            //多选答案
            let multiOptions = ''
            this.checkList.map(item =>{
              multiOptions += this.optionStr(item)
            })
            console.log(this.questionForm)
            editQuestionBankApi({
               id:this.questionForm.id,
                questionName:this.questionForm.questionName,
                type:this.questionForm.type,
                difficulty:this.questionForm.difficulty,
                isEnable:this.questionForm.isApplication,
                // optionList: this.questionForm.type == 1 ? this.questionArr.map((item,index) => {
                //   return {
                //     optionCode:index == this.radio ? filterAnswer(this.radio) : '',
                //     optionDesc:item.questionContent,
                //   }
                // }) : this.questionArr.map((item,index) => {
                //   return {
                //     optionCode: this.checkList.indexOf(index) > -1 ? filterAnswer(index) : '',
                //     optionDesc:item.questionContent,
                //   }
                // }),
                optionList:tempOptions,
                options:this.questionForm.type == 1 ? this.questionForm.options : multiOptions,
                score:this.questionForm.score,
                subjectId:this.subjectId,
              }).then(result => {
                  if (result.success) {
                    this.$message.success(result.message);
                    this.getList();
                    this.dialogVisible = false;
                  }
            })
          } else {
            //单选答案
            let option = this.optionStr(this.radio)
            //多选答案
            let multiOptions = ''
            console.log(this.checkList,'this.checkList========================')
            if(this.questionForm.type !== 1 &&  this.checkList.length === 0){
              this.$message.warning('请选择答案')
              return
            }
            this.checkList.map(item =>{
              multiOptions += this.optionStr(item)
            })
            addQuestionBankApi({
              questionName:this.questionForm.questionName,
              type:this.questionForm.type,
              difficulty:this.questionForm.difficulty,
              isEnable:this.questionForm.isApplication,
              // optionList: this.questionArr.type == 1 ? this.questionArr.map((item,index) => {
              //   return {
              //     optionCode:index == this.radio ? filterAnswer(this.radio) : '',
              //     optionDesc:item.questionContent,
              //   }
              // }) : this.questionArr.map((item,index) => {
              //   return {
              //     optionCode: this.checkList.indexOf(index) > -1 ? filterAnswer(index) : '',
              //     optionDesc:item.questionContent,
              //   }
              // }),
              optionList:tempOptions,
              options:this.questionForm.type == 1 ? option : multiOptions,
              score:this.questionForm.score,
              subjectId:this.subjectId,
              projectSn: this.projectSn,
            }).then(result => {
                if (result.success) {
                    console.log('信息添加成功', result);
                    this.$message.success(result.message);
                    this.getList();
                    this.dialogVisible = false;
                }
            })
          }
          
          // editstandardDevApi(params).then(result => {
          //     if (result.success) {
          //         // console.log('信息编辑成功', result);
          //         this.$message.success(result.message);
          //         this.getList();
          //         this.Popup.show = false;
          //     }
          // })
        } else {
          return false;
        }
      });
    },
    // 预览
    previewDialog(item) {
      detailIdQuestionBankApi({
        id: item.id
      }).then(result => {
          if (result.success) {
            this.questionForm = result.result;
            this.questionArr = result.result.optionList;
          }
      })
      this.previewDialogVisible = true
    },
    // 编辑试题按钮
    editQuestionBtn(item) {
      console.log(item);
      this.title = "编辑试题";

      this.questionForm.questionName = item.questionName;
      this.questionForm.type = item.type;
      this.questionForm.difficulty = item.difficulty;
      this.questionForm.isApplication = item.isEnable;

      detailIdQuestionBankApi({
        id: item.id
      }).then(result => {
          if (result.success) {
            this.checkList = [];
            this.questionForm = {...this.questionForm,...result.result}
            
            this.questionArr = result.result.optionList.map((item,index) => {
              if(result.result.type == 1 && item.optionCode) {
                this.radio = index;
              // } else if(result.result.type == 2 && item.optionCode) {
              // } else if(result.result.type == 2 && result.result.options.includes(item.optionCode) ? true : false) {
              } else if(result.result.type == 2 && this.multipleOption(item.optionCode,result.result.options)) {
                this.checkList.push(index);
              }
              return {
                ...item,
                // isCheck: item.optionCode ? true : false,
                // isCheck: result.result.options.includes(item.optionCode) ? true : false, 
                isCheck: this.multipleOption(item.optionCode,result.result.options), 
                // item.optionCode ? true : false,
                questionContent:item.optionDesc,
              }
            })
            console.log(this.checkList,this.radio);
            console.log('信息编辑成功', result.result.optionList);
          }
      })
      
            // optionList: this.questionArr.map((item,index) => {
            //   return {
            //     optionCode:index == this.radio ? filterAnswer(this.radio) : '',
            //     optionDesc:item.questionContent,
            //   }
      this.dialogVisible = true;
    },
    // 添加试题按钮
    addQuestionBtn() {
      this.questionForm = {}
      this.title = "添加试题";
      // this.questionForm.questionName = "";
      this.questionArr = [{ isCheck: true, questionContent: "" },{ isCheck: true, questionContent: "" },{ isCheck: true, questionContent: "" },{ isCheck: true, questionContent: "" }];
      this.radio = 0;
      this.checkList = [];
      this.dialogVisible = true;
    },
    // 添加答案项
    addQuestionAnswer() {
      if(!this.questionForm.type){
        this.$message.warning('请选择题目类型')
        return
      }
      this.questionArr.push({ isCheck: true , questionContent: "" });
    },
    // 删除答案项
    deleteQuestionAnswer(index) {
      if(this.questionArr.length === 4 || this.checkList.length === 4){
        this.$message.warning('至少四个选项！')
        return
      }
      this.questionArr.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(val);
      this.page = val
      this.getList()
    },
    // 获取 多选  选中的  数据
    handleCheckedCitiesChange(value) {
      console.log(value);
    },
    handleChangeE(file, fileList) {
      // this.fileTemp = file.raw
      // console.log(file)
      // if (this.fileTemp) {
      //   if (
      //     this.fileTemp.type ==
      //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
      //     this.fileTemp.type == 'application/vnd.ms-excel'
      //   ) {
      //   } else {
      //     this.$message.error(this.$t('message.laborMange.hint5'))
      //   }
      // }
    },
    handleSuccessE(file) {
      // this.refreshPage = false
      // console.log('==========', file)
      // if (file.code == 200) {
      //   this.$message.success(file.message) //导入成功
      //   this.refreshBtn()
      //   this.getTeamList()
      // } else {
      //   this.$message.error(file.message)
      // }
      // this.$nextTick(() => {
      //   this.refreshPage = true
      // })
    },
    handleErrorE() {
      // this.$message.error(this.$t('message.laborMange.hint7'))
      // this.refreshBtn()
    },
    exportFn() {
      exportQuestionBankApi().then(result => {
          if (result.success) {
            console.log('信息编辑成功', result);
          }
      })
      // window.location.href =
      //   this.$http.defaults.baseURL +
      //   'xmgl/download/exporZipWorkerInfo?idCard=' +
      //   this.tableParameter.idCard +
      //   '&projectSn=' +
      //   this.tableParameter.projectSn +
      //   '&teamId=' +
      //   this.tableParameter.teamId +
      //   '&workerName=' +
      //   this.tableParameter.workerName +
      //   '&personType=' +
      //   this.tableParameter.personType +
      //   '&enterDate=' +
      //   this.tableParameter.enterDate +
      //   '&codeState=' +
      //   this.tableParameter.codeState +
      //   '&enterpriseId=' +
      //   this.checkedId
    },
    //刷新按钮
    refreshBtn() {
      window._paq.push(['trackEvent', '点击', '刷新', '刷新人员信息'])
      this.page = 1
  
      this.tableParameter.name = ''
      // this.tableParameter.workerName = ''
      // this.tableParameter.inserviceType = ''
      // this.tableParameter.enterDate = ''
      // this.tableParameter.codeState = ''
      this.getList()
    },
    //查询按钮
    inquireBtn() {
      // window._paq.push(['trackEvent', '点击', '查询', '查询人员信息'])
      // this.page = 1
      // this.getTableData()
      this.page = 1
      this.getList()
    },
    // 删除
    deleteQuestionBank(row) {
      console.log(row);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // alert('还未对接口')
          deleteQuestionBankApi({
        id:row.id
      }).then(result => {
          if (result.success) {
            this.$message.success(result.message);
                  // this.getList();
                  this.inquireBtn()
          }else {
              this.$message({
                type: 'error',
                message: res.message,
              })
            }
      })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    checkNav(val) {
      this.activeNav = val;
    },
    onNodeClick(e) {
      console.log(e);
      this.subjectId = e.id;
      this.getList()
    },
    // 移动
    moveDialogQuestionBank(row) {
      this.editQuestion = row;
      this.moveDialogVisible = true
    },
    onNodeClick2(e) {
      this.subjectId2 = e.id;
    },
    moveQuestionBank(){
      if(this.subjectId2 == "") {
        this.$message.error("请选择科目");
        return
      }

      moveQuestionBankApi({
        id:this.editQuestion.id,
        subjectId:this.subjectId2
      }).then(result => {
          if (result.success) {
            this.$message.success(result.message);
               this.getList();
               this.subjectId2="";
                  this.moveDialogVisible = false
          }
      })
    },
  },
};
</script>

<style lang="less" scoped>

.flex() {
  display: flex;
  align-items: center;
}
.flexColumn() {
  display: flex;
  flex-direction: column;
}
.main-content {
  width: 100%;
  height: 100%;
  .flex();
  > div {
    background: #ffffff;
  }
  .left {
    width: 280px;
    height: 100%;
    margin-right: 20px;
    .flexColumn();
    &-title {
      height: 18px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #272d45;
      border-left: 2px solid #5c81ee;
      padding-left: 5px;
      margin: 15px 20px 12px 20px;
    }
    &-tree {
      flex: 1;
      margin: 0px 20px 20px 20px;
      background: #f7f7f7;
      .custom-tree-node {
        width: 100%;
        .courseName {
          font-size: 16px;
          font-weight: bold;
          display: inline-block;
          width: 192px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .right {
    width: calc(100% - 300px);
    height: 100%;
    .search_wrap {
      padding: 40px 10px 30px 50px;
      border-bottom: 1px solid #eaeaea;
      .flex();
      .demo-form-inline {
        /deep/.el-form-item {
          display: inline-block;
          margin-bottom: 0px;
        }
      }
    }
    .operation-style {
      .flex();
      justify-content: center;
      .operationText:not(:last-child) {
        margin-right: 10px;
      }
    }
    /deep/.el-table__empty-text{
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
// 添加/编辑试题弹框样式
.question-list {
  &-item {
    .flex();
    position: relative;
    /deep/.el-radio {
      margin-right: 10px;
      margin-left: 55px;
    }
    .el-icon-remove {
      color: #eb4f47;
      cursor: pointer;
      position: absolute;
      right: -20px;
      font-size: 16px;
    }
  }
  &-item:not(:last-child) {
    margin-bottom: 20px;
  }
}
.add-btn {
  margin: 15px 0 20px 75px;
}
// 移动弹框样式
.moveDialog {
  /deep/.el-dialog__body {
    padding-top: 10px;
  }
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
  // width: 100%;
  background-color: #1111;
}
.move-tree-content {
  padding-top: 10px;
  background: #f7f7f7;
  .tree-part {
    .custom-tree-node {
      width: 100%;
      .courseName {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
// 预览弹框样式
.preview-content {
  margin-left: 60px;
  .flexColumn();
  .preview-question-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #272d45;
    margin-bottom: 20px;
  }
  .preview-question-content {
    margin-left: 25px;
    .preview-question-item {
      .flex();
      /deep/.el-radio {
        margin-right: 0px;
      }
      .active-style{
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        // color: #5181F6;
        .activeRadio{
          // /deep/ .el-radio__input.is-checked .el-radio__inner{
          //   border-color: #409eff;
          //   background: #409eff;
          // }
        }
      }
      .default-style{
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #272D45;
      }
    }
    .preview-question-item:not(:last-child){
      margin-bottom: 20px;
    }
  }
}
/deep/ el-tree__empty-text{
  margin-top: 500px;
}
.left-tree{
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // white-space: nowrap;

  // word-wrap: none;
}
</style>
