<template>
    <view class="c-gap-left c-gap-right brand-bar-wrapper wrapper-new" :style="barStyle">
        <c-image
            has-compress
            src="https://med-drug.cdn.bcebos.com/%E7%99%BE%E5%BA%A6%E5%81%A5%E5%BA%B7.png"
            width="0.7rem"
            height="auto"
            mode="widthFix"
            :hack-white-stroke="false"
            :is-round="false"
            :extra="{column: 2}"
        />
        <view
            v-for="(item, i) in data.safeguard"
            v-show="i < 3"
            :key="i"
            class="c-line-clamp1 c-inline-block c-color-gray"
            :class="[i < data.safeguard.length - 1 ? 'brand-bar-info' : '']"
        >
            <c-image
                class="brand-bar-icon"
                has-compress
                :src="item.bgimg || item.bgImg"
                width="0.17rem"
                height="auto"
                mode="widthFix"
                :hack-white-stroke="false"
                :is-round="false"
                :extra="{column: 1}"
            />
            <text class="c-font-normal">{{ item.label }}</text>
        </view>
        <view
            v-if="showArrow"
            class="m-icon m-icon-next-icon c-inline-block right-icon color-gray"
            :style="{'font-size': '.12rem', 'color': '#858585'}"
        />
    </view>
</template>

<script>
import CImage from './image';
/**
 * @file 品牌标识条
 * @author zhangqian51
 * @categories 品牌标识条组件
 * @tags [component]
 */

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
    },
    props: {
        /**
         * 业务数据
         */
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
         * 类型
         */
        barStyle: {
            type: [Object, String],
            default() {
                return {};
            }
        },
        /**
         * 样式
         */
        labelStyle: {
            type: [Object, String],
            default() {
                return {};
            }
        },
        /**
         * 显示箭头
         */
        showArrow: {
            type: Boolean,
            default: false
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper-new {
    margin: .1rem .1rem 0 .1rem;
    background: #fff;
    border-radius: 8px;
    padding: .1rem .15rem;

    &-small {
        margin: .1rem .1rem 0 .1rem;
        background: #fff;
        border-radius: 8px;
        padding: 0 .15rem;
    }
}

.brand-bar {
    &-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 8px !important;
        padding-bottom: 8px !important;

        &-img {
            height: auto;
        }
    }

    &-info {
        // margin-right: .2rem;
    }

    &-icon {
        width: 17px;
        margin-right: 2px;
        position: relative;
        top: 3px;
        display: inline-block;
    }
}
</style>
