<template>
    <view class="contact">
        <view
            v-if="phoneNum"
            class="contact__btn"
            :class="phoneNum && !imUrl ? 'contact__btn--single' : ''"
            @tap="makePhoneCall"
        >电话咨询</view>
        <view
            v-if="imUrl"
            class="contact__btn contact__btn--active"
            :class="phoneNum && !imUrl ? 'contact__btn--single' : ''"
            @tap="toContact"
        >在线咨询</view>
    </view>
</template>

<script>
export default {
    config: {
        component: true
    },
    props: {
        phoneNum: {
            type: String,
            default: ''
        },
        imUrl: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        makePhoneCall() {
            this.$api.makePhoneCall({phoneNumber: this.phoneNum});
        },
        toContact() {
            this.$api.navigateTo({url: this.imUrl && this.imUrl.imUrl});
        }
    }
};
</script>

<style lang="less" scoped>
.contact {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.08rem 0.17rem 0.34rem 0.17rem;
    background: #fff;
    box-sizing: border-box;

    &__btn {
        box-sizing: border-box;
        border: 1px solid #00c8c8;
        border-radius: 20px;
        height: 0.4rem;
        line-height: 0.4rem;
        width: 1.83rem;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #00c8c8;
        font-weight: 600;
        text-align: center;
        &--single{
            width:3.93rem;
        }

        &--active {
            color: #fff;
            border-color: #00c8c8;
            background: #00c8c8;
        }
    }
}
</style>
