<template>
    <view class="service-button">
        <view
            :class="{
                'service-button--row--transparent': bottombtns && bottombtns.btnStyle === '1'
            }"
            data-show="subviews-service-button"
            class="service-button--row SHOW_LOG_MODULE"
            :style="{Zindex: contentType === 'video' ? 999 : 1000}"
        >
            <view v-if="logos && logos.length > 0" class="service-button__logos">
                <view
                    v-for="(item, index) in logos"
                    :key="index"
                    :class="{
                        'c-gap-right-large': bottombtns.btnStyle === '2',
                        'c-gap-right': bottombtns.btnStyle === '1',
                    }"
                    col="6"
                    class="service-button__button service-button--logo c-gap-right swan-security-padding-bottom"
                    @tap="tap(item)"
                >
                    <image
                        v-if="item.img"
                        :src="item.img"
                        class="service-button__button__img"
                    />
                </view>
            </view>
            <view v-if="texts && texts.length > 0" class="service-button__texts">
                <view
                    v-for="(item, index) in texts"
                    :key="index"
                    :class="{
                        'service-button--primary': item.theme === 'primary',
                        'service-button--normal': item.theme === 'normal',
                        'service-button--text--gap': bottombtns && bottombtns.btnStyle === '1'
                    }"
                    col="6"
                    class="service-button__button service-button--text swan-security-padding-bottom"
                    @tap="tap(item)"
                >
                    {{ item.text }}
                </view>
            </view>
        </view>
        <view class="service-button__masking"></view>
    </view>
</template>
<script>

/**
 *  @file 服务按钮wise
 *  @author yantingxi
 */

import {navigate, navToSmartProgram, navToBdBoxH5} from './../../../utils/navigate';
import {send} from './../../../utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        arrText: {
            type: Array,
            default: () => []
        },
        bottombtns: {
            type: Object,
            default: () => {}
        },
        contentType: {
            type: String,
            default: ''
        }
    },
    computed: {
        logos() {
            const logos = [];
            this.arrText && this.arrText.map(button => {
                if (button.theme === 'logo') {
                    logos.push(button);
                }
            });
            return logos;
        },

        texts() {
            const texts = [];
            this.arrText && this.arrText.map(button => {
                if (button.theme !== 'logo') {
                    texts.push(button);
                }
            });
            return texts;
        }
    },
    components: {
    },
    methods: {
        tap(item) {
            if (!item.url) {
                return;
            }
            const extra = {
                mod: 'service-button-' + item.theme,
                logUrl: item.url_tcurl
            };

            // urlType: 1 - 站内 2 - 三方小程序 3 - 站外h5轻框打开
            switch (item.urlType) {
                case '2':
                    navToSmartProgram(item.url);
                    send({
                        type: 'l',
                        action: 'navToSmartProgram',
                        extra
                    });
                    break;
                case '3':
                    navToBdBoxH5(item.url);
                    send({
                        type: 'l',
                        action: 'navToBdBoxH5',
                        extra
                    });
                    break;
                case '1':
                default:
                    navigate({
                        url: item.url,
                        extra
                    });
                    break;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.service-button {
    &--row {
        display: flex;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        height: .44rem;
        width: 100%;
        margin: 0;
        background: #fff;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
        box-shadow: 0 -1px 6px 0px rgba(0, 0, 0, .1);
        -webkit-animation: move;
        animation: move;
        animation-fill-mode: both;
        animation-delay: .2s;
        -webkit-animation-delay: .2s;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        /* stylelint-disable */
        animation-iteration-count: 1;
        -webkit-animation-iteration-count: 1;

        &--transparent {
            background: transparent;
            box-shadow: none;
        }
    }

    &__button {
        text-align: center;
        font-size: .16rem;

        &__img {
            width: 100%;
            margin-top: 2px;
        }
    }

    &__logos {
        flex: 0 0 auto;
        display: flex;
    }

    &__texts {
        display: flex;
        width: 100%;
    }

    &--text {
        width: 100%;
        line-height: .44rem;
        text-align: center;
        box-sizing: border-box;

        &--gap {
            border-radius: 82.5px !important;
            &:nth-child(n+2) {
                margin-left: .1rem;
            }
        }
    }

    &--logo {
        border-radius: 0;
        padding: 0;
        display: block;
        width: 40px;
        height: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    &--primary {
        background-color: #00c8c8;
        text-decoration: none;
        color: #fff;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    &--normal {
        background-color: #fff;
        text-decoration: none;
        color: #333;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    &__masking {
        height: 0.44rem;
    }
}

@keyframes move {
    0% {
        bottom: -48px;
    }
    100% {
        bottom: 0;
    }
}

</style>
