<template>
    <view v-if="btnTabList && btnTabList.length">
        <view class="bottom-wrap">
            <!-- 底部tab -->
            <view class="bottom c-font-small swan-security-padding-bottom">
                <!-- 包含商业化tab -->
                <template v-if="showBusinessBottom">
                    <view class="bottom__tab__left">
                        <view
                            v-if="btnTabList[0]"
                            class="bottom__tab__left__item"
                            @tap="handleClickTab(btnTabList[0], 'ubc', btnTabList[0].text)"
                        >
                            <image :src="btnTabList[0].icon" class="bottom__tab__icon"/>
                            <text>{{ btnTabList[0].text }}</text>
                        </view>
                        <view class="bottom__tab__left__more" @tap="toggleOverlay">
                            <image :src="moreImage" class="bottom__tab__icon"/>
                            <text>{{ moreText }}</text>
                            <view :class="[!showOverlay ? 'hidden' : '', 'bottom__tab__left__overlay']">
                                <view
                                    v-for="(item, index) in stripedTabList"
                                    :key="'regular' + index"
                                    class="bottom__tab__left__overlay__item"
                                    @tap="handleClickTab(item, 'ubc', item.text)"
                                >
                                    {{ item.text }}
                                </view>
                            </view>
                            <view :class="[!showOverlay ? 'hidden' : '', 'bottom-overlay-backdrop']"/>
                        </view>
                    </view>
                    <view class="bottom__tab__right">
                        <view
                            v-for="(item, index) in payTabList"
                            :key="'business' + index"
                            class="bottom__tab__right__item"
                            @tap="clickBtn(item.type, item.url, item.text)"
                        >
                            <text
                                :class="
                                    item.type === 'buydrug' || item.type === 'buy' ? buyDrugTabUbcClass
                                    : (item.type === 'ask' ? askTabUbcClass
                                        : (item.type === 'phone' ? phoneTabPlayUbcClass : ''))"
                            >{{ item.title }}</text>
                        </view>
                    </view>
                </template>

                <!-- 普通底部tab -->
                <template v-else>
                    <view
                        v-for="(item, index) in btnTabList"
                        :key="'common' + index"
                        class="bottom__tab"
                        @tap="handleClickTab(item)"
                    >
                        <block
                            v-if="item.type !== 3"
                        >
                            <image :src="item.icon" class="bottom__tab__icon"/>
                            <text>{{ item.text }}</text>
                        </block>
                        <block v-if="item.type === 3 && env === 'swan'">
                            <view
                                :class="ttsStatus === 'playing' ? 'bottom__tab__iconbg--active' : ''"
                                class="bottom__tab__iconbg"
                            />
                            <text>{{ item.text }}</text>
                        </block>
                    </view>
                </template>
            </view>
        </view>
        <!-- 分享蒙层 -->
        <view
            v-if="showShare && !shareUrl"
            class="theme-mask"
            @tap="showShare = !showShare"
        >
            <image
                src="https://medical-cms.cdn.bcebos.com/pic/pic_1589344997015cd5iFInc.png"
                class="theme-mask-image"
            />
        </view>
        <share-img
            v-if="showShare && shareUrl"
            width="91.79vw"
            :is-radius="true"
            :src="shareUrl"
            @close="showShare = !showShare"
        />
    </view>
</template>
<script>
/**
 * @file 医典落地页底部按钮
 * @author yumingzhi
 * @categories
 * @tags
 */
