<template>
    <view class="op">

        <!-- 按钮列表 -->
        <view class="op__list">
            <view 
                v-for="(item, index) in data.list"
                :key="'btn_' + index"
                class="op__list__item c-font-medium-less c-color-title"
                :class="'op__list__item--' + item.color "
                @tap="onItemTap(item)"
            >
                <text class="op__list__item__text">{{ item.text }}</text>
            </view>
        </view>
        <!-- 取消订单 -->
        <cancel-popup
            v-if="cancelPopup"
            :data="cancelPopup" 
            :show="showCancel"
            @onClose="onCancelPopup(false)"
            @reLoad="reLoad"
        />
        <c-dialog
            v-if="confirmDialog && confirmDialog.content"
            :show="showDialog"
            :content="confirmDialog.content"
            :btn-opts="confirmDialog.btnOpts"
            :content-text-align="'center'"
            content-color="#525252"
            content-padding="0.23rem 0.37rem 0.23rem 0.38rem"
            :gap-top="0"
            @close="handleCloseDialog"
            @btntap="handleDialogBtnTap"
        />
    </view>
</template>

<script>
import CancelPopup from './CancelPopup';
import {navigate} from '@utils/navigate';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import {request} from '@utils/request';
import {pay} from '@utils/pay';
import * as conf from '@utils/conf';

/**
 * @file 健康检测-订单列表btn
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CancelPopup,
        CDialog
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /** 阻止确认收货跳转页面 */
        disableNavigate: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    data() {
        return {
            cancelPopup: null,
            showCancel: false,
            showDialog: false,
            confirmDialog: {}
        };
    },
    methods: {
        handleCloseDialog() {
            this.showDialog = false;
        },
        handleDialogBtnTap(e) {
            if (e.btn.event === 'confirm'){
                this.showDialog = false;
                request({
                    url: conf.goApiHost + e.btn.api
                }).then(res => {
                    const {backUrl} = res.data || {};
                    /** 重新加载 */
                    this.$emit('reLoad', res.data);
                    
                    if (!this.disableNavigate && backUrl) {
                        navigate({
                            url: backUrl
                        });
                    }
                });
            }
        },
        reLoad() {
            /** 重新加载 */
            this.$emit('reLoad');
        },
        onItemTap(btn) {
            //如果有block文本，则阻塞后续操作
            if (btn.toast){
                this.$api.showToast({
                    icon: 'none',
                    title: btn.toast
                });
                return;
            }
            if (btn.type === 'cancel') {
                // 取消订单
                this.cancelPopup = btn.popup;
                this.onCancelPopup(true);
            } else if (btn.type === 'tel') {
                // 拨打电话
                this.$api.makePhoneCall({
                    phoneNumber: `${btn.tel}`,
                    fail(err) {
                        this.$api.showModal({
                            title: '拨打失败',
                            content: '请检查是否输入了正确的电话号码',
                            showCancel: false
                        });
                    }
                });
            } else if (btn.behavior === 'jump') {
                const urlType = btn.h5Url ? 2 : 0;
                // 页面跳转
                navigate({
                    url:  btn.h5Url || btn.unifiUrl || btn.url,
                    urlType: urlType
                });
            } else if (btn.behavior === 'popup') {
                // 弹窗
                if (btn.popup) {
                    this.confirmDialog = btn.popup;
                    setTimeout(() => {
                        this.showDialog = true;
                    }, 100); 
                }
            } else if (btn.behavior === 'pay') {
                // 付款
                pay({url: btn.payUrl});
            } 
        },
        // 取消订单弹窗
        onCancelPopup(value) {
            setTimeout(() => {
                this.showCancel = !!value;
            }, 100);
        }
    }
};
</script>

<style lang="less" scoped>
.op {
    margin-top: 0.1rem;
    margin-bottom: 0.05rem;
    display: flex;
    justify-content: flex-end;
    &__list {
        display: flex;
        &__item {
            box-sizing: border-box;
            padding: 0 0.17rem;
            height: 0.32rem;
            line-height: 0.3rem;
            border-radius: 333px;
            border: 1px solid #858585;
            margin-left: 0.12rem;
            &:first-child {
                margin-left: 0;
            }
            &--gray {
                color: #1f1f1f;
                border-color: #858585;
            }
            &--red {
                color: #FD503E;
                border-color: #FD503E;
            }
            &--fullRed {
                color: #fff;
                background-color: #FD503E;
                border: none;
            }
            &--white {
                color: white;
                border-color: #FD503E;
            }
            &__text{
                min-width: 0.6rem;
                text-align: center;
                display: inline-block;
            }
        }
    }
}
</style>
