<template>
    <view class="bottom-innerbtns-wrap c-row">
        <block v-for="(btn,index) in contentItem.buttons">
            <view
                @tap="innerbtnsTap(btn)"
                :class="[spanClass,'c-span-btn', 'btn-wrap',
                btn.colorClass === '' ? 'btn-bg-white' : 'btn-bg-green']">
                <login-btn
                    :disabled="!(btn.isNeedLogin && btn.isNeedLogin === '1')"
                    @onTapStart="onTapStart(btn)"
                    @onLoginSuccess="innerbtnsTap(btn)"
                >
                    <image
                        v-if="btn.btnImg"
                        :src="btn.btnImg"
                        class="c-inline-block c-gap-right"
                        mode="widthFix"
                        :style="{
                            'margin-top': '-2px',
                            width: btn.iconwidth
                        }"
                    ></image>
                    {{ btn.linkText }}
                </login-btn>
            </view>
        </block>
    </view>
</template>

<script>

/**
 * @file 问诊-行内按钮
 * @author huanghongwei
 * @categories 问诊组件
 * @tags [component]
 */
import {navigate, getRealUrl} from '../../utils/navigate';
import * as login from '../../utils/login';
import * as log from '../../utils/log';
import LoginBtn from '@components/common/login-btn';

export default {
    config: {
        component: true
    },
    props: {

        /**
         * 日志额外内容
         */
        extra: {
            type: Object,
            default: null
        },

        /**
         * 按钮项
         */
        contentItem: {
            'type': Object,
            'default': {
                buttons: []
            }
        },

        /**
         * isLast
         */
        isLast: {
            type: Boolean,
            default: true
        },

        /**
         * 是否需要单次点击，默认值为true，需要单次点击，不需要可在外层控制传入false
         */
        isOnceClick: {
            type: Boolean,
            default: true
        }
    },
    components: {
        LoginBtn
    },
    data() {
        return {
            spanClass: 'c-span' + (
                this.contentItem
                && this.contentItem.buttons
                && this.contentItem.buttons.length ? 12 / this.contentItem.buttons.length : '')
        };
    },
    watch: {
        contentItem(v) {
            return {
                spanClass: 'c-span' + (
                    v.buttons
                    && v.buttons.length ? 12 / v.buttons.length : '')
            };
        }
    },
    created() {
        log.send({
            type: 'b',
            action: 'im_innerbtns_show',
            extra: this.extra || {}
        });
    },
    methods: {
        onTapStart(btn) {
            if (process.env.MARS_ENV === 'h5') {
                if (btn.login === 0) {
                    login.toH5LoginPage({isReplaceUrl: true});
                }
                else {
                    this.innerbtnsTap(btn);
                }
            }
        },
        innerbtnsTap(btn) {
            /**
             * 按钮点击
             */
            this.$emit('tapBtn', btn);
            if (btn.msUrl) {
                // 需要登陆的情况
                if (btn.isNeedLogin && btn.isNeedLogin === '1') {
                    navigate({
                        url: btn.msUrl
                    });
                }
                // 不需要登陆
                else {
                    navigate({
                        url: btn.msUrl,
                        extra: Object.assign({name: 'innerbtns_navi'}, btn.tcExtra || {})
                    });
                }
            }
            else if (btn.callbackUrl) {
                if (!this.isLast || btn.isClick) {
                    return;
                }
                // 若外层isOnceClick传入false，则不走这个逻辑，可实现取消只能单次点击的逻辑
                if (this.isOnceClick) {
                    // 防止多次点击
                    btn.isClick = true;
                }

                /**
                 * 用户回复
                 */
                this.$emit('questionReply', {
                    callbackUrl: btn.callbackUrl,
                    name: btn.linkText,
                    value: btn.linkValue
                });
                log.send({
                    type: 'b',
                    action: 'innerbtns_cb'
                });
            }
        }
    }
};
</script>

<style>
.c-span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
}
.bottom-innerbtns-wrap {
    height: 38px;
    margin: 5px 0 0;
    line-height: 38px;
    font-size: 16px;
    text-align: center;
}
.c-span-btn:nth-child(1) {
    margin-right: 10px;
}
.c-span-btn {
    border-radius: 60px;
}
.btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-bg-green {
    color: #fff;
    background: #00c8c8;
}
.btn-bg-white {
    color: #555;
    border: 1px #f1f1f1 solid;
}
.c-span:nth-of-type(2) {
    border-left: 1px solid #f1f1f1;
}
</style>