<script setup lang="ts">
import { getBookList } from '../../api'
import { useUserStore } from '@/stores/user'

const appList = ref()

const userStore = useUserStore()

const userInfo: any = userStore.user

const emit = defineEmits<Emits>()
const props = defineProps({
  isShowAddDialog: {
    type: Boolean,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowAddDialog', isShowVideoDialog: boolean): void
  (e: 'create', val: any): void
}

const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getBookList,
      params: { tel: userInfo.mobile, name: '' }
    },
    filters: [{ type: 'input', prop: 'name', placeholder: '书籍名称' }],
    columns: [
      // { type: 'selection' },
      { label: '数字教材名称', prop: 'name' },
      {
        label: '封面',
        prop: 'img',
        computed(row: any) {
          return `<img src="${row.row.img}" style="height:100px;display:block">`
        }
      },
      { label: '作者', prop: 'authors' },
      { label: '发布者', prop: 'user.real_name' },
      {
        label: '审核状态',
        prop: 'audit_status',
        computed(row: any) {
          const j: any = {
            '1': '待发布',
            '2': '审核中',
            '3': '审核未通过',
            '4': '审核通过'
          }
          return j[row?.row?.audit_status]
        }
      },
      // { label: '版号', prop: 'name' },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
    ]
  }
})
// 取消
const handleCancel = () => {
  emit('update:isShowAddDialog', false)
}
const handleDetail = function (row: any) {
  emit('update:isShowAddDialog', false)
  emit('create', row)
}

const handleView = function (row: any) {
  window.open(`https://zijingebook.ezijing.com/student/book?book_id=${row.id}`)
}
</script>

<template>
  <el-drawer :model-value="isShowAddDialog" draggable :before-close="handleCancel" size="60%" title="添加数字教材">
    <AppList v-bind="listOptions" ref="appList">
      <!-- <el-button style="margin-bottom: 15px" type="primary" @click="addTextbook">添加</el-button> -->
      <template #table-operate="{ row }">
        <el-button plain @click="handleView(row)">查阅</el-button>
        <el-button plain @click="handleDetail(row)">添加</el-button>
      </template>
    </AppList>
  </el-drawer>
</template>
<style lang="scss" scoped>
.card-list {
  display: flex;
  flex-direction: column;
}
.card-list-con {
  background: #fafafa;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.video-head {
  position: relative;
  .video-head-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 30px;
    color: #666;
    cursor: pointer;
  }
}
.video-tool-btn {
  padding: 10px 0 30px 0;
}

.video-head-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
  color: #666;
  cursor: pointer;
}
</style>
