<template>
    <b-navigate
        class="head-line-wrap"
        :url="moreUrl"
        :extra="{
            mod: 'head-line',
        }"
        :log="log"
    >
        <view
            class="head-line"
            :style="{
                paddingTop: paddingTop,
            }"
            :class="moreUbcClass"
        >
            <view class="head-line-title">
                <view
                    v-if="icon"
                    class="head-line-icon"
                >
                    <c-image
                        has-compress
                        :src="icon"
                        width="24px"
                        height="24px"
                        :is-round="false"
                        :hack-white-stroke="false"
                    />
                </view>
                <view class="head-line-text c-line-clamp1">{{ title }}</view>
            </view>
            <view
                v-if="showArrow"
                class="head-line-more"
                :class="isTopicNew ? 'head-line-more-new-topic' : ''"
            >
                <view>
                    {{ moreText }}
                    <c-image
                        has-compress
                        width="6px"
                        height="11px"
                        src="https://med-fe.cdn.bcebos.com/yd/right.png"
                        :is-round="false"
                        :hack-white-stroke="false"
                    />
                </view>
            </view>
        </view>
    </b-navigate>
</template>

<script>
/**
 * @file 头部标题
 * @author xuyong08
 * @categories 医典
 * @tags [component]
 */
import Navigate from '../../common/navigate';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    components: {
        BNavigate: Navigate,
        CImage
    },
    props: {
        /**
         * 是否为热点专题新样式
         */
        isTopicNew: {
            type: Boolean,
            default: false
        },
        /**
         * 内间距
         */
        paddingTop: {
            type: String,
            default: '20px'
        },
        /**
         * icon
         */
        icon: {
            type: String,
            default: ''
        },
        /**
         * 标题
         */
        title: {
            type: String,
            default: ''
        },
        /**
         * 更多 链接
         */
        moreUrl: {
            type: String,
            default: ''
        },
        /**
         * 更多 文案
         */
        moreText: {
            type: String,
            default: ''
        },
        /**
         * 是否展示箭头
         */
        showArrow: {
            type: Boolean,
            default: true
        },
        log: {
            type: Object,
            default: () => ({})
        },
        moreUbcClass: {
            type: String,
            default: ''
        }
    },
    data() {
        return {

        };
    },
    mounted() {

    },
    methods: {

    }
};
</script>
<style lang="less" scoped>
.head-line-wrap {
    width: 100%;

    .head-line {
        display: flex;
        justify-content: space-between;
        padding: 20px 0 12px;

        &-icon {
            width: 24px;
            height: 24px;
            margin-right: 6px;

            &-right {
                width: 6px;
                height: 11px;
            }
        }

        &-title {
            display: flex;
            align-items: center;
            font-size: 19px;
            color: #333;
            font-weight: bold;
            width: 0;
            flex: 1;
        }

        &-text {
            flex: 1;
        }

        &-more {
            font-size: 12px;
            color: #999;

            &-new-topic {
                margin-right: 13px;
            }

            .more-icon {
                width: 6px;
                height: 11px;
                vertical-align: middle;
            }
        }
    }
}
</style>
