<template>
    <title-layout :list-item="listItem" padding-top="0">
        <scroll-view
            v-if="listItem.section && listItem.section.length"
            class="bx-scroll"
            scroll-x
            @scroll="scrollHos"
        >
            <view class="bx-scroll-container c-flexbox">
                <b-navigate
                    v-for="(item, index) in listItem.section"
                    :id="'bx-' + index"
                    :key="index"
                    class="bx-item"
                    :class="(index + 1) === listItem.section.length ? '' : 'bx-item-divider'"
                    :style="{'background': item.background ? item.background : '#ffffff'}"
                    :url="item.unifiUrl ? item.unifiUrl : ''"
                >
                    <view class="bx-item-wrap">
                        <view class="bx-image-wrap">
                            <image
                                class="bx-image"
                                :src="item.logo ? item.logo : defaultLogo "
                                mode="aspectFit"
                                lazy-load
                            />
                        </view>
                        <view v-if="item.name" class="bx-title c-line-clamp1 c-font-medium c-gap-top-small">
                            {{ item.name }}
                        </view>
                        <view v-if="item.desc" class="bx-desc c-line-clamp2 c-font-small c-gap-bottom-zero">
                            {{ item.desc }}
                        </view>
                    </view>
                </b-navigate>
            </view>
        </scroll-view>
    </title-layout>
</template>

<script>
/**
* @file 保险-首页-保险公司
* @author xuhailong
*/
import * as Log from '@utils/log';

import TitleLayout from './TitleLayout';
import Navigate from '@components/common/navigate';

export default {
    config: {
        component: true
    },
    props: {
        listItem: {
            'type': Object,
            'default': () => {
            }
        },
        defaultLogo: {
            'type': String,
            'default': ''
        }
    },
    components: {
        'title-layout': TitleLayout,
        'b-navigate': Navigate
    },
    methods: {
        scrollHos(e) {
            // 发送日志
            Log.send({
                type: 'hroll',
                action: 'hos-scroll'
            });
        }
    }
};
</script>
<style lang="less" scoped>
    .bx-scroll {
        white-space: nowrap;
        width: 100%;

        .bx-scroll-container {
            padding: 0.1rem 0.17rem 0.3rem;
        }

        .bx-item {
            display: block;
            width: 1.1867rem;
            min-width: 1.1867rem;
            position: relative;
            background: #FFFFFF;
            box-sizing: border-box;
            border-radius: .05rem;
            box-shadow: 0 0.07rem 0.33rem -0.033rem rgba(0, 0, 0, 0.09);
            overflow: hidden;

            &.bx-item-divider {
                margin-right: 0.15rem;
            }

            .bx-item-wrap {
                width: 100%;
                height: 100%;
                padding: 0.14rem 0.1733rem;
                box-sizing: border-box;

                .bx-image-wrap {
                    width: 100%;
                    height: 0;
                    padding-bottom: 66.7%;
                    position: relative;

                    .bx-image {
                        width: 100%;
                        height: 100%;
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }

                .bx-title {
                    font-family: PingFangSC-Medium;
                    color: #555555;
                    text-align: center;
                }

                .bx-desc {
                    font-family: PingFangSC-Regular;
                    line-height: 20px;
                    height: 40px;
                    color: #999999;
                }

            }
        }
    }
</style>

