<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTeacherList, deleteTeacher } from '../api'
import { useMapStore } from '@/stores/map'
const store = useMapStore()
const router = useRouter()
const appList = ref()
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getTeacherList,
      params: { type: '' }
    },
    filters: [
      { type: 'input', prop: 'name', label: '讲师姓名：', placeholder: '请输入讲师姓名' },
      { type: 'input', prop: 'office', label: '讲师任职机构：', placeholder: '请输入讲师任职机构' },
      { type: 'input', prop: 'title', label: '讲师职位：', placeholder: '请输入讲师职位' },
      {
        type: 'select',
        prop: 'education',
        label: '讲师学历：',
        placeholder: '请选择讲师学历',
        options: store.getMapValuesByKey('teacher_level'),
        valueKey: 'label'
      }
    ],
    columns: [
      { label: '#', type: 'index', align: 'center' },
      { label: '讲师头像', slots: 'table-img', align: 'center' },
      { label: '讲师姓名', prop: 'name', align: 'center' },
      { label: '讲师任职机构', prop: 'office', align: 'center' },
      { label: '讲师职位', prop: 'title', align: 'center' },
      {
        label: '讲师学历',
        prop: 'education',
        align: 'center'
      },
      { label: '创建时间', prop: 'created_time', align: 'center' },
      { label: '操作', slots: 'table-operate', width: 230, align: 'center' , fixed: 'right'}
    ]
  }
})
// 删除讲师
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    deleteTeacher({ id: row.id }).then(() => {
      ElMessage.success('删除成功')
      appList.value.refetch()
    })
  })
}
// 更新讲师
const handleUpdate = (row: any) => {
  router.push({
    path: '/admin/teacher/detail',
    query: {
      id: row.id,
      isEdit: '0',
      title: '更新讲师'
    }
  })
}
//讲师详情
const handleDetail = (row: any) => {
  router.push({
    path: '/admin/teacher/detail',
    query: {
      id: row.id,
      isEdit: '1',
      title: '讲师详情'
    }
  })
}
const imgDefault = ref('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')
</script>

<template>
  <AppCard title="讲师管理">
    <AppList v-bind="listOptions" ref="appList" border stripe>
      <router-link to="/admin/teacher/add">
        <el-button type="primary" round style="margin-bottom: 20px" v-permission="'v1-backend-lecturer-create'"
          >添加讲师</el-button
        >
      </router-link>
      <template #header-aside> </template>
      <template #table-img="{ row }">
        <el-image
          :src="row.avatar || imgDefault"
          alt=""
          style="width: 50px; height: 50px"
          :preview-src-list="[row.avatar] || [imgDefault]"
          :initial-index="4"
          fit="contain"
          :preview-teleported="true"
        />
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <el-link type="primary" plain @click="handleDetail(row)" v-permission="'v1-backend-lecturer-view'"
            >查看</el-link
          >
          <el-link type="primary" plain @click="handleUpdate(row)" v-permission="'v1-backend-lecturer-update'"
            >更新</el-link
          >
          <el-link type="primary" plain @click="handleDelete(row)" v-permission="'v1-backend-lecturer-delete'"
            >删除</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
</template>
