<template>
    <view>
        <b-navigate
            :url="strongData.url"
            :extra="{
                mod: mod,
            }"
            :log="{type: 'clk', value: dotProps.dotValue, ext: {value_id: dotProps.dotExt}}"
        >
            <view class="strong-card-list">
                <view class="strong-card-title">
                    {{ strongData.name }}
                    <view class="strong-card-btn">
                        了解更多
                    </view>
                </view>
                <view class="strong-card-diseas">
                    <view
                        v-for="(item,index) in strongData.abstract"
                        :key="'strongItem' + index"
                        class="strong-card-disea"
                    >
                        <view class="strong-card-icons">
                            <view class="strong-card-icon"/>
                            <view class="strong-card-icon"/>
                        </view>
                        <text class="c-line-clamp1">{{ item }}</text>
                    </view>
                </view>
            </view>
        </b-navigate>
    </view>
</template>

<script>
    /**
     * @author yumingzhi
     * @file 模板强卡
     */
import Navigate from '../../../common/navigate';

export default {
    config: {
        component: true
    },
    components: {
        'b-navigate': Navigate
    },
    props: {
        strongData: {
            type: Object,
            default: () => ({})
        },
        mod: {
            type: String,
            default: 'theme-strong-card'
        },
        dotProps: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        cardDetail() {
            this.$emit('cardDetail');
        }
    }
};
</script>
<style lang="less" scoped>
    .strong-card-list{
        padding-bottom: 24px;
        border-radius: 10px;
        box-shadow: 0 3px 16px 0 rgba(0,0,0,0.08);
        .strong-card-title{
            height: 56px;
            background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
            border-radius: 10px 10px 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            font-weight: 500;
            color: #fff;
            font-size: 20px;
            .strong-card-btn{
                width: 72px;
                height: 28px;
                text-align: center;
                line-height: 28px;
                background: #fff;
                border-radius: 14px;
                color: #00C8C8;
                font-size: 12px;
                font-weight: 400;
            }
        }
        .strong-card-diseas{
            color: #333333;
            font-size: 14px;
            .strong-card-disea{
                padding: 0 15px;
                margin-top: 14px;
                display: flex;
                align-items: flex-start;
                .strong-card-icons{
                    display: flex;
                    align-items: center;
                    margin-top: 2px;
                    margin-right: 8px;
                    .strong-card-icon{
                        width: 10px;
                        height: 10px;
                        opacity: 0.18;
                        background: #00C8C8;
                        border-radius: 50%;
                        &:nth-last-child(1){
                            opacity: 0.36;
                            margin-left: -5px;
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
    }
</style>
