<template>
    <div class="table">
        <Table
            :columns="columns"
            :data="data"
            :loading="$store.state.app.isLoading"
            @on-select="onSelect"
            @on-select-all="onSelectAll"
            border
            ref="selection"
        >
           <template slot="track_type" slot-scope="{ row }">
                <span v-if="i.id===row.details.track_type" v-for="(i,idx) in track_type" :key='idx'>{{i.name}}</span>
            </template>
            <template slot="name" slot-scope="{ row }">
                <span>{{row.details.name}}</span>
            </template>
            <template slot="title" slot-scope="{ row }">
                <span>{{row.details.title}}</span>
            </template>
            <template slot="summary" slot-scope="{ row }">
                <span>{{row.details.summary}}</span>
            </template>
            <template slot="created_at" slot-scope="{ row }">
                <span>{{ row.created_at | format}}</span>
            </template>
            <template slot="icon" slot-scope="{ row }">
                <img :src="row.details.res_icon" alt="音轨图标" />
            </template>
            <template slot="enable" slot-scope="{ row }">
                <i-switch :value="row.is_enable===1?true:false" @on-change="(value)=>{change(value,row)}" />
            </template>
            <template slot="action" slot-scope="{ row }">
                <a @click="edit(row)">编辑</a>
            </template>
            <template slot="edit" slot-scope="{ row }">
                <a>编辑</a>
            </template>
        </Table>
    </div>
</template>
<script>
import { formatDate } from '@/libs/util'
import { editTracks } from '@/api/tracks'
export default {
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  filters: {
    format (value) {
      return formatDate(value)
    }
  },
  data () {
    return {
      track_type: [{ id: 0, name: '常规类型' }, { id: 1, name: '语音' }, { id: 2, name: '脑波' }, { id: 3, name: '呼吸引导' }, { id: 4, name: '单音频' }, { id: 5, name: '效果类短音频' }, { id: 6, name: '旋律类短音频' }, { id: 7, name: '混音音轨' }, { id: 8, name: '自定义' }],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '类型',
          slot: 'track_type'
        },
        {
          title: '名称',
          slot: 'name'
        },
        {
          title: '介绍',
          slot: 'summary',
          width: 300
        },
        {
          title: '音轨ICON',
          slot: 'icon'
        },
        {
          title: '创建日期',
          slot: 'created_at',
          width: 200
        },
        {
          title: '生效',
          slot: 'enable'
        },
        {
          title: '关联主题',
          key: 'theme_name'
        },
        {
          title: '关联条目内容',
          key: 'course_content_name',
          width: 110
        },
        {
          title: '操作',
          slot: 'action'
        },
        {
          title: '编辑素材',
          slot: 'edit'
        }
      ]
    }
  },
  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
      delete row.created_at
      delete row.deleted_at
      delete row.updated_at
      editTracks([row]).then(res => {
        if (res.code === 200 && res.data.length > 0) {
          this.$Message.success('修改成功')
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang="less">
.table {
    margin-top: 20px;
    img {
        background: #2d3864;
        width: 51px;
        height: 51px;
    }
}
</style>
