<template>
  <div class="app-container">
    <el-row id="elRow">
      <el-col :span="6" :style="{ height: TreeColHeight + 'px' }">
        <div style="margin-right: 10px; height: 100%">
          <div class="TreeHeader">
            <label style="font-size: 18px">题目分类</label>
          </div>

          <div :style="{ height: TableColHeight + 'px','overflow-y':'auto' }" class="areadiv"
            style="margin: 10px 0 0 0; padding: 5px 0 0 0">
            <el-tabs v-model="activeTab" @tab-click="handleTabsClick" style="padding: 0 20px" :stretch="true">
              <el-tab-pane label="专业类" name="first"></el-tab-pane>
              <el-tab-pane label="测评类" name="second"></el-tab-pane>
            </el-tabs>
            <el-button type="button" size="mini" style="width:100%;margin-bottom:10px"
              @click="showClassDialog(null,0,activeTab == 'first' ? 0 : 2)">
              添加顶级
            </el-button>
            <el-tree :data="activeTab == 'first' ? firstTreeData : secondTreeData"
              :props="activeTab == 'first' ? firstTreeData : secondTreeData" @node-click="handleNodeClick"
              class="eltree" :expand-on-click-node="false" node-key="value" :default-expanded-keys="defaultexpand"
              @node-expand="handleNodeExpand" ref="tree">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>[{{data.id}}] {{ node.label }} ({{data.subjectCount || 0}})</span>
                <span style="">
                  <!-- v-if="activeTab == 'first'?true:node.level<2?true:false" -->
                  <el-button type="text" size="mini" @click="showClassDialog(node)" v-if="node.level <3">
                    添加下级
                  </el-button>
                  <el-button type="text" v-if="activeTab == 'second'  || 1==1" @click="handleEditDimension(node, data)">
                    编辑
                  </el-button>
                  <el-button type="text" size="mini" @click="() => handleDeleteQuestionClass(node, data)">
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <div class="seetingsDiv" style="">


            <el-button type="primary" @click="AddSubject">添加题目
            </el-button>
            <el-button type="danger" @click="handleDelete">批量删除
            </el-button>
            <el-button type="danger" @click="handleChangeCat">批量修改分类
            </el-button>
            <el-button type="danger" @click="dialogFormVisible = true">导入题目</el-button>
            <!-- <el-button type="danger" @click="handleChangeType">批量修改题型
            </el-button> -->
          </div>
          <div class="areadiv" :style="{ height: TableColHeight + 'px' }">
            <el-table :data="QuestList" id="QuestionTable" border style="
                width: 100%;
                border-radius: 5px;
                box-shadow: 0 0 10px #efefef;
                margin-top: 10px;
              " :header-cell-class-name="headerStyle" :stripe="true" ref="table">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="date" label="ID" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="题目类型" width="110" sortable>
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.subjectName
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="QuestionClassName" label="分类" width="110" sortable>
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.QuestionClassName
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="分数" width="90" sortable>
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.fraction
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="单项分数" width="110" sortable>
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.singleFraction
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="正确答案" width="80">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{ scope.row.answer }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="题目" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.subject
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="解析" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.analysis
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-dropdown @command="
                      (e) => {
                        handleCommand(e, scope.row.id);
                      }
                    " style="padding-left: 10px">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="update">编辑</el-dropdown-item>
                        <!-- <el-dropdown-item command="b">锁定</el-dropdown-item> -->
                        <el-dropdown-item command="del">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background @current-change="currentchange" style="
                position: static;
                bottom: 3px;
                text-align: center;
                margin-top: 5px;
              " :page-size="this.parameter.pageSize" layout="total,prev, pager, next" :total="Count">
            </el-pagination>
            <div style="clear: both"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="分类维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="450px"
      :close-on-click-modal="false">
      <el-form ref="QuestionClassInfo" :model="QuestionClassInfo" label-width="80px">
        <el-form-item label="分类名称">

          <el-input v-model="QuestionClassInfo.ClassificationName" placeholder="请输入分类名称"></el-input>
        </el-form-item>



      </el-form>
      <!-- {{QuestionClassInfo}} -->
      <el-button @click="CreateQuestionClassHealder" style="margin: 10px 0 0 0; float: right" type="primary">确定
      </el-button>
      <div style="clear: both"></div>
    </el-dialog>
    <el-dialog title="编辑题目" :visible.sync="dialogsubjectlVisible" @close="closeDialog" width="800px"
      :close-on-click-modal="false">

      <el-form ref="Dataform" :model="Dataform" label-width="60px" :rules="rules">
        <div style="padding:10px">
          <el-alert v-if="FormClassType==2" title="选项的维度分值如不设置将按照分值规则自动计算" type="warning"></el-alert>
        </div>
        <el-form-item label="题目" prop="subject">
          <el-input v-model="Dataform.subject" placeholder="请输入题目名称"></el-input>
        </el-form-item>
        <el-form-item label="分类" style="padding-top: 5px" prop="QuestionClassId">

          <el-cascader @change="changequestionclass" filterable v-model="Dataform.QuestionClassId" style="width: 400px"
            :props="{ emitPath: false ,checkStrictly:true}" :clearable="true" :options="QuestionClass">

            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf && data.id >0" >  ({{ data.subjectCount || 0 }}) </span>
            </template>


          </el-cascader>
        </el-form-item>
        <el-form-item label="题型" style="padding-top: 5px">
          <el-select v-model="Dataform.subjectType" value-key="Dataform.subjectType" @change="changeQuestionType"
            placeholder="请选择题型">
            <el-option label="单选题" :value="1"></el-option>
            <el-option label="多选题" :value="2"></el-option>
            <el-option label="主观题" :value="3"></el-option>
            <el-option label="语音题" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项" v-show="OptionVisible">
          <el-table :data="subjectContent" :show-header="false">
            <el-table-column>
              <template slot-scope="scope">
                <el-input placeholder="请输入答案" v-model="scope.row.optionContent" class="optionInput"
                  style="width:47% !important">
                  <template slot="prepend">{{ scope.row.option }}</template>
                </el-input>

                <!-- <el-input placeholder="维度分值" v-model="scope.row.score" class="optionInput"
                  style="width:21% !important;margin-left:1%">
                </el-input> -->

                <el-input-number v-model="scope.row.score" class="optionInput" :min="0" :step="5" placeholder="分值"
                  style="width:21% !important;margin-left:1%"></el-input-number>
                <!-- v-if="FormClassType==2"  -->
                <el-select v-model="scope.row.scorerule" class="optionInput" placeholder="分值规则"
                  style="width:20% !important;margin-left:1%">
                  <el-option label="">不设置</el-option>
                  <el-option v-for="sritem in scoreRules" :label="sritem" :value="sritem">{{sritem}}</el-option>
                </el-select>
                <i class="el-icon-circle-plus el-icon" @click="Addlist"></i>
                <i class="el-icon-remove el-icon" @click="RemoveList(scope)" v-if="subjectContent.length >1"></i>
              </template>
            </el-table-column>

          </el-table>
        </el-form-item>
        <el-form-item label="答案" v-show="OptionVisible" class="subjectContentClass" v-if="FormClassType!=2">
          <el-radio-group v-for="(item, i) in subjectContent" v-model="Dataform.answer" v-if="GroupVisible">
            <el-radio :label="item.option">{{ item.option }}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-for="(item, i) in subjectContent" v-model="Dataform.answer" v-if="!GroupVisible">
            <el-checkbox style="float: left" :label="item.option">{{
              item.option
              }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="分数" v-show="OptionVisible && FormClassType !=2">
          <el-input-number :step="1" style="float: left" :min="0" v-model="Dataform.fraction">
          </el-input-number>
          <div style="float: left; margin-left: 20px" v-if="!GroupVisible">
            <lable style="font-weight: bold">单项分数：</lable>
            <el-input-number :step="0.5" :max="Dataform.fraction / 2" :min="0" v-model="Dataform.singleFraction">
            </el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="解析" style="margin-top: 10px">
          <el-input v-model="Dataform.analysis" :rows="10" type="textarea" placeholder="请输入答案解析" />
        </el-form-item>
      </el-form>
      <el-button @click="EditQuestionHeadler" style="margin: 10px 0 0 0; float: right" type="primary">确定
      </el-button>
      <div style="clear: both"></div>
    </el-dialog>

    <el-dialog title="批量设置分类" :visible.sync="dialogsubjectlVisibleSetCat" @close="closeDialogCat" width="800px"
      :close-on-click-modal="false">
      <el-form ref="Dataform" :model="Dataform" label-width="60px">

        <el-form-item label="分类" style="padding-top: 5px">
          <el-cascader v-model="QuestionClassId" style="width: 400px" :props="{ emitPath: false ,checkStrictly:true}"
            :clearable="true" :options="QuestionClass">
          </el-cascader>
        </el-form-item>

      </el-form>
      <el-button @click="handleSetClass" style="margin: 10px 0 0 0; float: right" type="primary">确定
      </el-button>
      <div style="clear: both"></div>
    </el-dialog>

    <el-dialog title="批量设置题型" :visible.sync="dialogsubjectlVisibleSetType" @close="closeDialogType" width="800px"
      :close-on-click-modal="false">
      <el-form ref="Dataform" :model="Dataform" label-width="60px">

        <el-form-item label="题型" style="padding-top: 5px">
          <el-select v-model="QuestionTypeId" placeholder="请选择题型">
            <el-option label="请选择" value=""></el-option>
            <el-option label="单选题" :value="1"></el-option>
            <el-option label="多选题" :value="2"></el-option>
            <el-option label="主观题" :value="3"></el-option>
            <el-option label="语音题" :value="4"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <el-button @click="handleSetType" style="margin: 10px 0 0 0; float: right" type="primary">确定
      </el-button>
      <div style="clear: both"></div>
    </el-dialog>





    <el-dialog title="导入" :visible.sync="dialogFormVisible">




      <el-upload class="upload-demo" style="width:80%" :headers="{Authorization:token}" drag :on-success="handleSuccess"
        action="/api/QuestionBank/import" :limit="1">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传excel文件，条数尽量不要太多控制在1000内
          <br>
          <br>
          <br>
          <span style="color:red;line-height:20px;font-size:16px">
            注意:
            <br>
            1.导入每个选项格式 分为三段 用” @@ “ 隔开 选项内容@@选项分值@@选项权重（权重 分为三个 高 中 低） <br /> 例如:
            <p>选项A 今天感觉怎么样@@10@@高</p>
            <p>选项B 内容@@10@@高</p>
            <p>选项C 内容@@5@@中</p>
            <p>选项D 内容@@8@@低</p>

          </span>

          <br>
          <span style="color:red;line-height:20px;font-size:16px">
            2.分类编号 从后台题库管理左侧分类的名称前获取 [1] 只需填写中间的数字即可
          </span>

          <br>

          <span style="color:red;line-height:20px;font-size:16px">
            3.多选题 多选题选项 多个用 英文,隔开 如： A,B,C
          </span>

          <br>
          <el-link :href="BASE_URL + '/temp/题目导入模板.xlsx'" target="_blank" type="primary">点击下载导入模板</el-link>

        </div>
      </el-upload>




    </el-dialog>


    <EditDimension ref="editDimensionDialog" :model="currentEditDimension" @close="closeEditDim" @save="saveEditDim">
    </EditDimension>
  </div>
</template>

<script lang="ts">
  import {
    getQuestionList,
    EditQuestion,
    getQuestionClassList,
    DelQuestionBankEvent,
    GetQuestionBankById,
    CreateQuestionClass, ChangeQuestionBankClass, ChangeQuestionBankType
  } from "@/api/QuestionBank";
  import { parseTime } from "@/utils/index.js";
  import EditDimension from "./components/EditDimension.vue";

  import {
    getToken
  } from '@/utils/auth'


  export default {
    filters: {},
    components: {
      EditDimension,
    },
    data() {
      return {
        token: getToken(),
        dialogFormVisible: false,
        FormClassType: 0,
        loading: false,
        currentEditDimension: {},
        defaultexpand: [],
        activeTab: "first",
        parameter: {
          pageIndex: 1,
          pageSize: 12,
          sort: "id",
          sortOrder: 1,
          keyword: "",
          QuestionClassId: 0,
          status: 1,
        },
        Count: 0,
        QuestList: [],
        QuestionClassId: 0,
        dialogsubjectlVisibleSetCat: false,

        QuestionTypeId: '',
        dialogsubjectlVisibleSetType: false,


        dialogsubjectlVisible: false,
        dialogClassIVIsible: false,
        OptionVisible: true,
        GroupVisible: true,
        Dataform: {
          subject: "",
          subjectType: 1,
          subjectContent: "",
          QuestionClassId: 0,
          answer: [],
          analysis: "",
          fraction: 0,
          singleFraction: 0,
          addTime: "2021-11-12",
          state: 1,
        },
        subjectContent: [
          {
            option: "A",
            optionContent: "",
            scorerule: '高'
          },
        ],
        QuestionClass: [],
        QuestionClassInfo: {
          ParentId: 0,
          ClassificationName: "",
          Addtime: "",
        },
        TreeColHeight: 0,
        TableColHeight: 0,
        treeData: [],
        firstTreeData: [],
        secondTreeData: [],
        CreatClassId: 0,
        scoreRules: ['高', '中', '低'],
        currentEditNode: undefined,
        currentExpend: [1],
        rules: {
          subject: [
            { required: true, message: '题目名称必填', trigger: 'blur' }
          ],
          subjectType: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          QuestionClassId: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ]
        }

      };
    },
    created() { },
    mounted() {
      let ContentAreaHight =
        window.innerHeight - document.getElementById("elRow").offsetTop - 70;
      this.TableColHeight =
        ContentAreaHight - document.getElementById("QuestionTable").offsetTop;
      let lineNumber = this.TableColHeight - 50 - 20; //减去表头来计算
      this.TreeColHeight = ContentAreaHight;
      lineNumber = Math.floor(lineNumber / 49);
      this.parameter.pageSize = lineNumber;
      this.GetList();
      this.getQuestionClassListHeadler();
    },
    methods: {
      closeEditDim(data) {
      },
      handleSuccess(res) {
        var msg = '';
        if (res.data.data) {
          msg = `导入完成  共:${res.data.data.tableCount}个题目  成功 ${res.data.data.SuccessCount}个题目`;
        }
        this.$message.success(msg);
        this.GetList();
      },
      saveEditDim(data) {
        // if(this.currentEditNode && this.currentEditNode.parent)
        // this.currentExpend=[this.currentEditNode.parent.data.id];
        // {
        //   this.currentEditNode.label = data.ClassificationName;
        //   this.currentEditNode.data.ClassificationName = data.ClassificationName;
        //   if(this.currentEditNode.parent)
        //   {
        //     this.currentEditNode.parent.loaded =false;
        //     this.currentEditNode.parent.expand();
        //   }
        // }
        this.getQuestionClassListHeadler();
        this.$forceUpdate();
      },
      handleDelete() {
        var rows = this.$refs.table.selection;
        if (!rows || rows.length < 1) {
          this.$message.warning('至少选择一项进行操作！');
          return;
        }
        this.$confirm("确认删除选择的题目吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          DelQuestionBankEvent(rows.map(o => o.id).join(',')).then((o) => {
            this.$message.success("删除成功");
            this.GetList();
          });
        });

      },
      handleSetClass() {
        var rows = this.$refs.table.selection;
        if (!this.QuestionClassId || this.QuestionClassId < 1) {
          this.$message.warning('至少选择一个分类进行操作！');
          return;
        }
        this.$confirm("确认批量修改题目分类吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          ChangeQuestionBankClass(rows.map(o => o.id).join(','), this.QuestionClassId).then((o) => {
            this.$message.success("修改成功");
            this.GetList();
            this.dialogsubjectlVisibleSetCat = false;
          });
        });
      },
      handleChangeCat() {
        var rows = this.$refs.table.selection;
        if (!rows || rows.length < 1) {
          this.$message.warning('至少选择一项进行操作！');
          return;
        }
        this.dialogsubjectlVisibleSetCat = true;
      },


      handleSetType() {
        var rows = this.$refs.table.selection;
        if (!this.QuestionTypeId || this.QuestionTypeId < 1) {
          this.$message.warning('至少选择一个类型进行操作！');
          return;
        }
        this.$confirm("确认批量修改题目类型吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          ChangeQuestionBankType(rows.map(o => o.id).join(','), this.QuestionTypeId).then((o) => {
            this.$message.success("修改成功");
            this.GetList();
            this.dialogsubjectlVisibleSetType = false;
          });
        });
      },
      handleChangeType() {
        var rows = this.$refs.table.selection;
        if (!rows || rows.length < 1) {
          this.$message.warning('至少选择一项进行操作！');
          return;
        }
        this.dialogsubjectlVisibleSetType = true;
      },


      AddSubject() {
        this.FormClassType = 0;
        // if(!this.Dataform.scoperule)
        // this.Dataform.scoperule='高';
        this.dialogsubjectlVisible = true
      },
      changequestionclass(a, b, c) {
        debugger;
        var item = this.QuestionClass.find(o => o.id == a);
        if (item) this.FormClassType = item.ClassType;
      },
      //维度编辑
      handleEditDimension(node, data) {
        console.log(data);
        // this.$refs.editDimensionDialog.dialogFormVisible = true;
        this.$refs.editDimensionDialog.show(data.id, node);
        this.currentEditDimension = data;
        this.currentEditNode = node;
      },
      //切换分类
      handleTabsClick(e) {
        console.log(e.name);
      },
      //删除分类
      handleDeleteQuestionClass(node, data) {
        this.loading = true;
        // console.log(node, data);
        // console.log(this.API);

        setTimeout(() => {
          this.loading = false;

        }, 1000);
        this.$confirm("确认删除该分类信息吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.API.deleteQuestionClass(data.value).then((res) => {
            if (res.data.success) {
              this.getQuestionClassListHeadler();
              this.$message.success('操作成功！');
            }
            else {
              this.$message.error(res.data.message || '删除失败！');
            }

          });
        });



      },
      closeClassDialog() {
        this.dialogClassIVIsible = false;
      },
      //表格右边的操作按钮
      handleCommand(value, val) {
        if (value == "update") {
          this.GetQuestionBankByIdHeadler(val);
        }
        if (value == "del") {
          this.DelQuestionBankEventHeadler(val);
        }
      },
      //添加分类
      CreateQuestionClassHealder() {
        if (this.loading) return;
        this.loading = true;
        if (!this.QuestionClassInfo.ClassificationName) {
          this.$notify({
            title: '请填写名称后提交！',
            type: 'warning'
          });
          this.loading = false;
          return;
        }
        this.QuestionClassInfo.Addtime = parseTime(new Date(), "");
        CreateQuestionClass(this.QuestionClassInfo).then((res) => {
          this.getQuestionClassListHeadler();
          this.dialogClassIVIsible = false;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        });
      },
      //获取选择的题目详细信息
      GetQuestionBankByIdHeadler(id) {
        GetQuestionBankById(id).then((res) => {

          var d = this.QuestionClass.find(o => o.id == res.data.data.QuestionClassId);
          if (d) this.FormClassType = d.ClassType;
          this.changeQuestionType(res.data.data.subjectType); //这里先初始化编辑显示内容
          this.Dataform = res.data.data; //内容赋值
          this.subjectContent = JSON.parse(res.data.data.subjectContent); //赋值选项
          if (res.data.data.subjectType == 1) {
            this.Dataform.answer = res.data.data.answer.split(",")[0]; //赋值答案
          } else {
            this.Dataform.answer = res.data.data.answer.split(","); //赋值答案
          }
          this.dialogsubjectlVisible = true;
        });
      },
      showClassDialog(node, parent, type) {
        this.QuestionClassInfo.ClassificationName = '';
        this.$forceUpdate();
        this.dialogClassIVIsible = true;
        console.log(node);
        if (parent == 0) {
          this.QuestionClassInfo.ParentId = 0;
        }
        if (node)
          this.QuestionClassInfo.ParentId = node.data.value;
        if (type) {
          this.QuestionClassInfo.ClassType = type;
          // this.FormClassType = type;
        }
        else if (node.data.ClassType) this.QuestionClassInfo.ClassType = node.data.ClassType;


        //   alert(this.QuestionClassInfo.ParentId);
      },
      //关闭弹框的事件
      closeDialog() {
        //初始化数据
        this.Dataform = this.$options.data().Dataform;
        this.subjectContent = this.$options.data().subjectContent;
        //所有文本框恢复到初始化状态
        this.Dataform.answer = [];
        this.OptionVisible = true;
        this.GroupVisible = true;
      },
      closeDialogCat() {
        this.QuestionClassId = 0;
        this.dialogsubjectlVisibleSetCat = false;
      },
      closeDialogType() {
        this.QuestionClassTypeId = '';
        this.dialogsubjectlVisibleSetType = false;
      },


      //选择题目类型来判断是否显示部分表单
      changeQuestionType(val) {
        if (val == 3 || val == 4) {
          this.OptionVisible = false;
        }
        if (val == 2) {
          this.OptionVisible = true;
          this.Dataform.answer = [];
          this.GroupVisible = false;

        }
        if (val == 1) {
          this.Dataform.answer = [];
          this.OptionVisible = true;
          this.GroupVisible = true;
        }
      },
      headerStyle({ row, column, rowIndex, columnIndex }) {
        return "tableStyle";
      },
      Addlist() {
        if (this.subjectContent.length < 4) {
          var alphabet = String.fromCharCode(
            64 + parseInt(this.subjectContent.length + 1)
          );
          this.subjectContent.push({
            option: alphabet,
            title: "",
          });
        } else {
          this.$confirm("系统暂时只支持4个答案！", "消息");
        }
      },
      RemoveList(val) {
        this.subjectContent.splice(val.$index, 1);
        this.subjectContent.forEach((item, index) => {
          item.option = String.fromCharCode(64 + parseInt(index + 1));
        });
      },
      handleNodeExpand(a, b, c) {
        this.defaultexpand = [a.id];
      },
      handleNodeClick(val) {
        if (this.loading) return;
        this.parameter.QuestionClassId = val.value;
        this.parameter.pageIndex = 1;
        this.Dataform.QuestionClassId = val.value;
        this.defaultexpand = [val.value];
        this.GetList();
      },
      DelQuestionBankEventHeadler(id) {
        this.$confirm("确定删除该试题？", "消息", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          callback: (action) => {
            if (action == "confirm") {
              DelQuestionBankEvent(id).then((res) => {
                if (res.data.code == 200) {
                  this.$confirm(res.data.message, "消息");
                  this.GetList();
                }
              });
            }
          },
        });
      },
      EditQuestionHeadler() {
        this.$refs['Dataform'].validate((valid) => {
          if (valid) {

            let reg = new RegExp('"', "g");
            //this.Dataform.subjectContent = JSON.stringify(this.subjectContent).replace(reg, "\"");
            this.Dataform.subjectContent = this.subjectContent;
            if (typeof this.Dataform.answer != "string")
              //判断是否为字符串
              this.Dataform.answer = this.Dataform.answer.join(",");
            var _this = this;
            EditQuestion(this.Dataform).then((res) => {
              if (res.data.code == 200) {
                _this.GetList();
                this.$message.success(res.data.message);
                setTimeout(function () {
                  _this.dialogsubjectlVisible = false;
                }, 10);
              }
              else{
                this.$message.warning(res.data.message);
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      GetList() {
        let _this = this;
        getQuestionList(_this.parameter).then((res) => {
          _this.QuestList = res.data.data.rows;
          _this.Count = res.data.data.total;
          _this.$forceUpdate();
        });
      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.GetList();
      },
      getSubTree(id, list) {
        let result = [];
        result = list.filter((t) => t.ParentId == id);
        if (result.length) {
          result = result.map((item) => {
            item.children = this.getSubTree(item.id, list);
            return item;
          });
        }
        return result;
      },
      getQuestionClassListHeadler() {
        let _this = this;
        getQuestionClassList().then((res) => {
          let list = res.data.data;
          list = list.map((t) => {
            t.value = t.id;
            t.label = t.ClassificationName;
            return t;
          });
          // let firstClass = list.find((t) => t.id == 6);
          // firstClass.children = this.getSubTree(6, list);
          // let secondClass = list.find((t) => t.id == 1);
          // secondClass.children = this.getSubTree(1, list);
          //之前用的
          // this.QuestionClass = list;

          {

           let  zylist = [],cplist=[];
          let  zylistSource = res.data.data.filter(o=>{ return o.ClassType == 0; });
          let  cplistSource = res.data.data.filter(o=>{ return o.ClassType == 2; });
 
          zylist = zylistSource.filter(t => !t.ParentId);
          zylist = zylist.map((t) => {
            t.value = t.id;
            t.label = t.ClassificationName;
            t.children = this.getSubTree(t.id, zylistSource);
            if (!t.children || !t.children.length) {
              delete t.children;
            }
            return t;
          });

          cplist = cplistSource.filter(t => !t.ParentId);
          cplist = cplist.map((t) => {
            t.value = t.id;
            t.label = t.ClassificationName;
            t.children = this.getSubTree(t.id, cplistSource);
            if (!t.children || !t.children.length) {
              delete t.children;
            }
            return t;
          });
          var questionclass_list = [{
            value:'-1',
            label:'专业类',
            children:zylist ,
            disabled: true
          },
          {
            value:'-2',
            label:'测评类',
            children:cplist ,
            disabled: true,
          }
        ];
        this.QuestionClass = questionclass_list;
          }



          var firstlist = list.filter(o => o.ClassType == 0 && o.ParentId == 0).map(o => {
            o.children = this.getSubTree(o.id, list);
            return o;
          });

          var twolist = list.filter(o => o.ClassType == 2 && o.ParentId == 0).map(o => {
            o.children = this.getSubTree(o.id, list);
            return o;

          });

          this.firstTreeData = firstlist;
          this.secondTreeData = twolist;
          // _this.$nextTick(()=>{
          //   if(_this.currentEditNode){
          //     _this.$refs.tree.getNode(_this.currentEditNode.parent).loaded = false
          //     _this.$refs.tree.getNode(_this.currentEditNode.parent).expand();
          //     _this.$refs.tree.getNode(_this.currentEditNode.parent).expanded=true;
          //     _this.$forceUpdate()

          // }

          // });

          // this.firstTreeData = [firstClass];
          // this.secondTreeData = [secondClass];
        });
      },
    },
  };
</script>
<style scoped="scoped">
  /deep/.cell {
    padding-left: 0px;
  }

  /deep/.el-form-item {
    /* margin-bottom: 5px; */
  }

  /deep/.el-radio {
    margin-right: 10px;
  }

  /deep/.el-radio__input.is-checked .el-radio__inner {
    border-color: #409eff;
    background-color: #409eff;
  }

  /deep/.el-radio__input.is-checked+.el-radio__label {
    color: #409eff;
    font-weight: bold;
  }

  /deep/.tableStyle {
    background-color: #304156 !important;
    color: #fff;
    font-weight: 400;
  }

  .QuestDiv {
    width: 24%;
    float: left;
    min-height: 50px;
    border: 1px solid #cdcdcd;
    margin-right: 10px;
    box-shadow: 0 0 10px #808080;
    border-radius: 8px;
    min-height: 100px;
    background-color: #fff;
    opacity: 0.8;
    margin-bottom: 10px;
    height: 313px;
  }

  .clear {
    clear: both;
    margin-bottom: 10px;
  }

  .font-color {
    background-color: #ae1e15 !important;
    color: #fff;
    box-shadow: 0 0 5px #ae1e15;
  }

  /deep/.el-input-group__prepend {
    font-weight: bold;
    width: 30px;
    text-align: center;
    background: #409eff;
    color: #fff;
  }

  .optionInput {
    float: left;
    width: 620px !important;
  }

  .el-icon {
    font-size: 20px;
    line-height: 40px;
    margin: 0 5px;
    cursor: pointer;
    color: #409eff !important;
  }

  >>>.subjectContentClass .el-checkbox__label {
    padding-right: 10px !important;
  }

  .seetingsDiv {
    width: 100%;
    height: 60px;
    background: #efefef;
    line-height: 60px;
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
  }

  .seetingsDiv button {
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: right;
    margin-top: 12px;
    margin-right: 10px;
  }

  .areadiv {
    background-color: #efefef;
    border-radius: 5px;
    box-shadow: 0 0 5px #efefef;
  }

  .TreeHeader {
    background-color: #304156;
    height: 60px;
    border-radius: 5px;
    box-shadow: 0 0 10px #efefef;
    line-height: 60px;
    color: #fff;
    padding-left: 10px;
  }

  .classbtn {
    float: right;
    margin: 11px 10px 0 0;
    height: 35px;
    line-height: 12px;
  }

  .eltree {
    background-color: #efefef;
  }

  /deep/.el-tree-node__content {
    min-height: 40px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
  }
</style>