<!-- 资料库 -->
<template>
  <div v-loading="adjustCatalogLoading" class="app-container"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       element-loading-spinner="el-icon-loading"
  >

    <card-table-zy v-if="activeIndex === '2'" :key="2" ref="tableQuestion" :del-prop="['createTime']"
                :loading="loading" :max-height="tableMaxH"
                :modalData="questionList" :searchParams="questionQueryParams" :tableSearch="true"
                labelWidth="120px" @cancel="handleQuestionCancel"
                @columnSearch="handleQuestionQuery" @pagination="getQuestList"
                @resetList="resetQuestionQuery" @select="handleQuestionSelection"
    >

      <template #default="{ list }">
        <el-table-column align="center" type="selection" width="50"/>
        <el-table-column align="center" label="No" type="index" width="50"/>
        <!--题目名称-->
        <Column :label="$t('question.questionContext')" :search-params="questionQueryParams" :show-search="true"
                prop="questionContext"
                show-overflow-tooltip
        />

        <Column :label="$t('question.questionType')" :search-dict="dict.type.train_question_type"
                :search-params="questionQueryParams"
                :show-search="true"
                prop="questionType" search-type="select" select-prop="questionTypes" selectMore
        />

        <Column :label="$t('question.score')" prop="score" show-overflow-tooltip/>
        <!--标准答案-->
        <Column :label="$t('question.correctAnswer')" prop="correctAnswer" show-overflow-tooltip/>
        <Column :label="$t('common.operate')" :min-width="200" :showSearch="true" align="center" fixed="right"
                search-type="operate"
        />
      </template>

    </card-table-zy>
  </div>
</template>

<script>
import {
  editQuestionBatch,
  questionPage,
} from '@/api/train/database'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CardTableZy from '@/components/element/table/CardTableZy.vue'
import 'element-ui/lib/theme-chalk/base.css'
import ImportModal from '@/components/ImportModal/index.vue'
import Column from '@/components/element/table/Column.vue'

const RootNodeValue = 'Root'

export default {
  name: 'QuestionDatabaseDialog',
  components: {
    Column,
    ImportModal,
    CardTableZy
  },
  dicts: ['train_question_type','train_question_type',],


  data() {
    return {
      questionList: [],
      questionQueryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        questionContext: null,
        questionType: null,
        score: null,
        status: null

      },
      // 已选择的id
      checkedRows:[],
      // 已选择的数据
      selectionList:[],
    }
  },

  created() {
    this.getQuestList()
  },

  methods: {

    /** 搜索按钮操作 */
    handleQuestionQuery() {
      this.questionQueryParams.pageNum = 1
      this.getQuestList()
    },

    /** 获取问题列表*/
    async getQuestList() {
      this.loading = true
      try {
        const {createTime, updateTime, questionType, ...p} = this.questionQueryParams
        p.status = '0'
        const response = await questionPage(p)
        this.questionList = response.rows
        this.questionList.forEach(item => {
          item.questionTypeName = this.dict.label.train_question_type[item.questionType];
        })
        console.log("response=====>",response)
        this.questionQueryParams.total = response.total
        // 跨页回显
        this.questionList.forEach((row) => {
          const checkedIndex = this.checkedRows.findIndex(id => id === row.id)
          if (checkedIndex > -1) {
            this.$nextTick(()=>{
              this.$refs['tableQuestion'].$refs['table'].toggleRowSelection(row,true)
              this.selectionList.add(row)
            })
          }
        })
        this.$forceUpdate()
      } finally {
        this.loading = false
      }
    },

    /** 重置按钮操作 */
    resetQuestionQuery() {
      this.questionQueryParams = {}
      this.handleQuestionQuery()
    },
    handleQuestionSelection(row) {
      if (!this.selectUserIdSet.has(row.userId)) {
        this.checkedRows.add(row)
      }
    },
    handleQuestionCancel(row){
      this.checkedRows.forEach(item => {
        if (item.id === row.id) {
          this.checkedRows.delete(item);
        }
      });
    }

  }
}
</script>

<style lang="scss" scoped>

.app-container {
  .el-menu-nav {
    display: flex;

    .el-menu-item {
      height: 40px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .table-row {
    padding-top: 10px;
  }

  ::v-deep .el-loading-mask .el-loading-spinner {
    display: none;
  }
}


/* 更多 按钮 样式 start */
@import "@/assets/styles/element-variables.scss";

.el-dropdown-menu {
  padding: 8px 0;

  .el-dropdown-menu__item {
    padding: 0 20px;
    color: $--color-primary;
  }

  .el-dropdown-menu__item + .el-dropdown-menu__item {
    margin-top: 5px;
  }
}

::v-deep .el-dropdown-menu__item i {
  margin-right: 12px !important;
}

/* 更多 按钮 样式 end */


.el-col {
  transition: all 0.5s ease;
}


.fade-enter-active, .fade-leave-active {
  transition: all 0.2s ease, opacity 0.2s ease;
  transform: translateX(0);
  opacity: 1;
}

.fade-enter, .fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}


</style>
