<template>
    <view class="kongkim">
        <view
            v-for="(item, index) in data"
            :key="index"
            class="kongkim__item"
            @tap="onKongKimTap(item)"
        >
            <c-image
                has-compress
                :src="item.imgUrl"
                class="kongkim__item__img"
                width="0.3rem"
                height="0.3rem"
                :hack-white-stroke="false"
                :is-round="false"
                :extra="{column: 1}"
            />
            <view class="kongkim__item__title c-color-title c-font-normal c-gap-top-small">{{ item.title }}</view>
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
/**
 * @file 保险商城金刚位
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /* 城市 */
        hmbUrl: {
            type: String,
            default: '/pages/act/hpv-pcr/index?topic=jhb&city=北京京惠保'
        }
    },
    data() {
        return {

        };
    },
    methods: {
        onKongKimTap(item) {
            if (item.title === '惠民保') {
                navigate({
                    url: this.hmbUrl,
                    log: {
                        type: 'clk',
                        value: 'jingang',
                        ext: {
                            pd: 'bx',
                            value_id: item.id,
                            page_type: 'bx-home'
                        }
                    }
                });
            }
            else if (item.unifiUrl) {
                navigate({
                    url: item.unifiUrl,
                    log: {
                        type: 'clk',
                        value: 'jingang',
                        ext: {
                            pd: 'bx',
                            value_id: item.id,
                            page_type: 'bx-home'
                        }
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.kongkim {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &__item {
        text-align: center;
        flex: 0 1 20%;
        margin-bottom: 0.09rem;

        &__img {
            margin: 0 auto;
            width: 30px;
            height: 30px;
            display: block;
        }
    }
}
</style>
