<template>
  <a-card :bordered="false" title="课件列表">
    <template v-if="!!!courseId" slot="extra">
      <a-button size="small" @click="goback">返回</a-button>
    </template>
    <div v-if="!!!courseId" class="button" style="width: 100%; height: 32px; margin-bottom: 8px; margin-right: 10%;">
      <!-- <a-button type="primary" @click="goback">返回</a-button> -->
      <a-button type="primary" @click="coursewareAdd">上传课件</a-button>
    </div>
    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData">
      <template v-if="!!!courseId" slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="detail(record)">预览</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="edit(record)">重新上传</a>
        <a-divider type="vertical" />
        <a-popconfirm title="是否删除?" @confirm="() => del(record)">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="courseQuestion(record)">抽考题</a>
      </template>
      <template v-if="courseId" slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="openDrawer(record)">预览</a>
      </template>
    </s-table>
    <a-drawer title="课件预览" :destroyOnClose="true" placement="right" width="1200" :closable="true" :visible="coursewareVisible" @close="() => this.coursewareVisible = false">
      <courseware-preview :coursewareId="selectCoursewareId"/>
    </a-drawer>
  </a-card>
</template>
<script>
import { STable, SearchCom } from '@/components'
import { getCoursewareListByCourseId } from '@/api/course/course'
import { deleteCourseware } from '@/api/course/courseware'
import CoursewarePreview from './CoursewarePreview.vue'


export default {
  components: {
    STable,
    SearchCom,
    CoursewarePreview,
  },
  props: {
    courseId: {
      type: Number,
    }
  },
  watch: {
  },
  data() {
    return {
      selectCoursewareId: '',
      coursewareVisible: false,
      queryParam: { id: this.$route.query.id || this.courseId },
      loadData: (parameter) => {
        return getCoursewareListByCourseId(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
      columns: [
        { title: '课件名称', width: '160px', align: 'center', dataIndex: 'name', key: 'name' },
        {
          title: '课件分类',
          width: '300px',
          align: 'center',
          dataIndex: 'classifyName',
          key: 'classifyName',
        },
        { title: '课时/分', width: '160px', align: 'center', dataIndex: 'duration', key: 'duration' },
        { title: '课件大小(MB)', width: '160px', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' },
        { title: '操作', key: 'operation', width: '200px', align: 'center', scopedSlots: { customRender: 'action' } },
      ],
    }
  },
  methods: {
    openDrawer(record){
      this.coursewareVisible = true;
      this.selectCoursewareId = record.id;
    },
    //新增课件
    coursewareAdd() {
      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id, ifResources: 0 } })
    },

    //编辑
    edit(record) {
      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { coursewareId: record.id, courseId: this.$route.query.id, type: record.type } })
    },

    //返回
    goback() {
      this.$router.push({ path: '/course/CourseList', query: {} })
    },

    // 刪除課件
    del(record) {
      deleteCourseware({ id: record.id }).then((res) => {
        if (res.code == 200) {
          this.$refs.table.refresh(true)
          this.$message.success('删除成功！')
        } else {
          this.$message.error('删除失败！')
        }
      })
    },
    // 抽考題
    courseQuestion(record) {
      this.$router.push({
        path: '/course/question/ExamQuestion',
        query: { coursewareId: record.id, courseId: this.$route.query.id },
      })
    },

    //课件预览
    detail(record) {
      let preview = false
      if (!this.courseId) preview = true
      this.$router.push({
        path: '/course/CoursewarePreview',
        query: { coursewareId: record.id, courseId: this.$route.query.id || this.courseId },
      })
    },
  },
}
</script>