<template>
    <view
        :class="{
            box: box,
            shadow: shadow,
        }"
        :style="{
            color: color,
            background: background,
            padding: padding,
            borderRadius: borderRadius,
        }"
        class="tipinfo"
    >
        <view
            class="tipinfo-item"
        >
            <view
                v-if="!alignLeft"
                class="iconw"
                :style="{
                    'font-size': fontSize,
                }"
            >
                <c-icon
                    name="exclamation-circle"
                    :font-size="iconSize"
                    :style="{
                        color: color,
                    }"
                /></view>
            <view 
                class="infow"
                :style="{
                    'font-size': fontSize,
                }"
            >
                <c-icon
                    v-if="alignLeft"
                    name="exclamation-circle"
                    :font-size="iconSize"
                    :style="{
                        color: color,
                    }"
                />
                {{ info }}</view>
        </view>
    </view>
</template>

<script>
/**
* @file infos
* @author zhangeryi
* @categories 业务组件
* @tags [component]
*/

import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * tips 内容
         */
        info: {
            type: String,
            default: ''
        },
        /**
         * 是否内缩
         */
        box: {
            'type': Boolean,
            'default': false
        },
        /**
         * 是否左对齐
         */
        alignLeft: {
            'type': Boolean,
            'default': true
        },
        /**
         * padding
         */
        padding: {
            'type': String,
            'default': ''
        },
        /**
         * 阴影
         */
        shadow: {
            'type': Boolean,
            'default': false
        },
        /**
         * 颜色
         */
        color: {
            'type': String,
            'default': '#555'
        },
        /**
         * 背景色
         */
        background: {
            type: String,
            default: ''
        },
        /**
         * 字号
         */
        fontSize: {
            'type': String,
            'default': '12px'
        },
        /**
         * 字号
         */
        iconSize: {
            'type': String,
            'default': '13px'
        },
        /**
         * 圆角
         */
        borderRadius: {
            'type': String,
            'default': '8px'
        }
    },
    components: {
        CIcon
    }
};
</script>
<style lang="less" scoped>
.tipinfo {
    &.box {
        border-radius: 8px;
        padding: 10px 15px;
    }
    &.shadow {
        box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .06);
    }
    &-item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        .iconw {
            flex: none;
            white-space: nowrap;
            color: #fd503e;
            width: auto;
            padding-right: 5px;
            line-height: 18px;
            height: 19px;
        }
        .infow {
            flex: 1;
            font-size: 12px;
            line-height: 20px;
        }
    }
}
</style>


