<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"
        icon="plus"
        @click="versionPreview"
      >
        创建版本
      </a-button>
      <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-tag :color="record.type==='WX'?'green':'blue'">
              {{ record.type==='WX'?'微信':'终端' }}
            </a-tag>
          </template>
          <template
            slot="size"
            slot-scope="text, record"
          >
            {{ Math.round(record.size / 1024) }} KB
          </template>
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="handleEdit(record)"
            >
              编辑
            </a-button>
            <a-button
              size="small"
              :type="record.status==='active'?'danger':'primary'"
              @click="handleActive(record)"
            >
              {{ record.status==='active'?'禁用':'激活' }}
            </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"
      :adv-list="advList"
      @update="getList"
    ></AddModal>
    <EditModal
      v-model="editVisible"
      :adv-list="advList"
      :adv-id="advId"
      @update="getList"
    ></EditModal>
    <AddVersion
      v-model="addVersionVisible"
      :version-info="versionInfo"
    ></AddVersion>
  </div>
</template>

<script>
import { getList, getAdvPosition, activeAdvPosition, deleteAdvPosition, versionPreview } from '@/api/adv'
import AddModal from './advPosList/AddModal'
import EditModal from './advPosList/EditModal'
import AddVersion from './advPosList/AddVersion'
const columns = [
  {
    width: 120,
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    width: 120,
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    width: 120,
    title: '类型',
    dataIndex: 'schedule_type',
    key: 'schedule_type'
  },
  {
    width: 160,
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    width: 200,
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    AddModal,
    EditModal,
    AddVersion
  },
  created () {
    this.getAdvList()
    this.getList()
  },
  data () {
    return {
      advList: [],
      columns,
      list: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      addVisible: false,
      editVisible: false,
      versionInfo: {},
      addVersionVisible: false,
      advId: 0
    }
  },
  methods: {
    getAdvList () {
      const params = {
        pageNum: 0,
        pageSize: 0,
        status: ['active']
      }
      getList(params).then(res => {
        this.advList = res.extraInfo.list
      })
    },
    changePage (page) {
      this.pagination = { ...page }
      this.getList()
    },
    getList () {
      const params = {
        pageNum: 0,
        pageSize: 0,
        status: ['active', 'inactive']
      }

      this.loading = true

      getAdvPosition(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.list = res.extraInfo.list
      }).finally(() => {
        this.loading = false
      })

      // 更新全局广告位列表
      this.$store.dispatch('getAdvPosition')
    },
    handleActive (value) {
      activeAdvPosition(value.id, value.status !== 'active').then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    handleDelete (item) {
      deleteAdvPosition(item.id).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    handleEdit (item) {
      this.advId = item.id
      this.editVisible = true
    },
    versionPreview () {
      versionPreview().then(res => {
        this.versionInfo = res.extraInfo
        this.addVersionVisible = true
      })
    }
  }
}
</script>

<style scoped>

</style>
