<!-- 默认地址组件 -->
<template>
    <div class="main" @click="jumpTo">
        <div class="basic-info" v-if="option.ID||option.AreaCode">
            <div class="name">
                <span class="ellips name-name">{{option.Name}}</span>
                <span class="tel">{{option.Phone}}</span>
            </div>
            <div class="shipping-address ellips2">
                <van-tag
                    round
                    type="primary"
                    v-if="option.IsDefault"
                    style="margin-right: 0.18rem;"
                >默认</van-tag>
                <span class="info">{{option.AreaAddress+' '+option.Addr}}</span>
            </div>
        </div>
        <div class="basic-info" v-else>请选择收货地址</div>
        <van-icon name="arrow" v-if="showArrow" />
    </div>
</template>
<script>
    export default {
        name: "ChooseAddress",
        props: {
            // Name: "用户名称" //必填
            // Phone: "电话"" //必填
            // AreaCode: "140108" //必填
            // Addr: "详细地址" //必填
            // IsDefault: true //是否默认地址 //必填
            // UserID: "61e1b0b1-9244-4316-8740-c58defdd95be"
            // ID: "42d7d85b-3f41-4ef2-bbac-825a28572cd9"
            option: {
                type: Object,
                required: true
            },
            // 需要跳转的url
            url: {
                type: String,
                default: ""
            },
            // 是否显示箭头
            showArrow: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {};
        },
        methods: {
            jumpTo() {
                // 跳转url
                let url = this.url;
                this.$emit("click");
                url ? this.$router.push(url[0] == "/" ? url : { name: url }) : "";
            }
        }
    };
</script>
<style lang='less' scoped>
    .main {
        position: relative;
        padding: 0.37rem 0.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-shadow: 0rem 0.04rem 0.05rem 0rem rgba(0, 0, 0, 0.03);
        .basic-info {
            flex: 1;
            margin-right: 0.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 80%;
            font-size: 0.4rem;
            .name {
                display: flex;
                align-items: center;
                font-size: 0.32rem;
                line-height: 0.48rem;
                .name-name {
                    font-weight: 600;
                    display: inline-block;
                    max-width: 3rem;
                }
                .tel {
                    font-weight: 600;
                    margin-left: 0.5rem;
                }
            }
            .shipping-address {
                text-align: left;

                /deep/ .van-tag {
                    font-size: 0.22rem;
                    padding: 0.05rem 0.15rem;
                    letter-spacing: 0.05rem;
                }
                .info {
                    line-height: 1.5;
                    font-size: 0.28rem;
                    color: #666666;
                }
            }
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.06rem;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAGCAMAAAAYPCu5AAAAb1BMVEX///8zkv//MzMtj///MDD/Li4pjf/5/P9Gnf//9/f/OTnf7v+93P+jzv+OxP94t/9krf86lv//+/v/5+f/3Nz/vLz/k5P/e3v/XV3/Q0P/KSnw9//n8v/J4v9Upf//y8v/qan/amr/TU3M5f//nZ0TtENaAAAAkklEQVQoz3WRSRaDIBAFxQYUHJE5zib3P2NWWeVT+3r1un/1YxtayQAk27GrMOp6al7/I15PcFhp+pkIZsy0NxXGJy1gJsezkNknI1GG2Nyv2Flc1OgaLurbK+x0Y0sMIOUxbIWMDZnDr/H0sdhZh4MRylB5HHslATMiB7dgp58ZPsdM78I4yt+aczSOjqcqrPMFCIIING/oqicAAAAASUVORK5CYII=");
            background-size: 20%;
        }
    }
</style>
