<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="支付订单"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <u-card title="支付信息">
                <view slot="body" class="payBd">
                    <view
                        class="price"
                    >¥ {{currentOrder.FSHAmount}}元</view>
                </view>
                <view slot="foot" class="payFt">
                    <view class="line">
                        <view class="linetitle">应付金额：</view>
                        <view
                            class="linecontent"
                        >¥ {{currentOrder.FSHAmount}}</view>
                    </view>
                    <view class="line">
                        <view class="linetitle">实付金额：</view>
                        <view
                            class="linecontent"
                        >¥ {{currentOrder.FSHAmount}}</view>
                    </view>
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{margin: '16rpx 32rpx',backgroundColor: '#ffcb57',color: '#472d21'}"
                    hover-class="defaultBtnhover"
                    @click="placeOrder"
                >立即支付</u-button>
            </view>
        </view>
        <u-modal
            v-model="showModal"
            content="您的余额不足，请充值"
            confirm-text="去充值"
            confirm-color="#ffcb57"
            @confirm="goRecharge"
        ></u-modal>
        <u-modal
            v-model="showPswModal"
            content="请先设置支付密码"
            confirm-color="#ffcb57"
            @confirm="goChangePsw"
        ></u-modal>
        <u-modal
            v-model="showPswTips"
            content="请联系企业管理员设置支付密码"
            confirm-color="#ffcb57"
        ></u-modal>
        <u-keyboard
            default
            ref="uKeyboard"
            mode="number"
            :mask="true"
            :mask-close-able="false"
            :dot-enabled="false"
            v-model="showPay"
            :safe-area-inset-bottom="true"
            :tooltip="false"
            @change="onChange"
            @backspace="onBackspace"
        >
            <view>
                <view class="u-flex u-row-center u-m-t-48">
                    <u-message-input
                        mode="box"
                        :maxlength="6"
                        :dot-fill="true"
                        v-model="password"
                        :disabled-keyboard="true"
                        @finish="finish"
                    ></u-message-input>
                </view>
                <view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
            </view>
        </u-keyboard>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            showModal: false,
            showPswModal: false,
            password: '',
            showPay: false,
            showPswTips: false
        };
    },
    onLoad() {
        console.log(this.currentOrder)
    },
    computed: {
        ...mapGetters({
            currentOrder: 'order/currentOrder',
            curUserinfo: 'user/displayUserInfo',
            userDetail: 'user/userDetail',
        }),
    },
    methods: {
        goChangePsw() {
            this.$u.route('/pages/password/pay/index');
        },
        placeOrder() {
            // 未设置支付密码
            if (this.userDetail.FPayPassword === ' ') {
                if (this.userDetail.FUserType === '1') {
                    this.showPswTips = true;
                    return;
                }
                this.showPswModal = true;
                return;
            }
            // 余额不足付款
            if (this.curUserinfo.balance < this.currentOrder.FSFQuotedPriceEntity[0].FSFQuotedPriceAmount) {
                this.showModal = true;
                return;
            }
            // 输入支付密码
            this.showPay = true;
        },
        goRecharge() {
            this.$u.route('/pages/recharge/index');
        },
        onChange(val) {
            if (this.password.length < 6) {
                this.password += val;
            }
            if (this.password.length >= 6) {
                if (this.password === this.userDetail.FPayPassword) {
                    this.pay();
                } else {
                    this.$refs.uToast.show({
                        title: '密码错误！',
                    });
                }
            }
        },
        pay() {
            this.showPay = false;
            uni.showLoading({
                title: '支付中',
            });
            request
                .post('/api/Order/Pay', {
                    FID: this.currentOrder.Id,
                    FSHSAmount: this.currentOrder.FSHAmount,
                    FStatus: 'YZF'
                })
                .then((res) => {
                    uni.hideLoading();
                    const { code, message } = res;
                    if (code === 0) {
                        this.$refs.uToast.show({
                            title: '订单已支付',
                            isTab: true,
                            url: '/pages/orders/index',
                        });
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        onBackspace(e) {
            if (this.password.length > 0) {
                this.password = this.password.substring(0, this.password.length - 1);
            }
        },
        finish() {
            console.log(11111);
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .payBd {
            padding: 48rpx 0;
            .price {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 48rpx;
                color: #f5222d;
            }
        }
        .payFt {
            .title {
                margin-bottom: 24rpx;
                font-size: 32rpx;
                color: #262626;
            }
            .line {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10rpx;
                .linecontent {
                    font-size: 24rpx;
                    color: #262626;
                }
            }
        }
    }
}
</style>