/* global getApp */
import {navigate, navToBdBoxH5} from '@utils/navigate';
import ShareImg from './share-img-new';
import {send, ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        ShareImg
    },
    props: {
        /**
         * 按钮list
         */
        btnTabList: {
            type: Array,
            default: () => []
        },
        /**
         * 商业按钮list
         */
        payTabList: {
            type: Array,
            default: () => []
        },
        /**
         * 分享内容
         */
        shareInfo4Bd: {
            type: Object,
            default: () => ({})
        },
        /**
         * 分享内容
         */
        ttsStatus: {
            type: String,
            default: 'idle'
        },
        /**
         * 词条id
         */
        contentid: {
            type: String,
            default: ''
        },
        /**
         * 词条标题
         */
        title: {
            type: String,
            default: ''
        },
        buyDrugTabUbcClass: {
            type: String,
            default: ''
        },
        askTabUbcClass: {
            type: String,
            default: ''
        },
        phoneTabPlayUbcClass: {
            type: String,
            default: ''
        },
        /**
         * 分享链接
         */
        shareUrl: {
            type: String,
            default: ''
        }
    },
    data() {
        this.firstScreen = true;
        return {
            showShare: false,
            showOverlay: false,
            showBusinessBottom: false,
            env: 'swan',
            stripedTabList: [],
            moreText: '更多',
            moreImage: 'https://med-fe.cdn.bcebos.com/yd/yd_bottom_more2.png',
        };
    },
    created() {
        this.env = process.env.MARS_ENV;
        this.stripedTabList = this.btnTabList && this.btnTabList.slice(1);
        this.showBusinessBottom = this.btnTabList
            && this.btnTabList.length && this.payTabList && this.payTabList.length;
    },
    mounted() {
        // TODO: 优化改修复方式
        // 修复小程序延迟获取 btnTabList 和 payTabList 数据的问题
        this.$nextTick(() => {
            setTimeout(
                () => {
                    this.stripedTabList = this.btnTabList && this.btnTabList.slice(1);
                    this.showBusinessBottom = this.btnTabList
                        && this.btnTabList.length && this.payTabList && this.payTabList.length;
                    if (!this.showBusinessBottom) {
                        this.sendUbcLog();
                    }
                },
                800
            );
        });
    },
    methods: {
        handleClickTab(item, logType, logValue) {
            const itemText = item.text;
            this.$emit('bottomTabChange', itemText);
            if (item.type === 3) {
                /**
                 * 点击按钮
                 */
                this.$emit('showTts');
            } else if (item.type === 1) {
                if (item.url) {
                    if (item.key === 'report') {
                        navigate({
                            url: item.url,
                            urlType: '2'
                        });
                    } else {
                        navigate({url: item.url});
                    }
                }
            } else if (item.type === 2) {
                const isInApp = getApp().globalData.isInApp;
                if (this.env !== 'swan' && !isInApp) {
                    this.showShare = true;
                } else {
                    this.$api.openShare({
                        ...this.shareInfo4Bd,
                        path: isInApp ? null : '',
                        success: res => {
                            !isInApp && this.$api.showToast({
                                title: '分享成功'
                            });
                        }
                    });
                }
            }
            if (logType === 'ubc') {
                ubcSend({
                    type: 'clk',
                    value: logValue,
                    ext: {
                        pd: 'act',
                        module: 'business',
                        contentid: this.contentid,
                        title: this.title
                    }
                });
            } else {
                send({
                    type: 't',
                    extra: Object.assign({
                        module: 'click_yd_tab',
                        text: item.text,
                        contentid: this.contentid,
                        title: this.title
                    })
                });
            }
        },
        updateUbcLog(action, logValue) {
            let dotValue = logValue === 'buy'
                ? 'ydcty_shangyehuagouyao' : (logValue === 'ask' ? 'ydcty_shangyehuawenzhen' : '');
            ubcSend({
                type: 'clk',
                value: dotValue,
                ext: {
                    pd: 'act',
                    module: 'business',
                    action: action,
                    contentid: this.contentid
                }
            });
        },
        clickBtn(type, url, text) {
            this.$emit('bottomPayTab', type);
            if (type === 'phone') {
                this.$api.showModal({
                    title: '',
                    content: text ? text : '您将拨打中华慈善总会泰瑞沙赠药项目咨询电话：' + url,
                    confirmText: '确认拨打',
                    confirmColor: '#00d3ea',
                    success: res => {
                        if (res.confirm) {
                            this.telFun(url);
                        } else {
                            this.updateUbcLog('cancel-yd-drug', '取消');
                        }
                    }
                });
            } else {
                if (url.indexOf('expert.baidu.com') > -1) {
                    navigate({url});
                } else {
                    navToBdBoxH5(url);
                }
            }
            this.updateUbcLog('yd_drugs_btn', type);
        },
        telFun(url) {
            if (this.env === 'swan') {
                this.$api.makePhoneCall({
                    phoneNumber: url,
                    fail() {
                        this.$api.showToast({
                            title: '拨号失败',
                            icon: 'none'
                        });
                    }
                });
            } else {
                window.location.href = 'tel:' + url;
            }
        },
        toggleOverlay() {
            this.showOverlay = !this.showOverlay;
            this.showOverlay && this.firstScreen && this.sendUbcLog();
        },
        stopTts() {
            this.streamTTSManager.stop();
        },
        // 后续ubc pv 可信，删除这些必现模块打点,
        sendUbcLog() {
            const values = ['ydcty_dibufankui1', 'ydcty_dibufenxinag1'];
            this.env === 'swan' && values.push('ydcty_dibubofang1');
            values.forEach(item => {
                ubcSend({
                    type: 'view',
                    value: item
                });
            });
            this.firstScreen = false;
        }
    }
};
</script>
<style lang="less" scoped>
.bottom-wrap {
    position: fixed;
    background: #fff;
    z-index: 102;
    left: 0;
    bottom: 0;
    width: 100%;
}

.bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
    color: #666;
    border-top: 1px solid #d8d8d8;

    &__tab {
        text-align: center;

        &__icon {
            width: 22px;
            height: 22px;
            display: block;
            margin: 0 auto 2px;
        }
        // &__iconbg {
        //     width: 22px;
        //     height: 22px;
        //     background: url('https://med-fe.cdn.bcebos.com/yd%2Fyd_audio_bg.png');
        //     background-repeat: no-repeat;
        //     background-position: 0 0;
        //     background-size: 2100% auto;
        // }
        // &__iconbg--active {
        //     animation: run 0.2s steps(7), run 0.2s steps(5);
        //     animation-iteration-count: infinite, infinite;
        // }
        &__iconbg {
            width: 22px;
            height: 22px;
            background: url('https://med-fe.cdn.bcebos.com/yd%2Fyd_audio_bg.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 462px auto;
        }

        &__iconbg--active {
            // animation: test_anim1 1s steps(21), test_anim2 1s infinite steps(21);
            // animation: test_anim1 0.7s steps(7), test_anim2 1.4s infinite steps(14);
            animation-name: test_anim1, test_anim2;
            animation-duration: 0.5s, 1s;
            animation-timing-function: steps(7), steps(14);
            // animation-delay: 0, 0.5s;
            animation-iteration-count: 1, infinite;
            // animation-fill-mode: forwards, forwards;
            // animation-direction: normal, alternate;
        }
        // 商业化tab
        &__left {
            display: flex;
            justify-content: space-around;
            flex: 3;

            &__item {
                margin-left: 3px;
            }

            &__more {
                position: relative;
                margin-right: 12px;
            }

            &__overlay {
                position: absolute;
                box-sizing: border-box;
                border-radius: 9px;
                width: 79px;
                padding: 0 6px;
                left: 50%;
                transform: translate(-50%, -130px);
                z-index: 1001;
                background: #fff;
                box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);

                &__item {
                    line-height: 39px;
                    text-align: center;
                    border-bottom: 1px solid #f5f5f5;
                    font-size: 13px;
                    color: #555;

                    &:last-child {
                        border-bottom: none;
                    }
                }

                &::after {
                    position: absolute;
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-top: 6px solid #fff;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        &__right {
            display: flex;
            flex: 7;
            margin: 0 15px 0 0;
            height: 40px;
            background-image: linear-gradient(134deg, #00cfa3 0%, #05cfcd 60%, #00d3ea 100%);
            border-radius: 20px;
            color: #fff;
            font-size: 15px;

            &__item {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 1;
            }

            &__item:not(:first-child)::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                width: 1px;
                height: 18px;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, 0.6);
            }
        }
        @keyframes test_anim1 {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -154px 0;
            }
        }
        @keyframes test_anim2 {
            0% {
                background-position: -154px 0;
            }

            100% {
                background-position: -462px 0;
            }
        }
        // @keyframes test_anim {
        //     0% {
        //         background-position: 0 0;
        //     }
        //     33.3% {
        //         background-position: -154px 0;
        //     }
        //     66.6% {
        //         background-position: -308px 0;
        //     }
        //     100% {
        //         background-position: -462px 0;
        //     }
        // }
        @keyframes test_anim {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -462px 0;
            }
        }

        @keyframes run {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -22px 0;
            }
        }
        @keyframes run2 {
            from {
                background-position: -66px 0;
            }

            to {
                background-position: -88px 0;
            }
        }
    }
}

.theme-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;

    .theme-mask-image {
        width: 235px;
        height: 98px;
        position: absolute;
        right: 20px;
        top: 20px;
    }
}

.bottom-overlay-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.1);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.hidden {
    display: none;
}
</style>
