<template>
    <view class="source">
        <view class="source__title c-line-clamp1">
            <view class="source__title__logo">
                <c-image
                    v-if="source.logo"
                    has-compress
                    :src="source.logo"
                    radius="50%"
                    width=".24rem"
                    height=".24rem"
                    lazy-load
                    mod="aspectFill"
                    :extra="{column: 1}"
                />
            </view>
            <view
                :class="{
                    'c-gap-left-small': source.logo,
                    'source__title__text': true
                }"
            >
                {{ source.source }}
            </view>
        </view>
    </view>
</template>
<style lang="less" scoped>
.source {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    font-size: .14rem;
    line-height: 44px;
    background-color: #fff;
    color: #999;
    user-select: none;
    transform: translateZ(0);
    box-sizing: border-box;
    margin: 10px -17px 0;
    padding: 0 17px;

    &__title {
        display: flex;
        align-items: center;
        height: 60px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

        &__logo {
            border-radius: 50%;
            position: relative;
            vertical-align: middle;
            border: 1px solid;
            border-color: rgba(0, 0, 0, 0.1);
            width: 24px;
            height: 24px;
            top: -1px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        &__text {
            vertical-align: middle;
            position: relative;
            top: 0px;
        }
    }
}
</style>

<script>
import CImage from '@components/common/image';
/**
 *  @file index.js
 *  @author yantingxi
 */
export default {
    config: {
        component: true
    },
    components: {
        CImage
    },
    props: {
        source: {
            type: Object,
            default: () => ({})
        }
    }
};
</script>
