<template>
  <a-spin :spinning="loading">
    <a-card title="发票列表">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
        :scroll="{ x: 1200}"
      >

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

      <EditInvoice
        v-model="editVisible"
        :form-data="currentItem"
        @update="getList"
      ></EditInvoice>

    </a-card>
  </a-spin>
</template>

<script>
import { invoiceListChannel } from '@/api/ticketSetting/invoice'
import EditInvoice from './EditInvoice'

const columns = [
  {
    title: '渠道',
    dataIndex: 'channel_name',
    key: 'channel_name'
  },
  {
    title: '开票方',
    dataIndex: 'invoice_seller',
    key: 'invoice_seller'
  },
  {
    title: '商品编码',
    dataIndex: 'goods_code',
    key: 'goods_code'
  },
  {
    title: '商品项目名称',
    dataIndex: 'goods_code_name',
    key: 'goods_code_name'
  },
  {
    title: '纳税人识别号',
    dataIndex: 'mch_taxpayer_num',
    key: 'mch_taxpayer_num'
  },
  {
    title: '税率',
    dataIndex: 'tax_num',
    key: 'tax_num'
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '接口地址',
    dataIndex: 'url',
    key: 'url'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '100px',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    EditInvoice
  },
  data () {
    return {
      columns,
      loading: false,
      dataList: [],
      pagination: {},
      params: {
        pageNum: 1,
        pageSize: 10
      },
      editVisible: false,
      // 当前对象
      currentItem: null
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      invoiceListChannel({}).then(res => {
        this.dataList = res.extraInfo.list

        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total

        this.pagination = pagination
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.params.pageNum = pagination.current
      this.params.pageSize = pagination.pageSize

      this.getList()
    },
    handleEdit (data) {
      this.editVisible = true
      this.currentItem = data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
