<template>
    <view class="order-detail">
        <view class="od-header">
            <view class="oh-stadium">
                <image class="os-img" mode="aspectFit" :src="orderInfo.logo || ''"></image>
                <view class="os-name">{{ orderInfo.stadium_name || '-' }}</view>
            </view>
            <view class="oh-bot">
                <kv-line label="订单编号：">
                    <template slot="default">{{ orderInfo.order_no || '-' }}</template>
                    <template slot="right">
                        <view class="ob-status">{{ getPayStatusTxt(orderInfo.pay_status || -1) }}</view>
                    </template>
                </kv-line>
                <kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line>
                <kv-line label="手机号码：">{{ orderInfo.mobile || '-' }}</kv-line>
                <kv-line label="用户昵称：">{{ orderInfo.nick_name || '-' }}</kv-line>
                <kv-line label="来源：">{{ orderInfo.source || '-' }}</kv-line>
            </view>
        </view>

        <view class="od-goods">
            <view class="og-tit">订单信息</view>
            <view class="og-lines">
                <kv-line label="名称：">{{ orderInfo.water_card_name || '-' }}</kv-line>
                <kv-line label="水阀卡号：">{{ orderInfo.water_card_no || '-' }}</kv-line>
                <kv-line label="时长：">{{ orderInfo.duration_text || '-' }}</kv-line>
                <kv-line label="途径：">{{ orderInfo.desc || '-' }}</kv-line>
            </view>
        </view>

        <view class="od-price-info">
            <kvs-line label="金额小计">¥{{ orderInfo.amount || 0 }}</kvs-line>
            <kvs-line label="积分抵扣">-¥{{ orderInfo.deduction_amount || 0 }}</kvs-line>
            <kvs-line label="折扣金额">-¥{{ orderInfo.discount_amount || 0 }}</kvs-line>
            <kvs-line label="优惠券优惠">-¥{{ orderInfo.coupons_amount || 0 }}</kvs-line>
            <view class="opi-total">
                合计支付：<text class="ot-num">￥{{ orderInfo.pay_amount || 0 }}</text>
            </view>
        </view>

        <view class="od-pay-info">
            <view class="opi-tit">支付信息</view>
            <view class="opi-lines">
                <kv-line label="支付方式：">{{ _extension.pay_type_text || '-' }}</kv-line>
                <kv-line label="支付时间：">{{ orderInfo.pay_time || '-' }}</kv-line>
                <kv-line label="微信交易号：">{{ orderInfo.trade_no || '-' }}</kv-line>
            </view>
        </view>

        <!-- 退款列表 -->
        <block v-for="(e, i) in refundList" :key="i">
            <view class="od-space"></view>
            <order-refund-info
                :refund_price="e.amount || 0"
                :refund_no="e.refund_no || '-'"
                :refund_time="e.refund_time || '-'"
                :refund_reason="e.reason || '-'"
                :nameKey="i + 1"
            ></order-refund-info>
        </block>

        <order-refund-fixed
			:pay_amount="orderInfo.pay_amount || 0"
			:refund_amount="orderInfo.refund_amount || 0"
			:refund_times="(refundList&&refundList.length) || 0"
            @click:button="refunndBtn"
		></order-refund-fixed>

        <order-refund-modal
			ref="orderRefundModal"
		></order-refund-modal>
    </view>
</template>

<script>
import kv_line from "@/components/kv_line.vue";
import kvs_line from "@/components/kvs_line.vue";

import orderRefundFixed from '@/components/order_refund/fixed.vue'
import orderRefundModal from '@/components/order_refund/modal.vue';
import orderRefundInfo from '@/components/order_refund/info.vue';

