<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-button type="primary" class="mlAuto" @click="$router.push('/setting/address-lib-add')">新建地址</el-button>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <el-table-column prop="contact" label="联系人"> </el-table-column>
      <el-table-column prop="phone" label="联系方式"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="地址类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.defaultFlag" class="mr5">默认</el-tag>
          {{ scope.row.type == 1 ? '退款地址' : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push(`/setting/address-lib-edit?id=${scope.row.addressId}`)">编辑</el-button>
          <dm-delete @confirm="del(scope.row)" tips="确认删除？">
            <el-button type="text">删除</el-button>
          </dm-delete>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { page } from '@/mixins/table.js';
import fetch from '@/api/gift.js';
const { getAddressList, delAddress } = fetch;
export default {
  name: 'AddressLibList',
  mixins: [ page ],
  data() {
    return {
      loading: false,
      listParams: {
        currentPage: 1,
        pageSize: 20,
      },
      total: 0,
      tableList: [],
      dialogVisible: false,
      addressId: '',
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: '通用设置' }, { breadName: '地址库管理' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    del({ addressId }) {
      this.loading = true;
      delAddress({ addressId: addressId })
        .then(res => {
          this.loading = false;
          this.$tips({ type: 'success', message: '删除成功' });
          this.getTableList();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      getAddressList().then(res => {
        this.loading = false;
        this.tableList = res.result || []; // 无分页
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>
