<template>
    <view class="hospital-common-card c-font-normal">
        <view class="hospital-common-flex">
            <view v-if="title || count" class="common-title c-title">
                <text v-if="title">{{ title }}</text>
                <text v-if="count">({{ count }}条)</text>
            </view>
            <view
                v-if="hasMore && more && more.text && more.link"
                class="c-color-gray c-font-medium-less"
                @tap.stop="navigateTo(more.link, logtype)"
            >查看更多<c-icon name="youjiantou"/>
            </view>
        </view>
        <slot name="content"></slot>
        <!-- <view
            v-if="hasMore && more && more.text && more.link"
            class="common-more"
            @tap.stop="navigateTo(more.link, logtype)"
        >
            <view class="more-text c-font-normal">{{ more.text }}</view>
            <image
                :src="moreIcon"
                mode="widthFix"
                class="more-icon c-gap-left-xsmall"
            />
        </view> -->
    </view>
</template>

<script>
/**
 * @file 医院主页第二版/医院通用插槽组件
 * @author chenyang28
 * @categories 医院主页
 * @tags [sub-component]
 */
import {navigate} from '@utils/navigate';
import * as Log from '@utils/log';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 卡片标题
         */
        title: {
            type: String,
            default: ''
        },

        /**
         * 数量
         */
        count: {
            type: Number,
            default: 0
        },
        /**
         * 更多展示
         */
        hasMore: {
            type: Boolean,
            default: true
        },
        /**
         * 更多内容
         */
        more: {
            type: Object,
            default: () => {}
        },
        /**
         * 更多内容
         */
        logtype: {
            type: String,
            default: ''
        }
    },
    components: {
        CIcon
    },
    data() {
        return {
            moreIcon: 'https://med-fe.cdn.bcebos.com/hospital/more_arrow.png'
        };
    },
    methods: {
        navigateTo(link, type) {
            if (!link) {
                return;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: type
                }
            });
            navigate({
                url: link,
                urlType: 0,
                log: {
                    type: 'clk',
                    value: type
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.hospital-common-card {
    margin: 8px 10px 0;
    background-color: #fff;
    border-radius: .12rem;
    overflow: hidden;
    padding: 15px 13px;

    .hospital-common-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .common-title {
        font-family: PingFangSC-Medium;
        color: #333;
        height: 18px;
        line-height: 18px;
        font-weight: 700;
    }

    .common-more {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        color: #1f1f1f;
        line-height: 14px;

        .more-text {
            height: 14px;
            line-height: 14px;
        }

        .more-icon {
            width: 16px;
            height: 16px;
        }
    }
}
</style>
