<template>
    <view>
        <!-- 按钮 -->
        <view class="refund__bottom-bar">
            <view v-if="bottomBar.tips" class="refund__bottom-bar__tips c-font-normal">{{ bottomBar.tips }}</view>
            <view
                v-for="(item, index) in bottomBar.btnList"
                :key="index"
                class="refund__bottom-bar__btn c-gap-right"
                :class="item.color"
                @tap="onBtnTap(item)"
            >{{ item.buttonText }}</view>
        </view>
        <!-- 暂位 -->
        <view class="refund__bottom__blank"/>
    </view>
</template>

<script>
/**
 * @file 退款详情页bar
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */

import {navigate, navToBdBoxH5} from '@utils/navigate';
import {send} from '@utils/log';
import {request} from '@utils/request';
import * as conf from '@utils/conf';
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
    },
    props: {
        /** 底部bar */
        bottomBar: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /** 订单ID */
        orderId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
        };
    },
    methods: {
        onBtnTap(btn) {
            if (btn.behavior === 'link') {
                if (btn.h5Url) {
                    navToBdBoxH5(btn.h5Url);
                } else {
                    navigate({
                        url: btn.asyncUrl,
                        extra: {
                            type: 'bottom-bar'
                        }
                    });
                }
            } else if (btn.behavior === 'async') {
                send({
                    type: 'b',
                    action: 'bottom-btn',
                    extra: {
                        type: btn.type || btn.buttonText,
                        orderId: this.orderId
                    }
                });
                request({
                    url: conf.apiHost + btn.asyncUrl,
                    method: 'get',
                    isFirstScreen: false,
                    isNeedLogin: true
                })
                    .then(res => {
                        if (res.data.toast) {
                            this.$api.showToast({
                                icon: 'none',
                                duration: 2000,
                                title: res.data.toast
                            });
                        }
                    })
                    .catch(err => {
                        this.$api.showToast({
                            icon: 'none',
                            duration: 2000,
                            title: (err && err.toast) || '操作失败，请稍后重试~'
                        });
                    });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.refund {
    &__bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        border-top: 1px solid #eee;
        background: #fff;
        box-sizing:content-box;
        height: 48px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        &__tips {
            color: #858585;
            margin-right: 20px;
        }
        &__btn {
            box-sizing: border-box;
            height: 28px;
            line-height: 27px;
            border-radius: 14px;
            padding: 0 11px;
            font-size: 12px;
        }
        .gray {
            border: 1px solid #707379;
            color: #333;
        }
        .red {
            background-image: linear-gradient(125deg, #FF754F 0%, #FB4556 100%);
            color: #fff;
        }
    }
    &__bottom__blank {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        height: 48px;
        box-sizing:content-box;
    }
}
</style>
