<template>
    <view>
        <template v-if="data">
            <!-- 主诉收集完成前 -->
            <im-no-pay-modal
                v-if="data.type === 'beforePatientInfoCollect'"
                :data="data"
                :is-retaining-modal-show="isShowLeave"
                is-retaining-modal
                @closeModal="onClose"
            />
            <!-- 主诉收集完成后及待支付 -->
            <view
                v-else
                class="wrap"
            >
                <view class="pop-content">
                    <view v-if="info.title" class="title c-font-big c-font-wb c-tac">
                        {{ info.title }}
                    </view>
                    <view v-if="info.subTitle" class="sub-title c-font-normal c-color-gray c-tac">
                        {{ info.subTitle }}
                    </view>
                    <template v-if="cardInfo">
                        <!-- 升级月卡 -->
                        <view
                            v-if="cardInfo.type === 'serviceSelection' && cardInfo.serviceType === 'monthCardUpdate'"
                            class="card-vip c-tac"
                        >
                            <template v-for="(item, index) in cardInfo.content">
                                <view
                                    :key="index"
                                    class="card-vip-choice card-vip-left c-radius"
                                    :class="{'angle': item.icon}"
                                >
                                    <view class="card-vip-choice-border"/>
                                    <view>
                                        <text class="card-vip-choice-num c-font-wb">{{ item.num }}</text>
                                        <text class="c-font-13">{{ item.unit }}</text>
                                    </view>
                                    <view class="c-font-13">
                                        {{ item.type }}
                                    </view>
                                    <view class="card-vip-choice-price c-font-normal">
                                        <text>￥</text>
                                        <text class="c-font-medium c-font-wb">{{ item.cost }}</text>
                                        <text>/{{ item.unit }}</text>
                                    </view>
                                </view>
                                <view
                                    v-if="index < cardInfo.content.length - 1"
                                    :key="index + 'arrow'"
                                    class="card-vip-arrow"
                                />
                            </template>
                        </view>
                        <!-- 优惠券 -->
                        <view
                            v-else-if="cardInfo.type === 'serviceSelection'"
                            class="card-ticket c-radius"
                        >
                            <view class="card-ticket-left c-gap-inner-left-xlarge c-gap-inner-top-xlarge">
                                <view class="card-ticket-left-title c-font-large c-font-wb c-color-mall">
                                    {{ cardInfo.title }}
                                </view>
                                <view class="c-font-normal c-color-mall">
                                    {{ cardInfo.desc }}
                                </view>
                            </view>
                            <view class="card-ticket-right c-gap-inner-right-xlarge c-tar">
                                <text class="c-font-medium-less c-font-small c-color-mall">￥</text>
                                <text class="card-ticket-right-discount c-font-sigma c-color-mall">
                                    {{ cardInfo.servicePayPrice || 0 }}
                                </text>
                                <view class="card-ticket-right-prime c-color-mall c-font-small c-gap-left-xsmall">
                                    ￥{{ cardInfo.primeCost }}
                                </view>
                                <view class="card-ticket-right-dash"/>
                            </view>
                        </view>
                        <!-- 服务推荐，待支付页面 -->
                        <view
                            v-else-if="cardInfo.type === 'unpaid'"
                            class="card-recommend c-radius c-gap-inner-left-large"
                        >
                            <view class="card-recommend-title c-font-17">
                                {{ cardInfo.title }}
                            </view>
                            <view class="c-font-normal">
                                {{ cardInfo.desc }}
                            </view>
                            <view class="card-recommend-price">
                                <text class="card-recommend-price-unit c-font-medium-less c-color-mall">￥</text>
                                <text class="card-recommend-price-discount c-font-17 c-color-mall">
                                    {{ cardInfo.servicePayPrice }}
                                </text>
                                <text class="card-recommend-price-prime c-font-small c-gap-left-xsmall">
                                    {{ cardInfo.primeCost }}
                                </text>
                            </view>
                        </view>
                    </template>
                    <view
                        v-if="info.btnText"
                        class="bottom-btn c-tac c-font-medium c-font-wb"
                        @tap="onBtnTap(info.payUrl)"
                    >
                        {{ info.btnText }}
                    </view>
                    <c-icon
                        name="close-circle"
                        class="close-btn"
                        font-size="40px"
                        @tap.stop="onClose(false)"
                    />
                </view>
            </view>
        </template>
    </view>
</template>

