<template>
  <div>
    <DialogLayout
      title="固定选题"
      width="680px"
      :visible="true"
      @onCancel="$emit('onCancel')"
      @onConfirm="onFixedConfirm"
      class="gy-dialog-layout"
    >
      <div>
        <div class="gy-form inline" style="--fix: 77px">
          <div class="gy-form-item">
            <div class="gy-label middle">试题分类:</div>
            <QuestionClassifySelector
              :mountedLoad="true"
              v-model="form.classifyId"
            ></QuestionClassifySelector>
          </div>
          <div class="gy-form-item">
            <div class="gy-label middle">选题限制:</div>
            <QuestionDifficultyLevelSelector
              :mountedLoad="true"
              v-model="form.difficultyLevel"
            ></QuestionDifficultyLevelSelector>
          </div>
          <div class="gy-form-item mb" style="margin: 10px 0">
            <div class="gy-label middle">过滤：</div>
            <el-input
              v-model="form.title"
              placeholder="请输入关键字过滤"
              style="width: 350px"
            ></el-input>
            <el-button
              style="margin-left: 10px"
              round
              type="primary"
              @click="pagingFindList"
              >查询</el-button
            >
          </div>
        </div>
        <div class="gy-form" style="--fix: 80px; margin: 10px 0">
          <div class="gy-form-item mb">
            <div class="gy-label middle">题目总数：</div>
            <div>{{ page_info.total }}</div>
          </div>
        </div>
        <TableLayout
          ref="tableRef"
          :column="column"
          :data="table_data"
          :pageInfo="page_info"
          class="gy-el-table"
          @current-change="(e) => pagingChange({ currentPage: e })"
          @size-change="(e) => pagingChange({ pageSize: e })"
          selection
          @select="userSelectItem"
          @select-all="allSelectHandler"
        >
        </TableLayout>
        <p style="padding-left: 10px">
          已选：{{ table_selections_list.length }} 题
          <el-button
            type="text"
            @click="preview_dialog_show = true"
            icon="i-j-fbks-yulan"
            >预览</el-button
          >
        </p>
        <!-- @selection-change="handleSelectionChange" -->
      </div>
    </DialogLayout>
    <QuestionListPreview
      :questionList="table_selections_list"
      v-if="preview_dialog_show"
      @onCancel="preview_dialog_show = false"
    ></QuestionListPreview>
  </div>
</template>

