<template>
  <div>
    <a-form layout="inline" style="padding:0px 0 20px">
      <a-form-item>
        <a-input allowClear v-model="identity" placeholder="输入身份证号"></a-input>
      </a-form-item>
      <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="status[record.status].status" /> {{ status[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="toggleId(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>

    <Edit ref="edit" name="identity"></Edit>
  </div>
</template>

<script>
import { getIdList, deleteId, toggleId } from '@/api/blacklist'
import Edit from './Edit'

const columns = [
  {
    title: '身份证',
    dataIndex: 'identity',
    key: 'identity',
    width: 200
  },
  {
    title: '备注',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 240,
    scopedSlots: { customRender: 'operation' }
  }
]

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

export default {
  components: {
    Edit
  },
  data () {
    return {
      status,
      columns,
      identity: '',
      dataList: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (flag) {
      this.loading = true

      if (flag) this.pagination.current = 1

      getIdList({
        pageNum: this.pagination.current,
        identity: this.identity
      }).then(res => {
        this.dataList = res.extraInfo.list
        this.pagination.total = res.extraInfo.total
      }).finally(() => {
        this.loading = false
      })
    },
    handleEdit (record) {
      this.$emit('edit', record)
    },
    toggleId (record) {
      this.$set(record, 'toggleLoading', true)

      toggleId(record).then(() => {
        this.$message.success('操作成功')
        this.getList()
      }).finally(() => {
        this.$set(record, 'toggleLoading', false)
      })
    },
    handlePageChange (page) {
      this.pagination.current = page.current
      this.getList()
    },
    handleDelete (record) {
      this.$set(record, 'loading', true)

      deleteId(record.id).then(res => {
        this.$message.success('删除成功')
        this.$set(record, 'loading', false)
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
