<template>
  <VListCard
    v-loading="loading"
    style="width:200px"
    title="试题类型"
    itemLabelKey="name"
    :dataList="list_data"
    @change="selectHandle"
  />
</template>

<script>
import { getQuestionTypeOptionsApi } from '@/api/assessment-evaluation/questions'
import VListCard from './VListCard.vue'

export default {
  components: { VListCard },

  data: (_) => ({
    // 分页信息
    list_data: [],
    // 当前选中项的id
    current_selected_item_id: null,
    // 是否加载中
    loading: false
    // 是否加载完成所有数据
  }),
  methods: {
    /**
     * 分页加载数据
     */
    async paging () {
      this.loading = true
      const res = await getQuestionTypeOptionsApi()

      this.list_data = res.data
      this.loading = false
      // 列表数据长度等于数据总数则标记为已加载完所有数据
    },
    /**
     * 列表项被选中回调
     * @param {number} item 被选中的考试信息
     */
    selectHandle (item) {
      this.current_selected_item_id =
            this.current_selected_item_id === item.id ? null : item.id
      // 使用发射器抛出事件，传出当前选中项的id
      this.$emit('onchange', this.current_selected_item_id != null ? item : null)
    }
  },
  mounted () {
    this.paging()
  }
}
</script>

<style lang="scss" scoped>
.gy-exam-list {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.gy-exam-pull-list-container {
  padding: 0;
  margin: 10px 0;
  overflow-y: auto;
}
.gy-exam-item {
  & + & {
    margin-top: 10px;
  }
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
  &:hover,
  &.active {
    background: $--color-primary;
    color: #fff;
    border: none;
  }
  border: 1px solid #ccc;
}
</style>
