<template>
    <view
        class="header-bar"
        :style="{
            'color': titleStyle.color,
            'background-color': titleStyle.backgroundColor,
            'font-size': titleStyle.fontSize,
            'border-radius': '.21rem .21rem 0 0',
        }"
    >
        <text class="c-font-wb">{{ title }}</text>
        <c-icon
            class="header-bar-close"
            name="close"
            :color="closeIconColor"
            font-size=".22rem"
            @tap="onCloseTap"
        />
    </view>
</template>

<script>
/**
* @file 处方药先方后药弹窗头部bar
* @author tanjia01
* @categories 业务组件
* @tags [先方后药弹窗底bar]
*/

import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        title: {
            type: String,
            default: '',
        },
        titleStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        closeIconColor: {
            type: String,
            default: '',
        }
    },
    components: {
        CIcon
    },
    methods: {
        onCloseTap() {
            this.$emit('close');
        }
    }
};
</script>

<style lang="less" scoped>
.header-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: .52rem;
    line-height: .52rem;
    z-index: 11;
    text-align: center;
    &-close {
        position: absolute;
        right: 16px;
        color: #1f1f1f;
    }
}
</style>