import { SHOWER_API } from "../../js/api";
import server from "../../js/server";
import { routeTo, showLoad, hideLoad, showNone, formatDate } from "@/utils/util";
export default {
    components: {
        'kv-line': kv_line,
        'kvs-line': kvs_line,
        'order-refund-fixed': orderRefundFixed,
        'order-refund-modal': orderRefundModal,
        'order-refund-info': orderRefundInfo
    },
    computed: {
        _extension(){
            return this.orderInfo?.extension || {};
        }
    },
    data(){
        return {
            orderInfo: {},
            refundList: [],
        }
    },
    onLoad(options){
        this.getCardOrderDetails({
            id: options?.id,
            brand_id: options?.brand_id,
            order_no: options?.order_no
        })
        .then(res=>{
            if(res.order_no)this.getRefundInfo(res.order_no || '');
        })
    },
    methods: {
        refunndBtn(){
            let { orderInfo, _extension, refundList } = this;
            this.$refs.orderRefundModal.show({
                stadium_name: orderInfo?.stadium_name ?? '',
                order_no: orderInfo?.order_no ?? '',
                mobile: orderInfo?.mobile ?? '',
                refundable_amount:  +_extension?.refundable_amount || 0,
                refundable_integral: +_extension?.refundable_integral || 0,
                refund_times: refundList?.length || 0,
                confirm: e => {
                    console.log('confirm --->', e);
                    this.orderRefund({
                        order_no: orderInfo?.order_no || '',
                        amount: e.refund_amount || 0,
                        integral: e.refund_integral || 0,
                        brand_id: orderInfo?.brand_id || ''
                    })
                }
            });
        },
        orderRefund({ order_no = '', amount = 0, integral = 0, brand_id }){
            showLoad();
            server.post({
                url: SHOWER_API.orderRefund,
                data: { order_no, amount, integral, brand_id },
                isDefaultGet: false
            })
            .then(res=>{
                hideLoad();
                if(res.data.code == 0){
                    showNone(res.data.message || '操作成功！');
                }else{
                    showNone(res.data.message || '操作失败！');
                }
            })
            .catch(hideLoad)
            .finally(_=>
                setTimeout(_=>{
                    let { orderInfo } = this;
                    this.getCardOrderDetails({
                        id: orderInfo?.id,
                        order_no: orderInfo?.order_no,
                        brand_id: orderInfo?.brand_id,
                    })
                    .then(res=>{
                        if(res.order_no)this.getRefundInfo(res.order_no || '');
                    })
                }, 1200)
            );
        },
        async getRefundInfo(order_no){
            try{
                let _refundRes = await this.$store.dispatch('getOrderRefundList', order_no);
                let _ls = _refundRes?.data?.data?.list || [];
                this.refundList = _ls;
            }catch(err){
                console.warn('shower order detail getRefundInfo err', err);
            }
        },
        getPayStatusTxt(payStatus){
            let _txt = '';
            switch(payStatus){
                case 0: _txt = '未支付'; break;
                case 1: _txt = '已支付'; break;
                case 2: _txt = '已使用'; break;
                case 4: _txt = '已退款'; break;
                case 5: _txt = '退款中'; break;
                case 6: _txt = '拒绝退款'; break;
                case 7: _txt = '关闭支付'; break;
                case 8: _txt = '使用中'; break;
                default: _txt = '-';
            }
            return _txt;
        },
        getCardOrderDetails({
            id = '', brand_id = '', order_no = ''
        }){
            showLoad();
            return server.get({
                url: SHOWER_API.cardOrderDetails,
                data: { brand_id, id, order_no },
                failMsg: '获取信息失败'
            })
            .then(res => {
                hideLoad();
                return this.orderInfo = res || {};
            })
            .catch(err => {
                hideLoad();
                console.warn('shower order details err --->', err);
            })
        },
    }
}
</script>

<style lang="scss">
    .order-detail{
        @include isPd(24upx);
        .od-space{
            padding-top: 24upx;
        }
        .od-header{
            padding: 0 24upx;
            background: #fff;
            .oh-stadium{
                padding: 24upx 0;
                border-bottom: 1px solid #D8D8D8;
                @include ctf;
                .os-img{
                    flex-shrink: 0;
                    margin-right: 14upx;
                    width: 40upx;
                    height: 40upx;
                }
                .os-name{
                    @include flcw(28upx, 40upx, #1A1A1A, 500);
                    @include tHide;
                }
            }
            .oh-bot{
                padding-top: 24upx;
                padding-bottom: 30upx;
                .ob-status{
                    text-align: right;
                    @include flcw(28upx, 40upx, #9A9A9D);
                }
            }
        }
        .od-goods{
            margin-top: 24upx;
            padding: 20upx 24upx 0;
            background: #fff;
            
            .opi-tit{
                @include flcw(32upx, 44upx, #1A1A1A);
            }
            .og-lines{
                margin-top: 28upx;
                padding-bottom: 30upx;
                border-bottom: 1px solid #D8D8D8;
            }

        }
        .od-price-info{
            padding: 30upx;
            background: #fff;
            .opi-total{
                text-align: right;
                @include flcw(28upx, 50upx, #9A9A9D);
                .ot-num{
                    color: #1A1A1A;
                    font-weight: 500;
                }
            }
        }
        .od-pay-info{
            margin-top: 24upx;
            padding: 30upx 24upx;
            background: #fff;
            .opi-tit{
                @include flcw(32upx, 44upx, #1A1A1A);
            }
            .opi-lines{
                margin-top: 16upx;
                .ob-copy{
                    margin-left: 20upx;
                    @include flcw(28upx, 40upx, $mColor);
                }
            }
        }
    }
</style>