<template>
  <div>
    <a-card title="灰名单管理">
      <a-button type="primary" slot="extra" @click="$refs.eidt.show()">新增</a-button>

      <a-form layout="inline" style="padding:0px 0 20px">
        <a-form-item>
          <a-button type="primary" size="small" @click="getList(true)">刷新</a-button>
        </a-form-item>
      </a-form>

      <a-table
        :row-key="record => record.id"
        :columns="columns"
        :dataSource="dataList"
        :pagination="pagination"
        @change="handlePageChange"
        :loading="loading"
      >

        <template
          slot="status"
          slot-scope="text, record"
        >
          <a-badge :status="statusList[record.status].status" /> {{ statusList[record.status].label }}

        </template>

        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            icon="edit"
            @click="handleEdit(record)"
          >
            编辑
          </a-button>

          <a-button
            :icon="record.status==='active'?'close-circle':'check-circle'"
            :loading="record.toggleLoading"
            @click="activeGreyList(record)"
            :type="record.status==='active'?'danger':'primary'"
            size="small">
            {{ record.status==='active'?'关闭':'开启' }}
          </a-button>

          <a-popconfirm
            title="确定要删除吗？"
            @confirm="handleDelete(record)"
          >
            <a-button
              size="small"
              type="danger"
              icon="delete"
              :loading="record.loading"
            >
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>

    <Modal ref="eidt" @update="handleUpdate" :greyInfoList="greyInfoList"></Modal>
  </div>
</template>

<script>
import Modal from './Modal'
import { getIdGreyList, getGreyList, deleteGreyList, activeGreyList } from '@/api/greylist'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 200
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 240,
    scopedSlots: { customRender: 'operation' }
  }
]

const statusList = {
  active: {
    label: '已开启',
    status: 'success'
  },
  inactive: {
    label: '已关闭',
    status: 'error'
  }
}

export default {
  components: {
    Modal
  },
  created () {
    this.getList()
    this.getIdGreyList()
  },
  data () {
    return {
      columns,
      statusList,
      greyInfoList: [],
      identity: '',
      dataList: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    handleUpdate () {
      this.getList()
    },
    handleEdit (record) {
      this.$refs.eidt.show(record)
    },
    handleDelete (record) {
      this.$set(record, 'loading', true)

      deleteGreyList(record.id).then(res => {
        this.$message.success('删除成功')
        this.$set(record, 'loading', false)
        this.getList()
      })
    },
    handlePageChange (page) {
      this.pagination.current = page.current
      this.getList()
    },
    activeGreyList (record) {
      this.$set(record, 'toggleLoading', true)

      activeGreyList(record).then(() => {
        this.$message.success('操作成功')
        this.getList()
      }).finally(() => {
        this.$set(record, 'toggleLoading', false)
      })
    },
    getIdGreyList () {
      getIdGreyList({ pageNum: 0, pageSize: 0, status: ['active', 'inactive'] }).then(res => {
        this.greyInfoList = res.extraInfo.list
      })
    },
    getList (flag) {
      this.loading = true

      if (flag) this.pagination.current = 1

      getGreyList({
        pageNum: this.pagination.current
      }).then(res => {
        this.dataList = res.extraInfo.list
        this.pagination.total = res.extraInfo.total
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
