<template>
    <view class="im-bottom-btn c-gap-inner-top" :style="{
        background: content.bgColor || '#fff'
    }">
        <view
            v-if="tips && tips.length"
            class="tips c-color-gray c-font-13 c-gap-inner-bottom c-gap-inner-left-large c-gap-right-large">
            <view
                v-for="(tip, tipIndex) in tips"
                :key="tipIndex"
                class="c-inline-block"
                :style="{
                    'color': tip.color
                }"
                @tap="$emit('tipTap', tip)">
                <rich-text :nodes="tip.text"></rich-text>
            </view>
        </view>
        <!-- 新增图文混合、可操作的顶部tips -->
        <view
            v-if="content.optionTip && content.optionTip.tipList && content.optionTip.tipList.length > 0"
            class="tip-option-wrap c-color-gray c-font-13 c-gap-inner-bottom c-gap-inner-left-large c-gap-right-large">
            <view
                v-for="(tip, tipIndex) in content.optionTip.tipList"
                :key="tipIndex"
                class="c-inline-block tip-option-item"
                :style="{
                    'color': tip.color
                }"
                @tap="$emit('tipTap', tip)">
                <view v-if="tip.text">{{tip.text}}</view>
                <image 
                    v-if="tip.iconUrl" mode="widthFix" :src="tip.iconUrl" 
                    :style="{width: tip.iconWidth || '20px', 'max-height': '30px'}"/>
            </view>
        </view>
        <view>
            <!-- icon -->
            <view
                v-if="content.icon && content.icon.name"
                class="bicon c-gap-inner-left-boundary c-color c-tac c-font-normal">
                <view
                    class="m-icon c-inline-block"
                    :class="'m-icon-' + content.icon.name"
                    @tap="$emit('bottomBtnTap', content.icon)"></view>
                <view>{{ content.icon.title }}</view>
            </view>
            <!-- 按钮 -->
            <view v-if="content.hasSmallBtn" class="btn">
                <view
                    v-for="(item, index) in content.btn"
                    :key="index"
                    :style="{
                        color: item.fontColor,
                        background: item.bgColor,
                        border: item.bgColor && 'none',
                        width: item.width || getBtnWid,
                        opacity: disabled ? 0.5 : 1,
                        marginRight: item.width ? '7px' : 0,
                        'box-shadow': item.boxShadow || 'none'
                    }"
                    class="btn-item"
                    :class="['btn-item', 'btn-item-' + item.type]"
                    @tap="onBtnTap(item)"
                >
                    <view v-if="item.icon && item.title" class="btn-text-center">
                        <view class="icon-wrap">
                            <c-icon 
                                :name="item.icon" 
                                font-size="16px" 
                                :color="item.iconColor" 
                            />
                        </view>
                        <text 
                            :style="{
                                color: item.color || '#555', 
                                fontSize: item.fontSize || '13px'
                            }"
                        >{{ item.title }}</text>
                    </view>
                    <text v-if="item.title && !item.icon">{{ item.title }}</text>
                    <text v-if="item.desc" class="btn-item-desc c-gap-top-small">{{ item.desc }}</text>
                </view>
            </view>
            <view v-else-if="!needLogin" class="btn">
                <view
                    v-for="(item, index) in content.btn"
                    :key="index"
                    :style="{
                        color: item.fontColor,
                        background: item.bgColor,
                        border: item.bgColor && 'none',
                        width: content.btn.length > 1 ? 'calc(' + 100 / content.btn.length + '% - 5px)' : '100%',
                        opacity: disabled ? 0.5 : 1,
                        'box-shadow': item.boxShadow || 'none'
                    }"
                    class="btn-item"
                    :class="['btn-item', 'btn-item-' + item.type]"
                    @tap="onBtnTap(item)"
                >
                    <text v-if="item.title">{{item.title}}</text>
                    <text v-if="item.desc" class="btn-item-desc c-gap-top-small">{{item.desc}}</text>
                </view>
            </view>
            <view v-else class="btn">
                <view
                    v-for="(item, index) in content.btn"
                    :key="index"
                    :style="{
                        color: item.fontColor,
                        background: item.bgColor,
                        border: item.bgColor && 'none',
                        width: content.btn.length > 1 ? 'calc(' + 100 / content.btn.length + '% - 5px)' : '100%',
                        opacity: disabled ? 0.5 : 1,
                        'box-shadow': item.boxShadow || 'none'
                    }"
                    class="btn-item"
                    :class="['btn-item', 'btn-item-' + item.type]"
                >
                    <login-btn
                        class="c-width"
                        :disabled="false"
                        @onTapStart="onTapStart(item)"
                        @onLoginSuccess="onBtnTap(item)"
                        @onLoginFail="onLoginFail"
                    >
                        <view class="c-width c-tac" @tap="onBtnTap(item)">
                            <text v-if="item.title">{{ item.title }}</text>
                            <text v-if="item.desc" class="btn-item-desc c-gap-top-small">{{ item.desc }}</text>
                        </view>
                    </login-btn>
                </view>
            </view>
        </view>
        <view class="swan-security-padding-bottom"></view>
    </view>