<script>
/**
 * @file 主诉挽留弹窗：优惠券提示、月卡升级、服务推荐
 * @description http://wiki.baidu.com/pages/viewpage.action?pageId=1682317815
 * @description yapi 'https://yapi.baidu-int.com/mock/19267/triage/coupon-debug'
 * @author gongjianmei
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import ImNoPayModal from './im-no-pay-modal';

import {request} from '@utils/request';
import {pay} from '@utils/pay';
import * as core from '@utils/core';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        ImNoPayModal
    },
    props: {
        /**
         * 内容
         */
        data: {
            type: Object,
            default: () => ({})
        },
        /**
         * 是否显示弹窗
         */
        isShowLeave: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 待支付页面，服务推荐
            unpaid: {
                title: '只差一步！名医为您1对1解答',
                subTitle: '限时特惠价，30分钟内有效',
                sanjiaquanwei: {
                    cardInfo: {
                        title: '三甲权威专家',
                        desc: '副主任以上医生 10年以上执业经验',
                        primeCost: '50'
                    }
                },
                jisuwenzhen: {
                    cardInfo: {
                        title: '极速问诊',
                        desc: '秒级响应 标准化务 自营保障',
                        primeCost: '10'
                    }
                },
                sanjiayisheng: {
                    cardInfo: {
                        title: '三甲医生',
                        desc: '公立三甲医院医生 平均1分钟响应',
                        primeCost: '20'
                    }
                },
                btnText: '去支付'
            },
            // triage页，主诉收集收集完成后
            serviceSelection: {
                // 升级月卡
                monthCardUpdate: {
                    title: '省81元要不要',
                    subTitle: '30天内5次咨询仅19.9元，未使用可退款',
                    btnText: '升级月卡',
                    cardInfo: {
                        content: [
                            {
                                'num': '1',
                                'unit': '次',
                                'type': '三甲问诊',
                                'cost': '9.9'
                            },
                            {
                                'num': '5',
                                'unit': '次',
                                'type': '三甲问诊',
                                'cost': '3.98',
                                'icon': 'https://med-fe.cdn.bcebos.com/wz/coupon-dialog/angle.png'
                            }
                        ]
                    }
                },
                // 免费图文
                tuwenFree: {
                    title: '您有一张免费咨询券',
                    subTitle: '优惠券将在{=validDay=}天内失效，请尽快使用',
                    btnText: '去咨询',
                    cardInfo: {
                        title: '普通问诊',
                        desc: '随机指派医生接诊',
                        primeCost: '3',
                        servicePayPrice: '0'
                    }
                },
                // 三甲
                sanjia: {
                    title: '您有一张三甲名医咨询券',
                    subTitle: '优惠券将在{=validDay=}天内失效，请尽快使用',
                    btnText: '去咨询',
                    cardInfo: {
                        title: '三甲医生',
                        desc: '公立三甲医院医生',
                        primeCost: '9.9'
                    }
                }
            },
            cardInfo: null,
            info: {}
        };
    },
    watch: {
        isShowLeave(v) {
            if (v && this.data && this.data.type !== 'beforePatientInfoCollect') {
                this.fomatData();
            }
        }
    },
    beforeUpdate() {
        if (this.data && this.data.type !== 'beforePatientInfoCollect') {
            this.fomatData();
        }
    },
    methods: {
        /**
         * 处理弹窗结果
         */
        fomatData() {
            const data = this.data;
            const {type, serviceType, servicePayPrice, payUrl, couponValiditySecond} = data;
            if (!type || !serviceType) {
                return;
            }

            const originInfo = this[type];
            if (!originInfo) {
                return;
            }

            const originSubInfo = originInfo[serviceType];
            if (!originSubInfo) {
                return;
            }

            const validDay = couponValiditySecond ? this.getCouponValidDay(couponValiditySecond) : 0;
            this.info = {
                title: originInfo.title || originSubInfo.title,
                subTitle: this.replaceText(originInfo.subTitle || originSubInfo.subTitle, validDay),
                btnText: originInfo.btnText || originSubInfo.btnText,
                payUrl
            };

            this.cardInfo = Object.assign({}, originSubInfo.cardInfo, {
                type,
                servicePayPrice,
                serviceType
            });
        },

        /**
         * 获取优惠券有效天数
         */
        getCouponValidDay(couponValiditySecond) {
            return Math.ceil(couponValiditySecond / (24 * 60 * 60));
        },

        /**
         * 替换文案
         */
        replaceText(text, validDay) {
            if (!text) {
                return '';
            }

            if (!validDay) {
                return text;
            }

            return text.replace(/\{\=validDay\=\}/g, validDay);
        },

        /**
         * 关闭弹窗
         *
         * @param {boolean} isStay 是否停留在当前页面
         */
        onClose(isStay) {
            this.$emit('closeModal', isStay);
        },

        /**
         * 点击按钮，去支付或去购买服务
         *
         * @param {string} payUrl 支付链接
         */
        onBtnTap: core.throttle(function (payUrl) {
            this.onClose(true);

            if (!payUrl) {
                return;
            }

            this.$api.showLoading({
                title: '正在跳转支付...'
            });

            request({
                url: payUrl,
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                this.$api.hideLoading();
                const data = res.data;
                if (!data) {
                    return;
                }

                const {payUrl, jumpMsUrl, toast} = data;
                if (payUrl) {
                    pay({
                        url: payUrl
                    });
                }
                else if (jumpMsUrl) {
                    navigate({
                        url: jumpMsUrl
                    });
                    return;
                }

                if (toast) {
                    this.$api.showToast({
                        title: toast,
                        icon: 'none'
                    });
                }
            });
        }, 2 * 1000)
    }
};
</script>

