<template>
    <view class="top-tips-bar c-padding-h c-font-xmedium c-color-title" :style="{background}">
        <view class="c-row inner">
            <view class="c-span9">{{ title }}</view>
            <view class="c-span3 button-wrap">
                <c-button
                    v-if="button.text"
                    type="default"
                    primary-color="#e0e0e0"
                    border-radius="28px"
                    :height="28"
                    :font-size="13"
                    auto
                    @tap="onTap"
                >
                    <text class="c-color-title c-gap-inner-left-mini c-gap-inner-right-mini">{{ button.text }}</text>
                </c-button>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 预下单-im-弹窗顶部提示条
* @author dengqiuju
* @categories 业务组件
* @tags [预下单-im弹窗]
*/

import {navigate} from '@utils/navigate';
import CButton from '@baidu/med-ui/components/Button/Button';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        background: {
            type: String,
            default: '#fff3eb'
        },
        title: {
            type: String,
            default: ''
        },
        button: {
            type: Object,
            default() {
                return {
                    text: '',
                    url: '',
                    log: null
                };
            }
        }
    },
    components: {
        CButton
    },
    methods: {
        onTap() {
            if (this.button.url) {
                navigate({
                    url: this.button.url,
                    log: this.button.log
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.top-tips-bar {
    padding-top: .1rem;
    padding-bottom: .09rem;
    .inner {
        align-items: center;
    }
    .button-wrap {
        text-align: right;
    }
}
</style>
