<template>
  <a-card :bordered="false" title="课程列表">
    <div class="table-page-search-wrapper">
      <SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="
          () => {
            ;(queryParam = {}), handleRefresh()
          }
        "></SearchCom>
      <div style="width: 100%; height: 32px; margin-bottom: 8px">
        <a-button type="primary" @click="courseAdd">新建课程</a-button>
      </div>
    </div>
    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :pageNum="Number(this.$route.query.PageNum) || 1">
      <template slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="detail(record)">详情</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="courseWare(record)">课件</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="courseWare(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>
    </s-table>
  </a-card>
</template>


<script>
import { STable, SearchCom } from '@/components'
import { getCourseList, deleteCourse } from '@/api/course/course'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'

export default {
  components: {
    STable,
    SearchCom,
  },
  data() {
    return {
      dictCourseTag: [],
      queryParam: { courseName: this.$route.query.courseName || '', tag: [], type: '' },
      queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
        { type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] },
        { type: 'select-dic', placeholder: '请选择标签', key: 'tag', mode: 'multiple', options: [] },
      ],
      loadData: (parameter) => {
        return getCourseList(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
      columns: [
        { title: '课程编号', width: '160px', align: 'center', dataIndex: 'courseCode', key: 'courseCode' },
        { title: '课程名称', width: 'auto', align: 'center', dataIndex: 'courseName', key: 'courseName' },
        { title: '课程类别', width: 'auto', align: 'center', dataIndex: 'courseTypeName', key: 'courseTypeName' },
        { title: '课时/分', width: '160px', align: 'center', dataIndex: 'hour', key: 'hour' },
        { title: '数量', width: '160px', align: 'center', dataIndex: 'questionCount', key: 'questionCount' },
        { title: '操作', key: 'operation', width: '300px', align: 'center', scopedSlots: { customRender: 'action' } },
      ],
    }
  },
  created() {
    this.dictionaryDropDown()
  },
  watch: {
    $route(to, from) {
      //to是前往的路由  from是去往的路由 同一个组件只会渲染一次
      this.changeType(to.path)
      this.$refs.table.refresh(true)
    },
  },
  methods: {
    // 获取数据词典
    dictionaryDropDown() {
      this.formLoading = false

      //课程类别
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        console.log('课程类别----', res)
        this.queryOptions[1].options = dictToTree(res.data, [], 0)
      })

      //课程标签字典
      dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
        this.queryOptions[2].options = res.data
      })
    },
    handleRefresh() {
      this.$refs.table.refresh(true)
    },
    detail(record) {
      this.$router.push({ path: '/course/CourseDetail', query: { id: record.id } })
    },
    courseWare(record) {
      this.$router.push({ path: '/course/CoursewareList', query: { id: record.id } })
    },
    del(record) {
      deleteCourse({ ids: record.id }).then((res) => {
        if (res.code == 200) this.$refs.table.refresh(true)
      })
    },

    //题库
    courseQuestion(record) {
      this.$router.push({
        path: '/course/question/QuestionList',
        query: {
          id: record.id,
          courseName: this.queryParam.courseName,
          pageNum: this.$refs.table.localPagination.current,
        },
      })
    },

    //課程新增
    courseAdd() {
      this.$router.push({
        path: '/course/CourseAdd',
        query: {
          courseName: this.queryParam.courseName,
          type: this.queryParam.type
        },
      })
    },
    //变更类型
    changeType(path) {
      var arr = []
      if (path) {
        arr = path.split('/')
      } else {
        arr = this.$route.path.split('/')
      }
      let str = arr[arr.length - 1]
      this.queryParam.type = str

      //权限
      // str === 'sys' ? (this.power.add = 'project:sys:add') : (this.power.add = 'project:add')
      // str === 'sys' ? (this.power.del = 'project:sys:del') : (this.power.del = 'project:del')
      // str === 'sys' ? (this.power.edit = 'project:sys:edit') : (this.power.edit = 'project:edit')
      // str === 'sys' ? (this.power.release = 'project:sys:release') : (this.power.release = 'project:release')
    },
  },
}
</script>