<template>
    <view class="locker-order-info">
        <o-header
            :logo='orderInfo.stadium_logo'
            :source='orderInfo.stadium_name'
            :phone='orderInfo.mobile'
            :name='orderInfo.nickname'
            :status='pay_txt(orderInfo.pay_status)'
        ></o-header>
        <view class="loi-box">
            <view class="lb-tit">租用详情</view>
            <a-line :value="orderInfo.hardware_name || '-'">
                <block slot="name">设备名称：</block> 
            </a-line>
            <a-line :value="orderInfo.cabinet_name || '-'">
                <block slot="name">柜子编号：</block> 
            </a-line>
            <a-line :value="orderInfo.start_time || '-'">
                <block slot="name">租借时间：</block> 
            </a-line>
            <a-line :value="orderInfo.end_time || '-'">
                <block slot="name">归还时间：</block> 
            </a-line>
            <a-line :value="orderInfo.duration || '-'" value-color="#019874">
                <block slot="name">租借时长：</block> 
            </a-line>
        </view>
        <view class="loi-box">
            <view class="lb-tit">费用详情</view>
            <view class="lb-section" v-if="orderInfo.late_status">
                <view class="ls-header">
                    <view class="over-time"><text>超时时长：</text>{{ orderInfo.late_duration || '-' }}</view>
                    <view class="over-price">缴欠费金额：<text>￥{{ orderInfo.late_amount || 0 }}</text> （超时费用计算标准：{{ orderInfo.late_price_hint || '-' }}）</view>
                </view>
                <view class="lb-price">
                    <s-line :keyname="'商品金额小计'" :value="'¥' + (orderInfo.late_amount || 0)"></s-line>
                    <s-line :keyname="'金额折扣'" :value="'¥' + (orderInfo.late_discount_amount || 0)"></s-line>
                    <s-line :keyname="'积分抵扣'" :value="'¥' + (orderInfo.late_deduction_amount || 0)"></s-line>
                    <s-line :keyname="'优惠券优惠'" :value="'¥' + (orderInfo.late_coupons_amount || 0)"></s-line>
                    <view class="lp-total"><text>合计支付：</text>￥{{ orderInfo.late_pay_amount || 0 }}</view>
                </view>
                <view class="lb-line"></view>
                
                <view class="lb-pay-info">
                    <p-line :keyname="'下单时间'" :value="orderInfo.start_time || '-'" isbtn></p-line>
                    <p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'"></p-line>
                    <p-line :keyname="'支付方式'" :value="status_txt(orderInfo.pay_type)"></p-line>
                    <p-line :keyname="'交易流水号'" :value="orderInfo.trade_no || '-'"></p-line>
                </view>
            </view>
            <view class="lb-section">
                <view class="ls-header">
                    <view class="prestore-line">
                        <view>预寄存时长：{{ orderInfo.dimension || '-' }}</view>
                        <view>预寄存时长数量：{{ orderInfo.locker_price_number || 0 }}</view>
                    </view>
                    <view class="prestore-line">
                        <view>收费标准：{{ orderInfo.locker_price_hint || '-' }}</view>
                        <view>合计预寄存时长：{{ orderInfo.duration || '-' }}  </view>
                    </view>
                </view>
                <view class="lb-price">
                    <s-line :keyname="'商品金额小计'" :value="'¥' + orderInfo.amount || 0"></s-line>
                    <s-line :keyname="'金额折扣'" :value="'¥' + (orderInfo.discount_amount || 0)"></s-line>
                    <s-line :keyname="'积分抵扣'" :value="'¥' + (orderInfo.deduction_amount || 0)"></s-line>
                    <s-line :keyname="'优惠券优惠'" :value="'¥' + (orderInfo.coupons_amount || 0)"></s-line>
                    <view class="lp-total"><text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}</view>
                </view>
                <view class="lb-line"></view>
                
                <view class="lb-pay-info">
                    <p-line :keyname="'下单时间'" :value="orderInfo.start_time || '-'" isbtn></p-line>
                    <p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'"></p-line>
                    <p-line :keyname="'支付方式'" :value="status_txt(orderInfo.pay_type)"></p-line>
                    <p-line :keyname="'交易流水号'" :value="orderInfo.trade_no || '-'"></p-line>
                </view>
            </view>
        </view>
        <view class="loi-fixd-bar">
            <view @click="endBtn">结束计费</view>
        </view>
        <view class="loi-mask" v-if="isEndModal" @click="closeEndModal">
            <view class="lm-content" @click.stop="_=>false">
                <image class="lm-close" mode="aspectFit" src="/subpackage/order/static/images/close.png" @click="closeEndModal"></image>
                <view class="lc-tit">结束计费</view>
                <view class="lc-info">
                    <a-line :value="userInfo.username || '-'">
                        <block slot="name">操作人：</block> 
                    </a-line>
                    <a-line :value="orderInfo.total_duration || '-'" value-color="#019874">
                        <block slot="name">时长合计：</block> 
                    </a-line>
                    <a-line :value="orderInfo.late_amount || '-'" value-color="#ff873e">
                        <block slot="name">金额合计：</block> 
                    </a-line>
                </view>
                <view class="lc-ipt">
                    <view class="li-txt"><text>*</text>请输入金额</view>
                    <view class="li-frame"><input v-model="iptPrice" /></view>
                </view>
                <view class="lc-btn" @click="confirmEndBtn">确认</view>
            </view>
        </view>
    </view>
</template>