<style lang="less" scoped>
@color-1f1f1f: #1f1f1f;
@color-main: #00c8c8;

.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);

    .pop-content {
        position: relative;
        width: 3.31rem;
        padding: .21rem;
        background: #fff;
        border-radius: .21rem;
        box-sizing: border-box;

        .title {
            color: @color-1f1f1f;
            line-height: 1;
        }

        .sub-title {
            margin-top: .03rem;
            margin-bottom: .14rem;
        }

        /** 升级月卡 */
        .card-vip {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: .21rem;

            &-choice {
                position: relative;
                width: .867rem;
                height: 1.03rem;
                color: @color-1f1f1f;
                background: rgba(0, 200, 200, .06);
                // border: .5px solid @color-main;
                box-sizing: border-box;
                padding-top: .15rem;

                &-border {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 300%;
                    height: 300%;
                    transform: scale(0.33);
                    transform-origin: left top;
                    box-sizing: border-box;
                    border: 1px solid @color-main;
                    border-radius: .18rem;
                }

                &-num {
                    font-size: .32rem;
                    line-height: 1;
                    padding-bottom: .04rem;
                }

                &-price {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: .28rem;
                    line-height: .28rem;
                    color: #fff;
                    border-radius: 0 0 .06rem .06rem;
                    background-color: @color-main;
                }
            }

            &-arrow {
                width: .31rem;
                height: .23rem;
                margin: 0 .13rem;
                background: url('https://med-fe.cdn.bcebos.com/wz/coupon-dialog/arrow.png') no-repeat center center;
                background-size: 100% 100%;
            }

            .angle {
                &::before,
                &::after {
                    width: .3rem;
                    height: .16rem;
                    line-height: .16rem;
                    position: absolute;
                    top: -0.01rem;
                    left: -0.01rem;
                }

                &::before {
                    content: '';
                    background: url('https://med-fe.cdn.bcebos.com/wz/coupon-dialog/angle.png') no-repeat center;
                    background-size: 100% 100%;
                    z-index: 1;
                }

                &::after {
                    font-size: .12rem;
                    /** font-size: .1rem; */
                    transform: scale(.83);
                    content: '套餐';
                    color: #fff;
                    z-index: 2;
                }
            }
        }

        .card-ticket,
        .card-recommend {
            width: 100%;
            margin-bottom: .18rem;
            color: #1f1f1f;
        }

        /** 优惠券 */
        .card-ticket {
            width: 100%;
            height: .9rem;
            display: flex;
            background: #fff1f0 url('https://med-fe.cdn.bcebos.com/wz/coupon-dialog/card_bg_red.png') no-repeat top left;
            background-size: .67rem .55rem;

            &-left {
                flex-grow: 1;

                &-title {
                    margin-bottom: .04rem;
                }
            }

            &-right {
                width: .71rem;
                position: relative;
                padding-top: .17rem;

                &::after,
                &::before {
                    width: .1rem;
                    height: .1rem;
                    content: '';
                    position: absolute;
                    left: -0.05rem;
                    border-radius: 50%;
                    background-color: #fff;
                }

                &::after {
                    top: -0.05rem;
                }

                &::before {
                    bottom: -0.05rem;
                }

                &-dash {
                    position: absolute;
                    left: -0.005rem;
                    top: .08rem;
                    bottom: .08rem;
                    opacity: .3;
                    border-left: 1px dashed #fd503e;
                }

                &-discount {
                    font-weight: bold;
                }

                &-prime {
                    text-decoration: line-through;
                    margin-top: .02rem;
                }
            }
        }

        /** 服务推荐 */
        .card-recommend {
            width: 100%;
            height: .96rem;
            border: .01rem solid rgba(0, 200, 200, .1);
            box-sizing: border-box;
            background: rgba(0, 200, 200, .06) url('https://med-fe.cdn.bcebos.com/wz/coupon-dialog/card_bg_green.png') no-repeat top right;
            background-size: .68rem .87rem;

            &-title {
                font-weight: bold;
                margin: .11rem 0 .01rem 0;
            }

            &-price {
                margin-top: .01rem;
                display: flex;
                align-items: baseline;

                &-unit,
                &-discount {
                    font-weight: 600;
                }

                &-prime {
                    color: #b5b5b5;
                    text-decoration: line-through;
                }
            }
        }

        /** 按钮 */
        .bottom-btn {
            width: 100%;
            height: .4rem;
            line-height: .4rem;
            margin: 0 auto;
            color: #fff;
            background: #fff;
            background-image: linear-gradient(-45deg, #00d3ea 0%, #00cfa3 100%);
            box-shadow: 0 .03rem .07rem 0 rgba(0, 200, 200, .30);
            border-radius: .09rem;
        }
    }

    .close-btn {
        color: #fff;
        position: absolute;
        bottom: -0.64rem;
        left: calc(50% - 0.21rem);
    }
}
</style>
