<template>
  <div>
    <a-card title="滚动字幕列表">
      <a-button
        slot="extra"
        size="small"
        type="primary"
        icon="plus"
        @click="addVisible=true"
      >
        新建字幕
      </a-button>
      <a-button
        slot="extra"
        size="small"
        type="primary"
        style="background: #F77E7E; border-color: #F77E7E;"
        @click="versionPreview"
      >
        发布
      </a-button>
      <div>
        <a-radio-group
          v-model="marqueeStatus"
          @change="getMarqueeList"
          default-value="active,inactive"
          button-style="solid"
        >
          <a-radio-button value="active,inactive">
            全部
          </a-radio-button>
          <a-radio-button value="active">
            已激活
          </a-radio-button>
          <a-radio-button value="inactive">
            已禁用
          </a-radio-button>
        </a-radio-group>
      </div>
      <br>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="marqueeList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="changePage"
        >
          <template
            slot="content"
            slot-scope="text, record"
          >
            <ellipsis
              :length="20"
              tooltip
            >{{ record.content }}</ellipsis>
          </template>
          <template
            slot="periods"
            slot-scope="text, record"
          >
            <div
              v-for="(time, index) in record.periods"
              :key="index"
            >
              {{ time.start }} - {{ time.end }}
            </div>
          </template>
          <template
            slot="status"
            slot-scope="text, record"
          >
            <span :style="{color: record.status==='active'?'#1BAAAC':'#81A1A2'}">
              {{ record.status==='active'?'已激活':'已禁用' }}
            </span>
          &nbsp;
            <a-button
              size="small"
              :type="record.status==='active'?'danger':'primary'"
              @click="handleActive(record)"
            >
              {{ record.status==='active'?'禁用':'激活' }}
            </a-button>
          </template>
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="handleEdit(record)"
            >
              编辑
            </a-button>
            <a-popconfirm
              title="确认删除？"
              @confirm="handleDelete(record)"
              ok-text="是"
              cancel-text="否"
            >
              <a-button
                size="small"
                type="danger"
              >
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-spin>
    </a-card>
    <AddModal
      v-model="addVisible"
      @update="getMarqueeList"
    ></AddModal>
    <EditModal
      v-model="editVisible"
      :current-item="currentItem"
      @update="getMarqueeList"
    ></EditModal>
    <AddVersion
      v-model="addVersionVisible"
      :version-info="versionInfo"
    ></AddVersion>
  </div>
</template>

<script>
import { getMarqueeList, activeMarquee, deleteMarquee, versionPreview } from '@/api/marquee'
import Ellipsis from '@/components/Ellipsis'
import AddModal from './marquee/AddModal'
import EditModal from './marquee/EditModal'
import AddVersion from './marquee/AddVersion'
const columns = [
  {
    width: 120,
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    width: 190,
    title: '内容',
    dataIndex: 'content',
    key: 'content',
    scopedSlots: { customRender: 'content' }
  },
  {
    width: 120,
    title: '开始日期',
    dataIndex: 'start',
    key: 'start'
  },
  {
    width: 120,
    title: '结束日期',
    dataIndex: 'end',
    key: 'end'
  },
  {
    width: 200,
    title: '时间',
    dataIndex: 'periods',
    key: 'periods',
    scopedSlots: { customRender: 'periods' }
  },
  {
    width: 70,
    title: '速度',
    dataIndex: 'speed',
    key: 'speed'
  },
  {
    width: 100,
    title: '每次重复',
    dataIndex: 'count_per_time',
    key: 'count_per_time'
  },
  {
    width: 160,
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    width: 160,
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    AddModal,
    EditModal,
    AddVersion,
    Ellipsis
  },
  created () {
    this.getMarqueeList()
  },
  data () {
    return {
      columns,
      loading: false,
      marqueeStatus: 'active,inactive',
      marqueeList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      addVisible: false,
      editVisible: false,
      currentItem: {},
      versionInfo: {},
      addVersionVisible: false
    }
  },
  methods: {
    changePage (page) {
      this.pagination = { ...page }
      this.getMarqueeList()
    },
    getMarqueeList () {
      const status = this.marqueeStatus.split(',')
      const params = {
        pageNum: this.pagination.current,
        status: status
      }
      this.loading = true
      getMarqueeList(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.marqueeList = res.extraInfo.list
        this.loading = false
      })
    },
    handleActive (value) {
      activeMarquee(value.id, value.status !== 'active').then(res => {
        this.$message.success('操作成功')
        this.getMarqueeList()
      })
    },
    handleDelete (item) {
      deleteMarquee(item.id).then(res => {
        this.$message.success('操作成功')
        this.getMarqueeList()
      })
    },
    handleEdit (item) {
      this.currentItem = item
      this.editVisible = true
    },
    versionPreview () {
      versionPreview().then(res => {
        this.versionInfo = res.extraInfo
        this.addVersionVisible = true
      })
    }
  }
}
</script>

<style scoped>
.content-text{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 160px; display: inline-block; vertical-align: middle;
}
.more{
 color: #0099a0;display: inline-block;vertical-align: middle;
}
</style>