<script>
import QuestionClassifySelector from '@/views/assessment-evaluation/question-bank-manage/add-modify-question/components/QuestionClassifySelector.vue'
import QuestionDifficultyLevelSelector from '@/views/assessment-evaluation/question-bank-manage/add-modify-question/components/QuestionDifficultyLevelSelector.vue'
import { TableLayout, DialogLayout } from '@/components/layout'
import { pagingFindQuestionsApi } from '@/api/assessment-evaluation/questions'
import QuestionListPreview from './QuestionListPreview.vue'
export default {
  components: {
    TableLayout,
    QuestionClassifySelector,
    DialogLayout,
    QuestionListPreview,
    QuestionDifficultyLevelSelector
  },
  data: () => ({
    table_data: [],
    page_info: { currentPage: 1, pageSize: 10, total: 0 },
    form: { title: '', type: null, difficultyLevel: null },
    table_selections_list: [],
    old_selections_list: [],
    preview_dialog_show: false
  }),
  props: {
    questionType: {
      default: null
    },
    oldSelection: {
      default: []
    },
    excludeIds: {
      type: Array,
      default: null
    }
  },
  watch: {
    table_selections_list: {
      immediate: true,
      deep: true,
      handler (nv) {}
    },
    oldSelection: {
      immediate: true,
      deep: true,
      handler (nv) {
        this.old_selections_list = nv
        this.initTableSelection()
      }
    },
    questionType: {
      immediate: true,
      handler (nv) {
        this.form.type = nv
        this.pagingFindList()
      }
    }
  },
  created () {
    this.column = [{ prop: 'title', label: '题目', width: 150, align: 'center', 'show-overflow-tooltip': true }, { prop: 'type', label: '试题类型', align: 'center', 'show-overflow-tooltip': true }, { prop: 'classify', label: '试题分类', align: 'center', 'show-overflow-tooltip': true }, { prop: 'difficultyLevel', label: '难度', width: 60, align: 'center', 'show-overflow-tooltip': true }, { prop: 'knowledgePoint', label: '知识点', align: 'center', 'show-overflow-tooltip': true }, { prop: 'creator', label: '创建人', align: 'center', 'show-overflow-tooltip': true }]
    this.pagingFindList()
    this.table_selections_list = this.old_selections_list
  },
  methods: {
    /**
     * 确认选题回调
     */
    onFixedConfirm () {
      this.$emit('current-change', this.table_selections_list)
    },
    /*
     * 更新表数据时调用的方法。它用于选择已经选择的行。
     */
    initTableSelection () {
      /*
       *
       */
      this.table_data.forEach((row) => {
        const id = this.old_selections_list.findIndex(
          (kitem) => kitem.id === row.id
        )
        if (id !== -1) {
          this.$nextTick(() => {
            this.$refs.tableRef.$refs.tableRef.toggleRowSelection(row, true)
          })
        }
      })
    },
    /*
     * 当用户选择表中的所有行时调用的方法。
     */
    allSelectHandler (a) {
      if (a.length > 0) {
        a.forEach((item) => {
          const ind = this.table_selections_list.findIndex(
            (i) => i.id === item.id
          )
          if (ind === -1) {
            this.table_selections_list.push(item)
          }
        })
      } else {
        this.table_data.forEach((item) => {
          const ind = this.table_selections_list.findIndex(
            (i) => i.id === item.id
          )
          if (ind !== -1) {
            this.table_selections_list.splice(ind, 1)
          }
        })
      }
    },
    /*
     * 当用户选择表中的行时调用的方法。
     */
    userSelectItem (a, b) {
      const checked = a.includes(b)
      if (checked) {
        this.table_selections_list.push(b)
      } else {
        const ind = this.table_selections_list.findIndex((i) => i.id === b.id)
        this.table_selections_list.splice(ind, 1)
      }
      /*
       *
       */
    },
    /*
     * 用户更改页面时调用的方法。
     */
    pagingChange (event) {
      if (
        typeof event.currentPage !== 'number' &&
        typeof event.pageSize !== 'number'
      ) {
        return
      }
      this.page_info = { ...this.page_info, ...event }
      this.pagingFindList()
    },
    /*
     * handleSelectionChange (e) {
     *   this.table_selections_list = e
     * },
     */
    /*
     * 将 page_info 设置为默认值。
     */
    initPageInfo () {
      this.page_info = {
        currentPage: 1,
        pageSize: this.page_info.pageSize,
        total: 0
      }
    },
    /*
     * 当分页时调用的方法。
     */
    pagingFindList (e) {
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      let classifyId = this.current_classify_id
      if (classifyId === 'system') classifyId = null
      this.questions_list_loading = true
      if (this.excludeIds) {
        this.form.excludeIds = this.excludeIds
      }
      if (parseInt(this.$store.user.baseRole) === 3) {
        this.form.student = 1
      }
      pagingFindQuestionsApi({ ...this.page_info, classifyId, ...this.form })
        .then((res) => {
          /*
           *
           */
          const { currentPage, pageSize, total } = res.data
          this.table_data = res.data.data
          // eslint-disable-next-line eqeqeq
          if (this.table_data.length === 0 && this.page_info.currentPage != 1) {
            this.initPageInfo()
            this.pagingFindList()
          }
          this.page_info = { currentPage, pageSize, total }
          this.$nextTick(() => {
            this.initTableSelection()
          })
        })
        .finally((_) => {
          this.questions_list_loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
