<template>
    <div class="address">
        <div class="title" v-if="page !== 'submit'">我的地址</div>
        <van-address-list
            v-model="chooseId"
            :class="{ emptyList: empty }"
            :switchable="page === 'submit'"
            :list="showList"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            @select="selectItem"
        />
        <van-empty :image="require('@assets/kong.png')" v-if="empty" description="你还没有收货地址哦~">
            <van-button @click="onAdd" round type="primary" class="bottom-button">新增地址</van-button>
        </van-empty>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            empty: false,
            page: '',
            chooseId: ''
        };
    },
    computed: {
        showList() {
            let list = [...this.list];

            return list.map(item => {
                return {
                    id: item.id,
                    name: item.name,
                    tel: item.phone,
                    address: `${item.provinceName} ${item.cityName} ${item.districtName} ${item.address}`,
                    isDefault: item.def
                };
            });
        }
    },
    mounted() {
        if (this.$route.query.page) {
            this.page = this.$route.query.page;
        }
        if (this.$route.query.chooseId) {
            this.chooseId = this.$route.query.chooseId;
        }
        this.$http
            .post(
                '/userAddress/all',
                {
                    query: {
                        userId: this.$store.state.userInfo.id,
                        del: false
                    },
                    size: 99
                },
                { body: 'json' }
            )
            .then(res => {
                this.empty = res.empty;
                this.list = res.content;
            });
    },
    methods: {
        onAdd() {
            this.$router.push('/' + this.$route.params.companyId + '/mineAddressEdit');
        },
        onEdit(info) {
            this.$router.push('/' + this.$route.params.companyId + '/mineAddressEdit?id=' + info.id);
        },
        selectItem(info, index) {
            this.$router.go(-1);
            this.emitter.emit('updateChoose', this.list[index]);
        }
    }
};
</script>
<style lang="less" scoped>
.address {
    padding-bottom: 100px;
    box-sizing: border-box;
    background-color: @bg3;
}

.title {
    font-size: 20px;
    font-weight: bold;
    color: @text0;
    line-height: 30px;
    padding: 10px 10px;
    background-color: @bg;
}

/deep/.van-address-item {
    background-color: @bg;
    .van-tag--danger {
        background-color: transparent;
        color: @prim;
        border: 1px solid @prim;
    }
}

/deep/.van-address-list__bottom {
    background-color: @bg;
    padding-left: 48px;
    padding-right: 48px;

    .van-button--danger {
        background: linear-gradient(135deg, @prim 0%, @prim 100%);
        border-width: 0;
        color: @bg;
        font-weight: bold;
    }
}

.bottom-button {
    width: 280px;
    height: 38px;
}

/deep/.emptyList {
    .van-address-list__bottom {
        display: none;
    }
}

/deep/.van-address-item .van-radio__icon--checked .van-icon {
    background-color: @prim;
    border-color: @prim;
}
</style>
