<template>
    <div class="address-list-page">
      <Card>
        <div class="add-con" style="margin-bottom: 20px;text-align:right">
          <Button type="primary" size="large" @click="handleAdd">+新增地址</Button>
        </div>
        <tables
          ref="tables"
          v-model="tableData"
          :columns="columns"
          :loading="loading"
        />
      </Card>
    </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  name: 'address-list',
  components: {
    Tables
  },
  data () {
    return {
      tableData: [],
      columns: [
        { title: '编号', type: 'index', align: 'center', minWidth: 100 },
        { title: '名称', key: 'addressName', align: 'left', minWidth: 150 },
        { title: '联系人', key: 'contactName', align: 'center', minWidth: 150 },
        { title: '手机号', key: 'contactPhone', align: 'center', minWidth: 150 },
        { title: '邮寄地址', key: 'mailingAddress', align: 'left', minWidth: 150 },
        { title: '默认',
          key: 'isDefault',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            return h('div', params.row.isDefault ? '是' : '否')
          }
        },
        { title: '操作',
          key: 'index',
          align: 'center',
          minWidth: 100,
          // fixed: 'right',
          render: (h, params) => {
            let deleteBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                }
              },
              '删 除'
            )
            return h('div', [deleteBtn])
          }
        }
      ],
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getAddressList',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },
    handleAdd () {
      if (this.tableData.length == 5) {
        this.$Message.warning('最多只能添加五条哦')
        return
      }
      this.$router.push({ name: 'add_address' })
    },
    handleDelete (row) {
      return () => {
        let { addressId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除当前选择的数据吗？`,
          onOk: () => {
            this.api({
              apiName: 'deleteAddress',
              postdata: addressId,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style scoped>

</style>
