<script setup lang="ts">
import { searchExam } from '../../api'
import { useQuestionList } from '@/composables/useQuestionList'

const appList = ref()
let { list: selectTree }: any = useQuestionList()
const tabValue = ref('1')
const multipleSelection: any = ref([])
const emit = defineEmits<Emits>()
defineProps({
  isShowExamDialog: {
    type: Boolean,
    required: true
  },
  examList: {
    type: Array,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowExamDialog', isShowExamDialog: boolean): void
  (e: 'create', multipleSelection: any): void
}
const listOptions = {
  isLimit: true,
  remote: {
    httpRequest: searchExam,
    beforeRequest(params: any) {
      params.paper_categories = [params.paper_categories]
      return params
    },
    callback(data: any) {
      return { list: data.data, total: data.total }
    },
    params: {
      project_tag: 'resourse_ci',
      permission: tabValue,
      paper_use_list: [1, 3]
    }
  },
  filters: [
    { prop: 'paper_categories', label: '类别：', slots: 'filter-type' },
    { type: 'input', prop: 'paper_title', label: '标题：' }
  ],
  columns: [
    { fixed: 'left', type: 'selection', align: 'center' },

    {
      label: '组卷模式',
      prop: 'paper_type',
      computed: (row: any) => {
        return row.row.paper_type === 1 ? '选题组卷' : '自动组卷'
      },
      align: 'center'
    },
    {
      label: '试卷用途',
      prop: 'paper_uses',
      computed: (row: any) => {
        const map = { 1: '考试', 2: '课后作业', 3: '课程测试' }
        return map[row.row.paper_uses] || row.row.paper_uses
      },
      align: 'center'
    },
    { label: '试卷分类', prop: 'paper_category.name', align: 'center' },
    { label: '试卷名称', prop: 'paper_title', align: 'center' },
    { label: '总分', prop: 'paper_total_score', align: 'center' },
    { label: '及格分数', prop: 'pass_score', align: 'center' },
    { label: '更新时间', prop: 'updated_at', align: 'center' }
  ]
}

// 资源出处 tab触发
const tabChange = () => {
  appList.value?.refetch()
}
// 取消
const handleCancel = () => {
  emit('update:isShowExamDialog', false)
}
// 保存
const handleSave = () => {
  emit('update:isShowExamDialog', false)
  emit('create', multipleSelection)
}

// 筛选下拉选择tree 视频分类
const defaultProps = {
  children: 'children',
  label: 'category_name',
  value: 'id'
}
// 刷新
const typeFilter = () => {
  appList.value.refetch()
}
const handleSelectionChange = (val: any) => {
  multipleSelection.value = JSON.parse(JSON.stringify(val))
}
</script>

<template>
  <el-drawer :model-value="isShowExamDialog" :before-close="handleCancel" size="60%" title="添加考试">
    <el-row>
      <el-col :span="2" :offset="22">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-col>
    </el-row>
    <div class="video-head">
      <el-tabs @tab-change="tabChange" v-model="tabValue">
        <el-tab-pane label="我的资源" name="1"></el-tab-pane>
        <el-tab-pane label="公开资源" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <AppList v-bind="listOptions" ref="appList" @selection-change="handleSelectionChange">
      <template #filter-type="{ params }">
        <el-tree-select
          @change="typeFilter"
          clearable
          :props="defaultProps"
          v-model="params.paper_categories"
          :data="selectTree"
          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
        />
      </template>
    </AppList>
  </el-drawer>
</template>
<style lang="scss"></style>
