<template>
    <view>
        <view
            class="bar"
            :style="{
                background: backgroundColor,
            }"
        >
            <view
                v-for="(item, index) in data"
                :key="index"
                class="bar__item"
                :class="{act: selectIndex === index}"
                @tap="onItemTab(item, index)"
            >
                <view
                    v-if="item.toolTip"
                    class="bar__item__tooltip"
                    :style="{backgroundImage: 'url(' + item.toolTip + ')'}"
                />
                <view
                    class="bar__item__bg img-bg"
                    :style="{
                        'background-image': 'url(' + item.background + ')',
                    } | imgCompress('background-image', {column: 2})"
                />
            </view>
        </view>
        <view
            v-if="!disableBlank"
            style="height: 98px;"
            class="swan-security-padding-bottom"
        />
    </view>
</template>

<script>
/* global getApp, swan, Page, getCurrentPages, _pages */
import {navigate} from '@utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

/**
 * @file 主会场底部导航
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        const sys = getSystemInfo();
        const screenHeight = sys.screenHeight;
        return {
            screenHeight,
            showShareImg: false,
            showToTop: false,
            num: 0
        };
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /**
         * 选中索引
         */
        selectIndex: {
            type: Number,
            default: 0
        },
        /**
         * 背景色
         */
        backgroundColor: {
            type: String,
            default: ''
        },
        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: '618_prima'
        },
        /** 取消占位 */
        disableBlank: {
            type: Boolean,
            default: false
        },
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onItemTab(item, index) {
            if (this.selectIndex !== index) {
                const isTab = [
                    '/pages/brand/home/index',
                    '/pages/brand/person/index',
                    '/pages/gy/medstorehome/index'
                ].some(url => item.unifiUrl.indexOf(url) > -1);
                navigate({
                    url: item.unifiUrl,
                    urlType: isTab ? 7 : 0,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: `${this.logPrefix}_${item.id}`,
                        ext: {
                            pd: 'act'
                        }
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.img-bg {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.bar {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 10px 0;
    position: fixed;
    z-index: 110;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 13.68vw;
        height: 13.68vw;
        border-radius: 50%;
        font-size: 14px;
        line-height: 16px;
        font-weight: bold;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 0.11rem;

        &__bg {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        &__tooltip {
            width: 11.35vw;
            height: 6.13vw;
            position: absolute;
            left: 50%;
            top: -2.07vw;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            z-index: 202;
        }

        &__text-bg {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 18px;
            background-size: 100% 100%;
        }

        &__text {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: -2px;
            left: 0;
            font-size: 12px;
            font-weight: bold;
            color: #ec201c;
            transform: scale(0.83);
            transform-origin: center 0;
            white-space: nowrap;
        }
    }
}

.act {
    width: 16.9vw;
    height: 16.9vw;
}
</style>
