<template>
    <view>
        <view class="storeinfo__bar">
            <view class="storeinfo__bar-box">
                <view 
                    v-for="(item, index) in bottomBar"
                    :key="index"
                    class="storeinfo__bar__item storeinfo__bar__item-act"
                    :style="{
                        width: (1 / bottomBar.length * 100) + '%',
                    }"
                    @tap="onBottomBar(item)"
                >
                    <view :class="['m-icon', item.icon]" style="font-size: .25rem;font-weight: 500"/>
                    <view class="c-font-small storeinfo__bar__item__text" :class="index === 0 ? 'c-font-wb' : ''">{{ item.text }}</view>
                </view>
            </view>
        </view>
        <!-- 客服弹层 -->
        <service-popup
            v-if="servicePopup.length > 0"
            :show="isShow"
            :list="servicePopup"
            :extra="extra"
            @onPopupShow="onPopupShow"
        />
        <view class="storeinfo__bar__blank"/>
    </view>
</template>

<script>
/**
 * @file 更多门店popup
 * @author mayifan02@baidu.com
 * @categories 业务组件
 * @tags [component]
*/

/* global Page swan  getApp */
import ServicePopup from './ServicePopup';
import {send} from '@utils/log';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    // options: {
    //     addGlobalClass: true
    // },
    components: {
        ServicePopup
    },
    props: {
        /**
         * 是否显示
         */
        bottomBar: {
            'type': Array,
            'default': () => {
                return [];
            }
        },

        /**
         * 日志
         */
        extra: {
            'type': Object,
            'default': () => {
                return {};
            }
        },

    },
    data() {
        return {
            servicePopup: [],
            isShow: false
        };
    },
    methods: {
        onBottomBar(item) {
            send({
                type: 'b',
                action: 'bottombar-btn',
                extra: Object.assign({name: item.text}, this.extra)
            });
            if (item.data) {
                this.servicePopup = item.data.list;
                // TODO 在DOM更新完成后再进行展示，否则弹窗不出来
                setTimeout(() => {
                    this.$nextTick(() => {
                        this.onPopupShow(true);
                    });
                }, 100);
            }
        },
        onPopupShow(isShow) {
            send({
                type: 'b',
                action: 'bottombar-popup',
                extra: Object.assign({isShow: isShow}, this.extra)
            });
            this.isShow = isShow;
        }
    }
};
</script>
<style lang="less">
.storeinfo__bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 10;
        background-color: #fff;
        color: #1F1F1F;
        box-shadow: 0 -0.02rem 0.04rem 0 rgba(0,0,0,0.06);
        &-box {
            width: 100%;
            display: flex;
            justify-content: center;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }
        &__item {
            text-align: center;
            padding-top: 0.06rem;
            &:first-child{
                color: #FD503E;
                font-weight: bold;
            }
            &__text {
                margin-top: 0.02rem;
                margin-bottom: -0.01rem;
            }
        }
        &__blank {
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
            height: 0.65rem;
        }
    }

// /* 组件内icon不生效，此处重写样式 */
// [class*=_m-icon] {
//     font-family: "m-icon" !important;
//     font-size: 0.16rem;
//     font-style: normal;
//     -webkit-font-smoothing: antialiased;
//     -moz-osx-font-smoothing: grayscale;
// }
// [class*=_m-icon-vaccinestore]:before {
//     content: "\e65e";
// }
// [class*=_m-icon-kefu]:before {
//     content: "\e665";
// }
</style>