</template>
<script>
/**
 * @file im底部button
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
/* global getCurrentPages */
import LoginBtn from '@components/common/login-btn';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import * as core from '../../utils/core';
import {ubcSend} from '@utils/log';
export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    props: {
        /**
         * 组件的数据
         */
        content: {
            type: Object,
            default() {
                return {
                    text: '',
                    btn: []
                };
            }
        },
        /**
         * 按钮置灰
         */
        disabled: {
            type: Boolean,
            default: false
        },
        /**
         * 是否需要登录
         */
        needLogin: {
            type: Boolean,
            default: false
        }
    },
    components: {
        LoginBtn,
        CIcon
    },
    created() {
        this.fmtTip();
    },
    beforeDestroy() {
        this.timer = null;
    },
    data() {
        return {
            countDown: 0,
            tips: [],
            timer: null
        };
    },
    computed: {
        getBtnWid() {
            const len = this.content.btn.length - 1;
            if (this.content.btn.length > 1) {
                if (this.content.hasSmallBtn) {
                    return 'calc(' + 100 / len + '% - ' + (this.content.smallWidth / len + 13.5) + 'px)';
                }
                return 'calc(' + 100 / this.content.btn.length + '% - 5px)';
            }
            return '100%';
        }
    },
    watch: {
        'content.text'(newVal) {
            this.fmtTip();
        }
    },
    methods: {
        // 格式化tip显示
        fmtTip() {
            if (!this.content.text) {
                return;
            }
            if (!Array.isArray(this.content.text)) {
                this.tips = [{text: this.content.text}];
            }
            else {
                this.tips = [].concat(this.content.text);
            }
            let self = this;
            this.tips.forEach((tip, tipIndex) => {
                if (tip.text && tip.text.indexOf('{') > -1) {
                    let originText = tip.text;
                    this.countDown = this.content.duration;
                    this.$set(this.tips[tipIndex], 'text', originText.replace(
                        /{duration}/,
                        `<span style="color:#ff6050;font-weight:bold;">${core.fmtCountDown(this.countDown)}</span>`
                    ));
                    this.timer = setInterval(() => {
                        self.countDown -= 1;
                        self.$set(self.tips[tipIndex], 'text', originText.replace(
                            /{duration}/,
                            `<span style="color:#ff6050;font-weight:bold;">${core.fmtCountDown(self.countDown)}</span>`
                        ));
                    }, 1000);
                }
            });
        },
        onBtnTap: core.throttle(function (item) {
            ubcSend({
                type: 'clk',
                value: `bottom-btn-${item.title}`
            });
            this.$emit('bottomBtnTap', item);
        }, 2000),
        onTapStart(btn) {
            this.$emit('onTapStart', btn);
        },
        onLoginFail() {
            this.$emit('onLoginFail');
        }
    }
};
</script>
<style lang="less" scoped>
.im-bottom-btn {
    background: #fff;

    .bicon {
        float: left;
    }

    .tips {
        text-align: center;
    }

    .tip-option-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tip-option-item {
        display: inline-flex;
    }

    .btn {
        display: flex;
        justify-content: space-between;
        padding: 0 17px 8px 17px;

        &-item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 22px;
            height: 42px;
            font-size: 16px;
            line-height: 16px;
            color: #999;
            border: 1px solid #f1f1f1;
            font-weight: bold;

            &-desc {
                font-size: 9px;
                line-height: 9px;
            }

            &-timeout {
                background: linear-gradient(134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
            }
        }

        &-text-center {
            text-align: center;
            font-family: PingFangSC-Regular;
            font-weight: 400;

            .icon-wrap {
                margin-bottom: 3px;
            }
        }
    }
}
</style>