<script>
import header from '../../../components/header/header.vue';
import a_line from '../../../../../components/order_list/a_line/a_line.vue';
import s_line from '../../../components/s_line/s_line.vue';
import p_line from '../../../components/p_line/p_line.vue';
import { ORDER_API } from '../../../js/api';
import server from '../../../js/server';
import util from '../../../../../utils/util';
export default {
    components: {
        'o-header': header,
        'a-line': a_line,
        's-line': s_line,
        'p-line': p_line,
    },
    data(){
        return {
            orderInfo: {},
            isEndModal: false,
            iptPrice: '',
            userInfo: {},
        }
    },
    onLoad(options){
        this.getInfo(options.order_no);
    },
    methods: {
        // 支付类型
        status_txt: util.order_pay_type_txt,
        pay_txt(status){
            // status   全部  1,2,4    寄存中 1 已完成 2  已退款 4
            let _obj = {
                1: '寄存中',
                2: '已完成',
                4: '已退款'
            };
            return _obj[status] || '-'
        },
        openEndModal(){
            this.isEndModal = true;
        },
        closeEndModal(){
            this.isEndModal = false;
        },
        endBtn:util.debounce(function(){
            this.getCurUserInfo();
        }, 300, true),
        refreshInfo(){
            let { orderInfo } = this;
            this.closeEndModal();
            this.getInfo(orderInfo.order_no);
        },  
        getInfo(order_no){
            util.showLoad();
            server.get({
                url: ORDER_API.hardwareOrderGet,
                data: { order_no },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                this.orderInfo = res || {};
            })
        },
        getCurUserInfo(){
            util.showLoad();
            server.get({
                url: ORDER_API.currentUser,
                data: {  },
                failMsg: '加载用户信息失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _data = res || {};
                this.userInfo = _data;
                if(_data&&_data.id)this.openEndModal();
                console.warn('用户信息', res);
            })
        },
        confirmEndBtn: util.debounce(function(){
            let { orderInfo, iptPrice } = this;
            if(iptPrice == '')return util.showNone('请输入金额！');
            util.showLoad();
            server.get({
                url: ORDER_API.lockEndBill,
                data: { order_no: orderInfo.order_no, amount: iptPrice },
                isDefaultGet: false
            })
            .then(res=>{
                util.hideLoad();
                if(res.data.code == 0){
                    util.showNone(res.data.message || '操作成功！');
                    setTimeout(this.refreshInfo, 1200);
                    console.warn(res)
                }else{
                    util.showNone(res.data.message || '操作失败！');
                }
                console.warn(res);
            })
        }, 300, true),
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .locker-order-info{
        padding-bottom: 142upx;
        padding-bottom: calc( 142upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 142upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
    }
    .loi-box{
        margin-bottom: 24upx;
        padding: 30upx;
        background-color: #fff;
    }
    .lb-tit{
        margin-bottom: 18upx;
        font-size: 32upx;
        line-height: 44upx;
        color: #1A1A1A;
    }
    .lb-section{
        margin-bottom: 24upx;
        background-color: #f6f6f6;
        border-radius: 10upx;
        .ls-header{
            padding: 40upx 30upx;   
            border-radius: 10upx;
            background-color: #f1f1f1;
            .over-time{
                margin-bottom: 12upx;
                font-size: 28upx;
                line-height: 40upx;
                color: #e6081a;
                @include textHide(1);
                >text{
                    color: #333333;
                }
            }
            .over-price{
                line-height: 40upx;
                font-size: 28upx;
                color: #1A1A1A;
                >text{
                    color: #fe873d;
                }
            }
            .prestore-line{
                margin-bottom: 12upx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                >view{
                    flex-shrink: 0;
                    flex-grow: 0;
                    line-height: 40upx;
                    width: 50%;
                    font-size: 28upx;
                    color: #333333;
                }
            }
            
        }
        .lb-price{
            padding: 44upx 30upx 0;
            .lp-total{
                text-align: right;
                font-size: 28upx;
                font-weight: 500;
                color: #ff873d;
                @include textHide(1);
                >text{
                    font-weight: 400;
                    color: #1A1A1A;
                }
            }
        }
        .lb-line{
            margin: 20upx 0 0;
            height: 0;
            border-top: 2upx dashed #fff;
        }
        .lb-pay-info{
            padding: 40upx 30upx;
            
        }
    }
    .loi-fixd-bar{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10upx 24upx;
        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        background-color: #f2f2f7;
        >view{
            text-align: center;
            line-height: 112upx;
            border-radius: 10upx;
            font-size: 32upx;
            background-color: $themeColor;
            color: #fff;
        }
    }
    .loi-mask{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba($color: #000000, $alpha: .5);
        .lm-content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 80upx;
            width: 620upx;
            background-color: #fff;
            border-radius: 10upx;
            .lm-close{
                position: absolute;
                right: 30upx;
                top: 30upx;
                width: 34upx;
                height: 34upx;
            }
            .lc-tit{
                margin-bottom: 34upx;
                text-align: center;
                line-height: 44upx;
                font-size: 32upx;
                font-weight: 500;
                color: #1A1A1A;
            }
            .lc-info{
                margin-bottom: 34upx;
            }
            .lc-ipt{
                margin-bottom: 60upx;
                .li-txt{
                    margin-bottom: 8upx;
                    font-size: 28upx;
                    line-height: 40upx;
                    color: #1A1A1A;
                    >text{
                        color: #EA5061;
                    }
                }
                .li-frame{
                    padding: 0 20upx;
                    height: 88upx;
                    border-radius: 10upx;
                    border: 2upx solid #D8D8D8;
                    >input{
                        width: 100%;
                        height: 100%;
                        font-size: 28upx;
                        color: #1A1A1A;
                    }
                }
            }
            .lc-btn{
                margin: 0 auto;
                width: 240upx;
                line-height: 88upx;
                text-align: center;
                border-radius: 10upx;
                color: #fff;
                background-color: $themeColor;
                font-size: 32upx;
            }
        }
    }
</style>