<template>
  <div class="table">
    <Table :loading="$store.state.app.isLoading" border ref="selection" :columns="columns" :data="data" @on-select='onSelect' @on-select-all='onSelectAll'>
      <template slot-scope="{ row }" slot="name">
        <span>{{ row.details.name }}</span>
      </template>
      <template slot-scope="{ row }" slot="title">
        <span>{{ row.details.title }}</span>
      </template>
      <template slot-scope="{ row }" slot="created_at">
        <span>{{ row.created_at | format}}</span>
      </template>
      <template slot-scope="{ row }" slot="enable">
        <i-switch
          :value="row.is_enable === 1 ? true : false"
          @on-change="
            value => {
              change(value, row);
            }
          "
        />
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="edit(row)">编辑</a>
      </template>
      <template slot-scope="{ row }" slot="edit">
        <a @click="editCategories(row)">编辑</a>
      </template>
    </Table>
  </div>
</template>
<script>
import { formatDate } from '@/libs/util'
import {
  editCategories
} from '@/api/categories'
export default {
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      selectList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          slot: 'name'
        },
        {
          title: '副标题',
          slot: 'title',
          width: 300
        },
        {
          title: '创建日期',
          slot: 'created_at',
          key: 'created_at'
        },
        {
          title: '生效',
          slot: 'enable'
        },
        {
          title: '操作',
          slot: 'action'
        },
        {
          title: '编辑条目',
          slot: 'edit'
        }
      ]
    }
  },
  mounted () {
  },
  filters: {
    format (value) {
      return formatDate(value)
    }
  },
  methods: {
    edit (row) {
      this.$emit('edit', row)
    },
    onSelect (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    onSelectAll (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    change (status, row) {
      console.log('开关状态：' + status + row)
      row.is_enable = status ? 1 : 0
      let data = (({ details, id, is_enable, is_in_discover_list, is_in_home_list }) => ({ details, id, is_enable, is_in_discover_list, is_in_home_list }))(row)
      editCategories([data]).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          this.$Message.success('修改成功')
        }
      })
    },
    editCategories (row) {
      this.$router.push({ name: 'course', query: { row: row } })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang="less">
.table {
  margin-top: 20px;
}
</style>
