<template>
    <view>
        <!-- 确认按钮 -->
        <view
            v-if="isNeedAuth && tip"
            class="btn-tip c-gap-top-small c-gap-bottom-small"
            @tap="onTapAuth">
            <view
                class="btn-icon c-gap-right-small"
                :style="{
                    'background-image': 'url(' + (isChk ? enableIcon : disableIcon) + ')'
                }"></view>
            <view class="btn-tip-right c-font-normal">{{ tip }}</view>
        </view>
        <view class="bottom-links-wrap c-row">
            <block v-for="(btn,index) in contentItem.buttons">
                <!-- 在登陆的情况下，静默push授权 -->
                <view
                    v-if="btn.checkAuth"
                    :class="[spanClass,'c-span-btn',
                    btn.colorClass === '' ? 'btn-bg-white' : 'btn-bg-green']">
                    <template-mars target="swan">
                        <im-push-auth
                            :is-auth="isChk"
                            :auth-url="contentItem.authUrl"
                            :item="btn"
                            @tapBtn="innerlinksTap(btn)"
                            @touchstart="onBtnStart(btn)"
                            @onAuth="onAuth"/>
                    </template-mars>
                </view>
                <view v-else-if="btn.msUrl || btn.url || btn.sfUrl"
                    @tap="innerlinksTap(btn)"
                    @touchstart="onBtnStart(btn)"
                    :class="[spanClass,'c-span-btn',
                    btn.colorClass === '' ? 'btn-bg-white' : 'btn-bg-green']">
                    <login-btn
                        :disabled="!(btn.url || btn.login)"
                        @onTapStart="onTapStart(btn)"
                        @onLoginSuccess="innerlinksTap(btn)"
                    >
                        {{ btn.linkText }}
                    </login-btn>
                </view>
                <view v-else-if="btn.callbackUrl"
                    @tap="innerlinksTap(btn)"
                    @touchstart="onBtnStart(btn)"
                    :class="[spanClass, 'c-span-btn',
                    btn.colorClass === ''?'btn-bg-white':'btn-bg-green']">
                    {{btn.linkText}}
                </view>
            </block>
        </view>
    </view>
</template>

