<template>
    <view
        v-if="data"
        class="city-insurance img-background"
        :style="{
            'background-image': 'url(' + data.cityInsuranceImage + ')'
        } | imgCompress('background-image')"
        @tap="onTap(data)"
    >
        <view class="city-insurance__title c-color-main">
            <view class="city-insurance__title__main c-font-large c-font-wb">{{ data.title }}</view>
            <view v-if="data.subTitle" class="city-insurance__title__line"/>
            <view class="city-insurance__title__sub c-font-normal">{{ data.subTitle }}</view>
        </view>
        <view v-if="data.notesList && data.notesList.length" class="city-insurance__notes">
            <view
                v-for="(noteItem, index) in data.notesList"
                :key="index"
                class="city-insurance__notes__item"
            >
                <c-icon
                    v-if="noteItem.icon"
                    class="city-insurance__notes__item__icon"
                    :name="noteItem.icon"
                    :font-size="noteItem.iconSize"
                    :color="noteItem.iconColor"
                />
                <view
                    v-if="noteItem.textList && noteItem.textList.length"
                    class="city-insurance__notes__item__text c-font-medium-less"
                >
                    <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="city-insurance__btn c-font-wb">
            {{ data.btn.text }}
        </view>
    </view>
</template>

<script>
/**
 * @file 保险首页普惠保
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {

        };
    },
    methods: {
        onTap(data) {
            if (data.url || data.path) {
                navigate({
                    url: data.url || data.path,
                    log: {
                        type: 'clk',
                        value: 'hmb',
                        ext: {
                            pd: 'bx',
                            page_type: 'bx-home'
                        }
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.city-insurance {
    height: 1.65rem;
    margin: 0 0.13rem 0.12rem 0.13rem;
    padding-left: 0.13rem;
    padding-top: 0.16rem;
    box-sizing: border-box;

    &__title {
        display: flex;
        align-items: center;

        &__line {
            width: 1px;
            height: 15px;
            background-color: #00c8c8;
            opacity: 0.19;
            margin: 0 0.04rem 0 0.03rem;
        }
    }

    &__notes {
        margin: 0.08rem 0 0 0;

        &__item {
            display: flex;
            align-items: center;

            &__text {
                margin-left: 0.06rem;
            }
        }
    }

    &__btn {
        width: 2.19rem;
        height: 0.4rem;
        background-image: linear-gradient(134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
        border-radius: 0.2rem;
        text-align: center;
        line-height: 0.4rem;
        font-size: 0.15rem;
        color: #fff;
        margin-top: 0.15rem;
    }
}

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