<template>
    <view
        v-if="slogan"
        class="logo flex-item-center"
        :class="[
            isTomas || screenWidth <= 360 ? 'logo-tomas' : '',
        ]"
    >
        <c-image
            has-compress
            :src="slogan.logoUrl"
            width="16.9vw"
            height="auto"
            mode="widthFix"
            :hack-white-stroke="false"
            :is-round="false"
            :extra="{column: 2}"
        />
        <!-- eslint-disable max-len -->
        <view
            v-if="slogan.tags && slogan.tags.length"
            :class="[
                isTomas || (fontSmall && screenWidth <= 360) ? 'c-font-tiny' : fontSmall ? 'c-font-small' : 'c-font-normal',
            ]"
            class="flex-item-center logo-right"
        >
            <view
                v-for="(item, index) in slogan.tags"
                :key="index"
                class="flex-item-center logo-right-line"
                :class="[
                    isTomas || screenWidth <= 360 ? 'c-gap-tomas-tiny' : 'c-gap-left-xmiddle',
                ]"
            >
                <c-image
                    has-compress
                    :src="item.icon"
                    class="logo-right-icon img-auto c-line-clamp1"
                    width="0.14rem"
                    height="auto"
                    mode="widthFix"
                    :hack-white-stroke="false"
                    :is-round="false"
                    :extra="{column: 1}"
                />
                {{ item.text }}
            </view>
            <c-icon
                v-if="isArrow"
                name="right"
                font-size="14px"
                class="logo-right-arrow c-gap-left"
                style="color: #858585;"
            />
        </view>
        <!-- eslint-enable max-len -->
    </view>
</template>

<script>
/**
* @file 保险sloogan位
* @author yinlejia
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CImage
    },
    props: {
        /**
         * tp数据
         */
        slogan: {
            type: Object,
            default: () => {}
        },
        /**
         * fontSmall
         */
        fontSmall: {
            type: Boolean,
            dafault: true
        },
        /**
         * 是否显示箭头
         */
        isArrow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const systemInfoSync = getSystemInfo();
        const isTomas = systemInfoSync.host === 'tomas';
        const screenWidth = systemInfoSync.screenWidth;
        return {
            isTomas,
            screenWidth
        };
    }
};
</script>

<style lang="less" scoped>
.logo {
    width: 100%;
    height: 44px;
    background: url('https://appcms.cdn.bcebos.com/appcms/e125813656e2.png') no-repeat center;
    background-size: cover;
    padding: 0 13px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;

    .logo-left {
        width: 16.9vw;
        // margin-right: 35px;
        // height: auto;
        // display: block;
    }

    .logo-right {
        min-width: 0;
        flex: 1;
        justify-content: flex-end;

        .logo-right-line {
            color: #858585;
        }

        .logo-right-icon {
            width: 14px;
            height: 14px;
            margin-right: 5px;
        }
    }

    .c-gap-tomas-tiny {
        margin-left: 8px;
    }
}

.logo-tomas {
    padding: 0 10px;
}

.flex-item-center {
    display: flex;
    align-items: center;
}

.img-auto {
    height: auto;
    display: block;
}
@media only screen and (max-width: 395px) {
    .logo-right-line {
        margin-left: 0.05rem !important;
    }

    .logo-right-arrow {
        margin-left: 0.05rem !important;
    }
}
</style>