<script>
/**
 * @file 问诊-选择按钮
 * @author haoyan
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '../../utils/navigate';
import {request} from '../../utils/request';
import {pay} from '../../utils/pay';
import {throttle} from '../../utils/core';
import * as log from '../../utils/log';
import ImPushAuth from './im-push-auth';
import LoginBtn from '@components/common/login-btn';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * x
         */
        contentItem: {
            'type': Object,
            'default': {
                buttons: []
            }
        },
        /**
         * x
         */
        isLast: {
            type: Boolean
        }
    },
    components: {
        ImPushAuth,
        LoginBtn
    },
    data() {
        return {
            isNeedAuth: false,
            isChk: true,
            enableIcon: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3380361448,245250595&fm=179&app=35&f=PNG?w=45&h=45',
            disableIcon: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1601670114,4265098755&fm=179&app=35&f=PNG?w=45&h=45',
            tip: '',
            spanClass: 'c-span' + (
                this.contentItem
                && this.contentItem.buttons
                && this.contentItem.buttons.length ? 12 / this.contentItem.buttons.length : ''),
            startTime: '',
            endTime: ''
        };
    },
    watch: {
        contentItem(v) {
            return {
                spanClass: 'c-span' + (
                    v.buttons
                    && v.buttons.length ? 12 / v.buttons.length : '')
            };
        }
    },
    created() {
        if (this.contentItem.autoUrl && this.isLast) {
            const time = setTimeout(() => {
                navigate({
                    url: this.contentItem.autoUrl
                });
                clearTimeout(time);
            }, 300);
        }
    },
    methods: {
        onTapStart(item) {
            if (process.env.MARS_ENV === 'h5') {
                this.innerlinksTap(item);
            }
        },
        innerlinksTap(btn) {
            log.send({
                type: 'b',
                action: 'innerlinks_c',
                extra: {
                    start: this.startTime,
                    end: new Date().getTime()
                }
            });
            if (btn.msUrl || btn.url || btn.sfUrl) {
                if (btn.url) {
                    if (process.env.MARS_ENV === 'swan') {
                        this.onPost(btn.url);
                    }
                    else if (process.env.MARS_ENV === 'h5') {
                        if (btn.is_login) {
                            return this.onPost(btn.url);
                        }
                        navigate({
                            url: btn.msUrl,
                            extra: {
                                name: 'innerlinks_navi'
                            }
                        });
                    }
                }
                else if (btn.login && process.env.MARS_ENV === 'swan') {
                    navigate({
                        url: btn.msUrl || btn.sfUrl,
                        extra: {
                            name: 'innerlinks_navi'
                        }
                    });
                }
                else {
                    navigate({
                        url: btn.msUrl || btn.sfUrl,
                        extra: {
                            name: 'innerlinks_navi'
                        }
                    });
                }
            }
            else if (btn.callbackUrl) {
                if (!this.isLast || btn.isClick) {
                    return;
                }
                // 防止多次点击
                btn.isClick = true;
                /**
                 * 提交
                 * @event questionReply
                 */
                this.$emit('questionReply', {
                    callbackUrl: btn.callbackUrl,
                    name: btn.linkText,
                    value: btn.linkText
                });
                log.send({
                    type: 'b',
                    action: 'innerlinks_cb'
                });
            }
            else {
                this.$api.showToast({
                    icon: 'none',
                    title: '数据异常，请刷新后重试'
                });
            }
        },
        onBtnStart() {
            this.startTime = new Date().getTime();
        },
        onPost: throttle(function (url) {
            log.send({
                type: 'b',
                action: 'innerlinks_submit'
            });
            request({
                url,
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                if (res.data.isWarningShow && res.data.stopWarning) {
                    /**
                     * 用户诚信守则弹框，如果用户被封禁，则不跳转支付
                     * @event warningPop
                     */
                    this.$emit('warningPop', res.data.stopWarning);
                    return;
                }
                if (res.data.toast) {
                    this.$api.showToast({title: res.data.toast, icon: 'none', duration: 3000});
                }
                setTimeout(() => {
                    if (res.data.pay_url) {
                        pay({
                            url: res.data.pay_url,
                            fail() {
                                navigate({
                                    url: res.data.jumpUrl
                                });
                            }
                        });
                    }
                    else if (res.data.jumpUrl) {
                        navigate({
                            url: res.data.jumpUrl
                        });
                    }
                }, res.data.toast ? 3000 : 0);
            });
        }, 1 * 1000),
        onTapAuth() {
            this.isChk = !this.isChk;
        },
        // 是否需要显示授权组件
        onAuth({isNeedAuth, tip}) {
            if (process.env.MARS_ENV === 'swan') {
                this.isNeedAuth = isNeedAuth;
                this.tip = tip;
            }
        }
    }
};
</script>

<style>
.bottom-links {
    display: block;
    height: 28px;
    margin: 10px -10px 0;
    padding: 0;
    border-top: 1px solid #f1f1f1;
    line-height: 38px;
    text-align: center;
}
.c-span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
}
.bottom-links-wrap {
    height: 38px;
    margin: 5px 0 0;
    line-height: 38px;
    font-size: 14px;
    text-align: center;
}
.c-span-btn:nth-child(1) {
    margin-right: 10px;
}
.c-span-btn {
    border-radius: 60px;
}
.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;
}
.btn-icon {
    position: relative;
    top: 4px;
    width: 15px;
    height: 15px;
    background-size: cover;
}
.btn-tip {
    color: #999;
    display: flex;
    align-items:baseline;
}
.btn-tip-right {
    flex: 1;
    min-width: 0;
}

</style>