<script setup lang="ts">
import { searchExam, createCharacter } from '../../api'
import { useQuestionList } from '@/composables/useQuestionList'
const appList = ref()
let { list: selectTree }: any = useQuestionList()
const tabValue = ref('1')
const selectionRow: any = ref([])
const tableData = ref([])
const emit = defineEmits<Emits>()
const props = defineProps({
  // 是否多选
  isMultiple: {
    type: Boolean,
    required: true
  },
  isShowExamDialog: {
    type: Boolean,
    required: true
  },
  course_id: {
    type: String,
    required: true
  },
  chapterName: {
    type: String,
    required: true
  },
  chapterID: {
    type: String,
    required: true
  },
  btnInfo: {
    type: Object,
    required: true
  },
  paper_use_list: {
    type: Array,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowExamDialog', isShowExamDialog: boolean): void
  (e: 'create'): void
}
const listOptions = {
  isLimit: true,
  remote: {
    httpRequest: searchExam,
    beforeRequest(params: any) {
      params.paper_categories = [params.paper_categories]
      return params
    },
    callback(data: any) {
      tableData.value = data.data
      return { list: data.data, total: data.total }
    },
    params: {
      project_tag: 'resourse_ci',
      permission: tabValue,
      paper_use_list: props.paper_use_list
    }
  },
  filters: [
    { prop: 'paper_categories', label: '类别：', slots: 'filter-type' },
    { type: 'input', prop: 'paper_title', label: '标题：' }
  ],
  columns: [
    { type: 'selection', fixed: 'left' },
    { type: 'index', label: '序号', fixed: 'center', width: '100px' },
    {
      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', minWidth: 200, align: 'center' },
    { label: '试卷名称', prop: 'paper_title', minWidth: 200, align: 'center' },
    { label: '总分', prop: 'paper_total_score', align: 'center' },
    { label: '及格分数', prop: 'pass_score', align: 'center' },
    { label: '更新时间', prop: 'updated_at', align: 'center' }
  ],
  data: tableData.value
}

// 资源出处 tab触发
const tabChange = () => {
  appList.value?.refetch()
}

const handleCancel = () => {
  emit('update:isShowExamDialog', false)
}
// 单选
const handleSelection = (selection: any) => {
  // table组件选中事件
  if (selection.length > 1 && props.isMultiple === false) {
    let del_row = selection.shift()
    appList.value?.tableRef.toggleRowSelection(del_row, false)
    selectionRow.value = selection
  } else if (props.isMultiple === true || (selection.length <= 1 && props.isMultiple === false)) {
    selectionRow.value = selection
  }
}

// 保存
const handleSave = () => {
  const name = selectionRow.value[0]?.paper_title
  const resource_id = selectionRow.value[0]?.id
  const params: any = {
    name: name,
    course_id: props.course_id,
    resource_type: props.btnInfo.resource_type,
    parent_id: props.chapterID,
    resource_id: resource_id
  }
  createCharacter(params).then(() => {
    emit('update:isShowExamDialog', false)
    emit('create')
  })
}

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

<template>
  <el-drawer
    :model-value="isShowExamDialog"
    draggable
    :before-close="handleCancel"
    size="70%"
    :title="`添加${props.btnInfo.btn_name}`"
  >
    <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" @select="handleSelection">
      <template #filter-type="{ params }">
        <el-tree-select
          @change="typeFilter"
          clearable
          :props="defaultProps"
          v-model="params.paper_categories"
          :data="selectTree"
          check-strictly
          :render-after-expand="false"
          multiple
          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
        />
      </template>
    </AppList>
  </el-drawer>
</template>
<style lang="scss" scoped>
:deep(.el-table__header-wrapper .el-checkbox) {
  display: none;
}
</style>
