<template>
  <div>
    <a-card title="版本列表">
      <a-table
        :columns="columns"
        :data-source="versionList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="changePage"
      >
        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            @click="handleDetail(record)"
          >
            详情
          </a-button>
          <a-popconfirm
            title="确认删除？"
            @confirm="handleActive(record)"
            ok-text="是"
            cancel-text="否"
          >
            <a-button
              size="small"
              type="danger"
            >
              删除
            </a-button>
          </a-popconfirm>
          <a-button
            size="small"
            type="primary"
            @click="handlePublish(record)"
          >
            发布
          </a-button>
        </template>
      </a-table>
    </a-card>
    <VersionDetail
      v-model="detailVisible"
      :version-id="versionId"
    />
    <PublishDialog
      v-model="publishVisible"
      :version-info="versionInfo"
      :term-list="termList"
    />
  </div>
</template>

<script>
import { getVersionList, activeVersion } from '@/api/marquee'
import { getTermManager } from '@/api/saleChannel/term'
import VersionDetail from './marquee/VersionDetail'
import PublishDialog from './marquee/PublishDialog'
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    VersionDetail,
    PublishDialog
  },
  created () {
    this.getVersionList()
    this.getTermList()
  },
  data () {
    return {
      columns,
      versionList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      detailVisible: false,
      publishVisible: false,
      versionId: 0,
      versionInfo: {},
      termList: []
    }
  },
  methods: {
    getTermList () {
      getTermManager().then(res => {
        this.termList = res.extraInfo.list.filter(term => term.active)
      })
    },
    changePage (page) {
      this.pagination = { ...page }
      this.getVersionList()
    },
    getVersionList () {
      const params = {
        pageNum: this.pagination.current,
        status: 'active'
      }
      getVersionList(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.versionList = res.extraInfo.list
      })
    },
    handleActive (value) {
      activeVersion(value.id, false).then(res => {
        this.$message.success('操作成功')
        this.getVersionList()
      })
    },
    handleDetail (item) {
      this.versionId = item.id
      this.detailVisible = true
    },
    handlePublish (item) {
      this.versionInfo = item
      this.publishVisible = true
    }
  }
}
</script>

<style scoped>

</style>
