<template>
  <div>
    <a-card title="节目列表">
      <span
        slot="extra"
        size="small"
        type="primary"
        position="left"
        style="color:red"
      >
        新建节目请前往线下节目管理进行新建编辑
      </span>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="list"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="changePage"
        >
          <template
            slot="type"
            slot-scope="text, record"
          >
            <a-icon
              :type="record.type.indexOf('video')>-1?'play-circle':'picture'"
            />
            {{ record.type | fileType }}
          </template>

          <template
            slot="duration"
            slot-scope="text, record"
          >
            {{ record.duration }} 秒
          </template>

          <template
            slot="size"
            slot-scope="text, record"
          >
            {{ Math.round(record.size / 1024) }} KB
          </template>

          <template
            slot="status"
            slot-scope="text, record"
          >
            <span :style="{color: record.status==='active'?'#1BAAAC':'#81A1A2'}">
              {{ record.status==='active'?'已激活':'已禁用' }}
            </span>
          </template>
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="handleEdit(record)"
            >
              编辑内容
            </a-button>
          </template>
        </a-table>
      </a-spin>
    </a-card>
    <EditModal
      :id="curentId"
      v-model="editVisible"
      @update="handleUpdate"
    ></EditModal>
  </div>
</template>

<script>
import { getPerformList } from '@/api/ticketSetting/perform'
import EditModal from './perform/EditModal'
const columns = [
  {
    width: 40,
    title: 'id',
    dataIndex: 'id',
    key: 'id'
  },
  {
    width: 120,
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    width: 160,
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    width: 160,
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    EditModal
  },
  async created () {
    this.getPerformList()
  },
  data () {
    return {
      columns,
      loading: false,
      curentId: 0,
      editVisible: false,
      advStatus: 'active,inactive',
      list: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      advId: 0
    }
  },
  methods: {
    changePage (page) {
      this.pagination = { ...page }
      this.getPerformList()
    },
    handleUpdate () {
      this.getPerformList({ pageNum: this.pagination.current, pageSize: this.pagination.pageSize })
    },
    getPerformList () {
      const params = {
        pageNum: this.pagination.current,
        status: ['active']
      }
      this.loading = true
      getPerformList(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.list = res.extraInfo.list
        this.loading = false
      })
    },

    handleEdit (data) {
      this.editVisible = true
      this.curentId = data.id
    }
  }
}
</script>

<style scoped>

</style>
