<template>
    <view class="wrapper-new-small">
        <c-navigate
            v-for="(service, i) in data"
            :key="i"
            :url="service.url"
            :url-type="service.urlType"
        >
            <view class="c-row service-recomend">
                <view
                    class="c-span1 service-recomend__icon"
                    :style="{
                        filter: service.iconFilter || 'drop-shadow(rgba(61,219,253,.22) 0 8px 10px)',
                    }"
                >
                    <image
                        class="service-recomend__icon__img"
                        :src="service.icon"
                        mode="widthFix"
                    />
                </view>
                <view class="service-recomend__info c-span10">
                    <view class="service-recomend__info__title c-color-333">
                        {{ service.title }}
                    </view>
                    <view class="service-recomend__info__slogan c-color">
                        {{ service.slogan }}
                    </view>
                </view>
                <view
                    v-if="service.btn"
                    class="c-span1 service-recomend__btn"
                >
                    <c-button
                        type="primary"
                        :height="28"
                        :font-size="14"
                        :primary-color="service.btn.color || '#00C8C8'"
                        border-radius="28px"
                        auto
                    >
                        {{ service.btn.text }}
                    </c-button>
                </view>
            </view>
        </c-navigate>
    </view>
</template>

<script>
/**
 * @file serviceRecomend 服务推荐
 * @author zhangeryi
 * @categories 展示推荐
 * @tags [展示, 推荐]
 */
import CNavigate from '../common/navigate';
import CButton from '@baidu/med-ui/components/Button/Button';
export default {
    config: {
        component: true
    },
    components: {
        CButton,
        CNavigate
    },
    props: {
        /* 业务数据 */
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.wrapper {
    &-small {
        padding-left: .15rem;
        padding-right: .15rem;
    }
}
.wrapper-new {
    margin: .1rem .1rem 0 .1rem;
    background: #fff;
    border-radius: 8px;
    padding: .1rem .15rem;
    &-small {
        margin: .1rem .1rem 0 .1rem;
        background: #fff;
        border-radius: 8px;
        padding: 0 .13rem;
    }
}
.service-recomend {
    background: #fff;
    align-items: center;
    justify-content: flex-start;
    padding: 11px 0;
    &__icon {
        flex: none;
        width: auto;
        &__img {
            width: 30px;
            height: 30px;
        }
    }
    &__info {
        &__title {
            font-size: 18px;
            line-height: 1;
            font-weight: bold;
        }
        &__slogan {
            font-size: 14px;
            line-height: 1;
            padding-top: 8px;
        }
    }
    &__btn {
        flex: none;
        width: auto;
        white-space: nowrap;
    }
}
</style>
