<template>
    <view class="card-yd-disease" @tap.stop="onJump(yidian)">
        <view class="yd-title">{{ yidian.title }}</view>
        <view v-if="yidian.abstract" class="c-gap-top-small c-color-normal">
            <view v-if="yidian.abstract.alias">别名：{{ yidian.abstract.alias }}</view>
            <view v-if="yidian.abstract.department">科室：{{ yidian.abstract.department }}</view>
        </view>
        <view v-if="yidian.introduce && yidian.introduce.length" class="c-gap-top-small">
            <view
                v-for="(item, index) in yidian.introduce"
                :key="index"
                class="c-color-normal c-font-normal"
                :class="{
                    'c-line-clamp4': yidian.introduce.length === 1,
                    'yd-item-li': yidian.introduce.length > 1,
                }"
            >
                {{ item }}
            </view>
        </view>
        <view class="yd-divider"/>
        <view v-if="yidian.iconlist" class="yd-icon-list c-gap-inner-bottom-small">
            <view
                v-for="(icon, index) in yidian.iconlist"
                :key="index"
                class="yd-icon-li"
                @tap.stop="onJump(icon)"
            >
                <image
                    class="yd-icon-img"
                    :src="icon.icon"
                    lazy-load
                />
                <view>{{ icon.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 医典搜索卡片
 * @categories 业务组件
 * @tags [component]
 * @author chenshuo04
 */
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        yidian: Object
    },
    methods: {
        onJump(data) {
            this.$emit('cardDisease');
            if (data.unifiUrl) {
                const __params = Object.assign({}, {url: data.unifiUrl}, {
                    log: {
                        type: 'clk',
                        value: 'yidianka'
                    }
                });
                navigate(__params);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.card-yd-disease {
    padding: 10px 13px 0 13px;
    .yd-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: bold;
        color: #333;
    }
    .yd-item-li {
        &::before {
            position: relative;
            top: -3px;
            display: inline-block;
            content: ' ';
            width: 5px;
            height: 5px;
            background: #555;
            border-radius: 10px;
            margin-right: 5px;
        }
    }
    .yd-divider {
        height: 1px;
        background: #F4F4F4;
        margin: 15px 0 5px 0;
    }
    .yd-icon-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, 25%);
        justify-items: center;
        align-items: center;
        grid-auto-rows: 80px;
        .yd-icon-li {
            text-align: center;
            color: #333;
        }
        .yd-icon-img {
            width: 30px;
            height: 30px;
        }
    }
}
</style>
