<template>
    <view
        v-if="data"
        class="no-online img-background-city"
        :style="{backgroundImage: 'url(' + data.headerImg + ')'}"
    >
        <view
            class="no-online__title"
        >
            <text class="no-online__title__main c-font-wb">{{ data.title }}</text>
            <text class="no-online__title__sub c-font-wb">{{ data.subTitle }}</text>
        </view>
        <view
            v-if="data.notesList && data.notesList.length"
            class="no-online__notes"
        >
            <view
                v-for="(noteItem, index) in data.notesList"
                :key="index"
                class="no-online__notes__item"
            >
                <c-icon
                    v-if="noteItem.icon"
                    :name="noteItem.icon"
                    :font-size="noteItem.iconSize"
                    :color="noteItem.iconColor"
                />
                <view
                    v-if="noteItem.textList && noteItem.textList.length"
                    class="no-online__notes__item__text c-font-normal"
                >
                    <text
                        v-for="(item, index) in noteItem.textList"
                        :key="index"
                        :style="{color: item.color}"
                    >{{ item.text }}</text>
                </view>
            </view>
        </view>
        <view
            v-if="data.btn"
            class="no-online__btn c-font-medium c-gap-top-xmiddle"
            @tap="onTap(data)"
        >
            <view>{{ data.btn.text }}</view>
            <image class="no-online__btn-right" src="https://med-fe.cdn.bcebos.com/bx/icon/phb-btn-icon.png"/>
        </view>
        <view
            class="no-online__tips"
        >
            {{ data.tips.text }}
        </view>
    </view>
</template>

<script>
/**
 * @file 普惠保未上线
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        topic: {
            type: String,
            default: ''
        },
        city: {
            type: String,
            default: '北京'
        },
        pageTopic: {
            type: String,
            default: '北京'
        },
    },
    data() {
        return {
            
        };
    },
    methods: {
        onTap(data) {
            this.$emit('onCustomTap', data);
            ubcSend({
                type: 'clk',
                value: 'hmb-reserve',
                ext: {
                    pd: 'bx',
                    page_type: 'hmb-home'
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.no-online {
    padding: 0.13rem 0.13rem 0.1rem 0.13rem;
    
    &__title {
        margin: 0 0 0.08rem 0.07rem;
        height: 0.31rem;
        &__main {
            font-size: 0.22rem;
            background: linear-gradient(to right, #1FBBFD, #0B92F7);
            background-clip: text;
            color: transparent;
            line-height: 0.31rem;
        }
        &__sub {
            color: #0E99F8;
            font-size: 0.16rem;
            line-height: 0.31rem;
            opacity: 0.7;
        }
    }
    &__notes {
        margin-left: 0.07rem;
        &__item {
            display: flex;
            align-items: center;
            margin-bottom: 0.03rem;
            &__text {
                margin-left: 0.05rem;
            }
        }
    }
    &__btn {
        color: #fff;
        border-radius: 40px;
        padding: 0.1rem 0.11rem;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-image: linear-gradient(180deg, #8AA4FD 0%, #5892FF 100%);
        box-shadow: 0 0.03rem 0.04rem 0 rgba(36,110,246,0.40);
        text-shadow: 0 1px 2px #3A78F1;
        &-right {
            position: absolute;
            top: 50%;
            right: 0.15rem;
            width: 28px;
            height: 28px;
            line-height: 28px;
            border-radius: 20px;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.14);
            text-align: center;
            font-weight: bold;
        }
    }
    &__tips {
        color: #5A5A5A;
        font-size: 0.12rem;
        line-height: 0.12rem;
        text-align: center;
        opacity: 0.8;
        margin-top: 0.1rem;
    }
}

.img-background-city {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
</style>
