<template>
    <view class="page-index" :style="{ paddingTop: height + 'px' }">
        <view class="hd">
            <view class="info">
                <view class="info-hd">付款给</view>
                <view class="info-bd">{{ hospName }}</view>
            </view>
            <view class="info-icon">
                <!-- <image class="info-icon-img" src="../..//assets/info-icon.png" alt="" /> -->
            </view>
            <view class="bg"></view>
        </view>
        <view class="bd">
            <view class="box">
                <view class="box-hd">
                    <view class="box-hd-label">费用总额</view>
                    <view class="box-hd-value">{{ settlmentData.totalFee > 0 ? settlmentData.totalFee : 0 }} 元</view>
                </view>
                <view class="box-bd">
                    <view class="box-item">
                        <view class="box-bd-label">医保基金支付</view>
                        <view class="box-bd-value">{{ settlmentData.insujjamt > 0 ? settlmentData.insujjamt : 0 }} 元</view>
                    </view>
                    <view class="box-item">
                        <view class="box-bd-label">个人帐户支付</view>
                        <view class="box-bd-value">{{ settlmentData.insugrzhamt > 0 ? settlmentData.insugrzhamt : 0 }} 元
                        </view>
                    </view>
                    <!-- <view class="box-item">
                        <view class="box-bd-label">其他抵扣金额</view>
                        <view class="box-bd-value">233元</view>
                    </view> -->
                </view>
                <view class="box-ft">
                    <view class="box-ft-label">现金支付</view>
                    <view class="box-ft-value">{{ settlmentData.cashamt > 0 ? settlmentData.cashamt : 0 }} 元</view>
                </view>
                <!-- <view class="box-append" bindtap="handleActionsheet">查看明细</view> -->
            </view>
            <view class="bd-append">
                <i class="bd-append-icon"></i>
                <view class="bd-append-text">医保移动支付</view>
            </view>
            <!-- {{ settlmentData.payTradeNum }} -->
        </view>
        <view class="ft">
            <view class="pay">
                <view class="pay-label">您还需支付：</view>
                <view class="pay-value">¥{{ settlmentData.cashamt > 0 ? settlmentData.cashamt : 0 }} 元</view>
            </view>
            <button class="btn" :type="isSubmit ? 'default':''" @tap.stop="healthPay" :loading="isSubmit" :disabled="isSubmit">去支付</button>
        </view>
        <view class="actionsheet" :hidden="!actionsheetVisible">
            <view class="actionsheet-mask" @tap="handleActionsheet"></view>
            <scroll-view scroll-y class="actionsheet-panel">
                <view class="actionsheet-hd">
                    <view class="actionsheet-hd-tt">处方明细</view>
                    <icon class="actionsheet-icon-close" @tap="handleActionsheet"></icon>
                </view>
                <view class="actionsheet-bd">
                    <view class="actionsheet-box" v-for="(item,index) in prescriptionList" :key="'title'+ index">
                        <view class="actionsheet-box-hd">{{ item.title }}</view>
                        <view class="actionsheet-box-bd">
                            <view class="actionsheet-box-item" v-for="(boxItem,label) in item.list" :key="label">
                                <view class="actionsheet-box-item-label-wrap">
                                    <view class="actionsheet-box-item-label">{{ boxItem.label }}</view>
                                    <view class="actionsheet-box-item-sublabel">{{ boxItem.subLabel }}</view>
                                </view>
                                <view :class="'actionsheet-box-item-value '+ (boxItem.highlight?'em':'')">{{ boxItem.value }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import $http from "@/utils/https";
    import Util from "@/utils/utils";
    const app = getApp()
    let timer = null;
    export default {
        props: {
            hospCode: {
                type: String,
                default: ''
            },
            hospName: {
                type: String,
                default: ''
            },
            settlmentData: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                height: app.globalData.height,
                infoByTrandNoFlag: false,
                infoByTrandNo: 0,
                payTradeNum: "", ///就诊ID
                prescribeTradeNum: "",
                prescriptionList: [{
                        title: '就诊信息',
                        list: [{
                                label: '门诊类别',
                                value: '门(急)诊'
                            },
                            {
                                label: '门诊科室',
                                value: '普通内科'
                            },
                            {
                                label: '医生姓名',
                                value: '张三'
                            },
                            {
                                label: '处方时间',
                                value: '2021/06/08 14:54:00'
                            },
                            {
                                label: '费用总额',
                                value: '368.50元',
                                highlight: true
                            },
                        ]
                    },
                    {
                        title: '诊断信息',
                        list: [{
                                label: '诊断名称',
                                value: '外伤肿胀'
                            },
                            {
                                label: '诊断编号',
                                value: 'E3D.25'
                            },
                        ]
                    },
                    {
                        title: '特殊信息',
                        list: [{
                                label: '病情名称',
                                value: '高血压'
                            },
                            {
                                label: '病情编号',
                                value: '2220003495858'
                            },
                        ]
                    },
                    {
                        title: '费用信息',
                        list: [{
                                label: '万通胫骨贴*1',
                                subLabel: '8g/片/3',
                                value: '37.80元'
                            },
                            {
                                label: '阿莫西林*1',
                                subLabel: '8g/片/3',
                                value: '7.80元'
                            },
                        ]
                    },
                    {
                        title: '其他抵扣金额',
                        list: [{
                                label: '住院押金抵扣',
                                value: '50元'
                            },
                            {
                                label: '医院负担金额抵扣',
                                value: '50元'
                            },
                        ]
                    },
                ],
                actionsheetVisible: false,
                queryOrderStatus: false,
                isSubmit: false,
            }
        },
        onShow: function(options) {
            // console.log('医保支付成功后返回参数：')
            // console.log('queryOrderStatus:' + this.data.queryOrderStatus)
            if (this.queryOrderStatus) {
                this.getPayStatus()
            }
        },
        methods: {
            healthPay() {
                const self = this
                console.log('healthPay settlmentData', this.settlmentData)
                this.healthPayDeal(this.settlmentData, false, function() {
                    console.log("打开医保支付成功。")
                    self.setData({
                        queryOrderStatus: true
                    })
                }) // 医保移动支付
            },

            // 医保移动支付
            healthPayDeal(data, isjump, callback) {
                console.log(data)
                const self = this
                const wechat_redirect = 'pages/index/pages/videoConsultation/waitYbSettlement/index?success=Y'
                if (self.isSubmit) return
                console.log('platform', app.globalData.platform)
                const platform = app.globalData.platform;
                if (platform == 'alipay') {
                    my.tradePay({
                        orderStr: data.orderStr, // JAVA服务端SDK生成APP支付订单信息
                        success: (res) => {
                            console.log('支付结果:', res)
                            if (+res.resultCode == 8000 || +res.resultCode == 9000) {
                                this.getPayStatus()
                            } else {
                                my.alert({
                                    title: '温馨提示',
                                    content: res.memo,
                                    buttonText: '关闭'
                                });
                            }

                        },
                        fail: (res) => {
                            my.alert({
                                content: JSON.stringify(res),
                            });
                        }
                    })
                } else {
                    uni.navigateToMiniProgram({
                        appId: data.pay_appid,
                        path: data.pay_url,
                        success(res) {
                            console.log("打开医保支付成功")
                            self.setData({
                                isSubmit: true
                            })
                            // 打开成功
                            typeof callback == 'function' && callback()
                        },
                        fail(error) {
                            console.log("打开医保支付失败")
                            self.setData({
                                isSubmit: false
                            })
                        },
                        complete(res) {
                            console.log('navigateToMiniProgram complete:', res)
                            if (isjump) {
                                uni.reLaunch({
                                    url: '/pages/tabBar/order/order?flag=Y',
                                })
                            }
                        }
                    })
                }
            },

            setPaymethodStatus(bol) {
                this.setData({
                    isSubmit: false
                })
            },

            // 获取支付状态
            getPayStatus() {
                const self = this
                const {
                    platform
                } = app.globalData
                return new Promise((resolve, reject) => {
                    let userData = uni.getStorageSync('userData');
                    let {
                        settlmentData,
                        infoByTrandNo,
                        infoByTrandNoFlag
                    } = self;
                    if (!infoByTrandNoFlag) {
                        infoByTrandNo++
                        self.setData({
                            infoByTrandNo
                        })
                        console.log(self.infoByTrandNo)
                        if (self.infoByTrandNo > 3) {
                            uni.hideLoading();
                            self.setData({
                                infoByTrandNo: 0,
                                isSubmit: false
                            })
                            return
                        }
                    }
                    let data = {
                        params: [{
                            hospitalCode: userData.hisHospID || '',
                            userCode: platform == 'alipay' ? "alisf" : "wxsf",
                            payTradeNum: settlmentData.payTradeNum
                        }]
                    }
                    console.log(data)
                    uni.showLoading({
                        title: '订单状态查询中',
                    })
                    $http.post("urlS", self, {
                        code: "130980", // "13990700001" 
                        data: data,
                        namespace: "UPP",
                        success: function(res) {
                            console.log('支付状态查询结果：')
                            console.log(res)
                            if (res.errorCode == 'UN') {
                                uni.showToast({
                                    icon: "error",
                                    title: res.errorMessage,
                                    duration: 5000,
                                })
                            } else if (+res.errorCode === 0) {
                                uni.hideLoading();
                                self.setData({
                                    infoByTrandNoFlag: true
                                }, () => {
                                    self.triggerEvent('statusChange', {
                                        paySuccessStatus: true
                                    })
                                    uni.reLaunch({
                                        url: '../../../common/paySuccess/paySuccess?payAmtInt=' + settlmentData.totalFee +
                                            '&flag=' + settlmentData.flag +
                                            '&payTradeNum=' + settlmentData.payTradeNum +
                                            '&prescribeTradeNum=' + settlmentData.prescribeTradeNum
                                    })
                                })
                            } else if (res.errorCode == 'UN') { // 医保支付成功，HIS保存未成功，跳转账单已罚款页面
                                uni.switchTab({
                                    url: '../../pages/tabBar/order/order?tab=1',
                                })
                            } else {
                                if (self.infoByTrandNo == 3) {
                                    uni.hideLoading()
                                    uni.showToast({
                                        icon: 'none',
                                        title: res.errorMessage
                                    })
                                    self.triggerEvent('statusChange', {
                                        paySuccessStatus: false
                                    })
                                    self.setPaymethodStatus() // 设置按钮可点击
                                } else if (self.infoByTrandNo < 3) {
                                    self.getPayStatus()
                                }
                            }
                        },
                        error: function(error) {
                            uni.showToast({
                                icon: 'none',
                                title: '失败',
                            })
                        }
                    })
                })
            },

            handleActionsheet() {
                this.actionsheetVisible = !this.actionsheetVisible;
                this.setData({
                    actionsheetVisible: this.actionsheetVisible
                });
            },
        }
    }
