<template>
    <div class="container">
        <div class="top">
            <div class="text1">已保存3条了条地址，还能保存7条地址</div>
            <div class="text2" @click="add"><span class="el-icon-plus"></span>新增地址</div>
        </div>
        <div class="border"></div>
        <template>
            <el-table
                class="customer-table"
                :header-cell-style="{ background: '#1c1e26' }"
                :data="tableData"
                :border="false"
                :highlight-current-row="false"
                style="width: 100%; background: #1c1e26"
            >
                <el-table-column prop="name" label="收货人" width="200"> </el-table-column>
                <el-table-column prop="phone" label="联系电话" width="200"> </el-table-column>
                <el-table-column prop="region" label="所在地区" width="220"> </el-table-column>
                <el-table-column prop="address" label="详情地址" width="220"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button style="color: #fdfb60" @click="handleClick(scope.row)" type="text" size="small"
                            >修改</el-button
                        >
                        <el-button style="color: red" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <address-info :show="show" @close="show = false" ref="address"></address-info>
        <div class="pagination-wrapper">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalElements"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddressInfo from '../../components/AddressInfo.vue';
import { mapState } from 'vuex';
import pageableTable from '../../mixins/pageableTable';
export default {
    components: { AddressInfo },
    data() {
        return {
            show: false,
            tableData: [
                {
                    id: 1104,
                    name: '王小虎',
                    phone: '1774639714',
                    region: '江苏省南京市建邺区',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ]
        };
    },
    mixins: [pageableTable],

    computed: {
        ...mapState(['userInfo'])
    },

    methods: {
        handleClick(row) {
            this.show = true;
            this.$refs.address.init(row);
        },
        add() {
            this.show = true;
            this.$forceUpdate();
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .el-table__header {
    background: #1c1e26 !important;
}
/deep/ .el-table__row {
    background: #1c1e26 !important;
    .cell {
        color: #ffffff;
    }
}
/deep/ .el-table__empty-text {
    padding-top: 150px;
}
.pagination-wrapper {
    .pagination();
}
.container {
    padding: 45px 16px 0;

    .top {
        .flex();
        justify-content: space-between;
        .text1 {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 25px;
        }
        .text2 {
            width: 106px;
            height: 42px;
            border-radius: 8px;
            border: 1px solid #939599;
            line-height: 42px;
            text-align: center;
            font-size: 14px;
            color: #939599;
            cursor: pointer;
        }
        span {
            // width: 26px !important;
            // height: 26px !important;
            // font-size: 16px;
            color: #939599;
        }
    }
    .border {
        height: 1px;
        background: #494a4d;
        border-radius: 1px;
        margin: 24px 0 34px;
    }
}
</style>
<style lang="less">
.customer-table th {
    border: none !important;
}
.customer-table td,
.customer-table th.is-leaf {
    border: none;
}
//表格最外边框
.el-table--border,
.el-table--group {
    border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf {
    border: 1px solid #ebeef5;
    border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
    border-right: 1px solid #ebeef5;
}
// 表格最外层边框-底部边框
.el-table--border::after,
.el-table--group::after {
    width: 0;
}
.customer-table::before {
    width: 0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
    width: 0;
}
//表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
    border: 1px solid #ebeef5;
    border-left: none;
}
</style>
