<template>
  <div>
    <DialogLayout
      title="随机选题"
      width="710px"
      :visible="true"
      @onCancel="$emit('onCancel')"
      @onConfirm="onRandConfirm"
    >
      <div>
        <div class="gy-form inline" style="--fix: 80px">
          <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" style="margin: 5px 0; height: 24px">
            <div class="gy-label middle">题目总数：</div>
            <div class="gy-label middle" style="justify-content:flex-start">{{ question_total }}</div>
          </div>
        </div>
        <div class="gy-form">
          <div
            class="gy-form-item"
            style="margin: 10px 0; align-items: center; --fix: 80px"
          >
            <div class="gy-label middle">数量：</div>
            <!-- <el-input v-model="ranCount" type="number" style="width:80px " :max="question_total"></el-input> -->
            <el-input-number
              v-model="ranCount"
              size="mini"
              style="width: 120px"
              :min="0"
              :max="+question_total"
            >
            </el-input-number>
            &nbsp;/ {{ question_total }}
            <el-button
              style="margin-left: 10px"
              round
              type="primary"
              @click="getRandQuestions"
              >抽题</el-button
            >
          </div>
          <div
            class="gy-form-item"
            style="
              margin: 5px 0;
              height: 30px;
              align-items: center;
              --fix: 80px;
            "
          >
            <div class="gy-label middle">已选：</div>
            <div>
              {{ table_selections_list.length }}题
              <el-button
                type="text"
                @click="preview_dialog_show = true"
                style="padding: 0 5px"
                icon="i-j-fbks-yulan"
                >预览</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </DialogLayout>
    <QuestionListPreview
      :questionList="table_selections_list"
      v-if="preview_dialog_show"
      @onCancel="preview_dialog_show = false"
    ></QuestionListPreview>
  </div>
</template>

<script>
import { DialogLayout } from '@/components/layout'
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 {
  getQuestionCountByTypeIdApi,
  getRandQuestionApi
} from '@/api/assessment-evaluation/questions'
import QuestionListPreview from './QuestionListPreview.vue'
export default {
  components: {
    QuestionClassifySelector,
    QuestionDifficultyLevelSelector,
    DialogLayout,
    QuestionListPreview
  },
  data: () => ({
    form: { type: null, difficultyLevel: null, classifyId: null },
    table_selections_list: [],
    question_total: 0,
    ranCount: 0,
    preview_dialog_show: false
  }),
  props: {
    questionType: {
      default: null,
      require: true
    },
    oldSelection: {
      default: []
    },
    excludeIds: {
      type: Array,
      default: null
    }
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler (nv) {
        this.getCountByType(nv)
      }
    },

    questionType: {
      immediate: true,
      handler (nv) {
        this.form.type = nv
      }
    }
  },
  created () {
    this.getCountByType()
    this.table_selections_list = this.oldSelection
  },
  methods: {
    // 当用户单击确认按钮时调用的方法。
    onRandConfirm () {
      this.$emit('current-change', this.table_selections_list)
    },
    // 当用户单击“抽题”按钮时调用的方法。
    getRandQuestions () {
      if (this.ranCount > this.question_total) { return this.$message.error('抽题数不能比总提数大') }
      const queryForm = {
        count: this.ranCount,
        ...this.form
      }
      if (this.excludeIds) {
        queryForm.excludeIds = this.excludeIds
      }
      getRandQuestionApi(queryForm).then((res) => {
        this.table_selections_list = res.data
      })
    },
    // 获取问题总数的方法。
    getCountByType () {
      if (!this.form.type) return
      if (this.excludeIds) {
        this.form.excludeIds = this.excludeIds
      }
      if (parseInt(this.$store.user.baseRole) === 3) {
        this.form.student = 1
      }
      getQuestionCountByTypeIdApi(this.form).then((res) => {
        this.question_total = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.gy-label{
  padding: 0;
  justify-content: flex-end;
  padding-right: 10px !important;
}
.gy-dialog-layout ::v-deep {
  ._ctx {
    overflow: visible;
    ._title {
      border-radius: 4px 4px 0 0;
    }
  }
}
</style>
