/*
    地址item
*/
<template>
    <div class="address-item">
        <div class="info">
            <span class="name">{{info.name}}</span>
            <span class="phone">{{info.mobile}}</span>
            <span class="icon" v-if="info.isDefault">默认</span>
        </div>
        <div class="text">{{address}} {{info.detail}}</div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {}
        },
        computed: {
            address(){
                let str = '';
                if(this.info.province){
                    str += this.info.province + '-';
                }
                if(this.info.city){
                    str += this.info.city + '-';
                }
                if(this.info.area){
                    str += this.info.area;
                }
                return str;
            }
        },
    }
</script>

<style lang="less" scoped>
    .address-item{
        padding: 5px 0;
        height: 100%;

        .info{
            line-height: 25px;

            .name{
                vertical-align: middle;
                margin-right: 10px;
                font-size: 13px;
                color: #333333;
            }
            .phone{
                vertical-align: middle;
                margin-right: 5px;
                font-size: 13px;
                color: #333333;
            }
            .icon{
                vertical-align: middle;
                padding: 2px 3px;
                font-size: 10px;
                color: #F14936;
                border: 1px solid #F14936;
                border-radius: 4px;
            }
        }
        .text{
            line-height: 25px;
            font-size: 11px;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
</style>