<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="课程表列表" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.title" style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getCourse">查询</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;" @click="$refs['addCourse'].isShow = true,$refs['addCourse'].type = 'add'">添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :list="list"
      :total="total"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorActivity(scope.row.id,'editor')">编辑</Button>
            <Poptip
              transfer
              confirm
              title="确认要删除吗？"
              @on-ok="deleteActivity(scope.row)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>

      </xy-table>

    <addCourse ref="addCourse" @refresh="getCourse"></addCourse>
  </div>
</template>

<script>
import {index,destroy} from "@/api/course"

import addCourse from '@/views/course/component/addCourse'
import { Message } from 'element-ui'
export default {
  components:{
    addCourse
  },
  data() {
    return {
      select:{
        pageSize:10,
        pageIndex:1,
        title:""
      },
      total:0,
      list:[],
      table:[
        {
          label:"课程名称",
          prop:'title',
          align:'left',
        },
        {
          label:"链接",
          prop:'link',
          align:'left',
          formatter: (cell, data, value, index) => {
            return '/pages/active/course?id='+cell.id
          }
        }
      ]
    }
  },
  methods: {
    async getCourse(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex,
        title:this.select.title
      })
      this.list = res.data
      this.total = res.total
    },

    pageChange(e){
      this.select.pageIndex = e
      this.getCourse()
    },
    deleteActivity(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除课程成功'
        })
        this.getCourse()
      })
    },
    editorActivity(id,type){
      this.$refs['addCourse'].id = id
      this.$refs['addCourse'].type = type
      this.$refs['addCourse'].isShow = true
    },
  },
  mounted() {
    this.getCourse()
  }

}
</script>

<style scoped lang="scss">
</style>