</script>


<style>
    .page-index {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .hd {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        color: #fff;
        padding: 64rpx 40rpx 40rpx 40rpx;
        box-sizing: border-box;
    }

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 340rpx;
        background-color: #3B71E8;
        border-radius: 0 0 60rpx 60rpx;
        z-index: 0;
    }

    .info {
        position: relative;
        z-index: 1;
        color: #fff;
    }

    .info-hd {
        font-size: 28rpx;
        line-height: 40rpx;
        color: rgba(255, 255, 255, 0.6);
    }

    .info-bd {
        font-size: 36rpx;
        line-height: 50rpx;
        margin-top: 6rpx;
        font-weight: bold;
    }

    .info-icon {
        position: relative;
        z-index: 1;
        width: 80rpx;
        height: 80rpx;
    }

    .info-icon-img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .bd {
        flex: 1;
        position: relative;
        z-index: 1;
    }

    .box {
        border-radius: 16rpx;
        background-color: #fff;
        margin: 0 40rpx;
        padding: 0 40rpx;
        padding-bottom: 34rpx;
        box-shadow: 0 6rpx 20rpx #E6E6E6;
    }

    .box-hd {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 48rpx 0 36rpx;
        color: #606266;
    }

    .box-hd:before {
        content: '';
        position: absolute;
        left: -16rpx;
        bottom: 0;
        right: -16rpx;
        border-bottom: 2rpx dashed #D8D8D8;
        transform: scaleY(0.5);
    }

    .box-hd-label {
        font-weight: bold;
    }

    .box-hd-value {
        font-weight: bold;
    }

    .box-bd {
        padding-top: 38rpx;
    }

    .box-item {
        display: flex;
        justify-content: space-between;
        color: #909399;
        font-size: 28rpx;
        line-height: 40rpx;
        padding-bottom: 20rpx;
    }

    .box-item:last-child {
        padding-bottom: 0;
    }

    .box-ft {
        display: flex;
        justify-content: space-between;
        padding-top: 40rpx;
        padding-bottom: 34rpx;
        font-size: 32rpx;
        color: #3B71E8;
    }

    .box-ft-label {
        font-weight: bold;
    }

    .box-ft-value {
        font-weight: bold;
    }

    .box-append {
        position: relative;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #606266;
        text-align: center;
        padding: 40rpx 0 6rpx;
    }

    .box-append:before {
        content: '';
        position: absolute;
        left: -16rpx;
        top: 0;
        right: -16rpx;
        border-top: 2rpx dashed #D8D8D8;
        transform: scaleY(0.5);
    }

    .bd-append {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 64rpx;
        margin-bottom: 64rpx;
    }

    .bd-append-icon {
        display: block;
        width: 80rpx;
        height: 24rpx;
        background: url('data:image/png;base64,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') center center no-repeat;
        background-size: 100% 100%;
        margin-right: 16rpx;
    }

    .bd-append-text {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #909399;
        font-weight: bold;
    }

    .ft {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 28rpx;
        padding-left: 32rpx;
        padding-right: 32rpx;
        padding-bottom: calc(28rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
    }

    .pay {
        display: flex;
    }

    .pay-label {
        font-size: 32rpx;
        line-height: 48rpx;
        color: rgba(0, 0, 0, 0.6);
        margin-right: 10rpx;
    }

    .pay-value {
        font-size: 44rpx;
        line-height: 48rpx;
        color: #3B71E8;
        font-weight: bold;
    }

    .btn {
        font-size: 36rpx;
        font-weight: bold;
        line-height: 48rpx;
        color: #fff;
        background-color: #0D7CFF;
        padding: 20rpx 46rpx;
        border-radius: 48rpx;
        margin: 0;
    }

    .btn::after {
        border: 0;
    }

    .ft {
        display: flex;
        justify-content: space-between;
    }

    .ft:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        border-top: 2rpx solid rgba(0, 0, 0, 0.2);
        transform: scaleY(0.5);
    }
</style>