<template>
	<view class="timing-details">
		<view class="td-head">
			<view class="th-store">
				<image :src="orderInfo.stadium_logo || ''"></image>
				<view>{{orderInfo.stadium_name || '-'}}</view>
			</view>
			<view class="th-line">
				<view>订单编号：<text>{{orderInfo.order_no || '-'}}</text></view>
				<view><text :class="[orderInfo.pay_status == 0?'tl-active':'']">{{zh_order_status(orderInfo.pay_status)}}</text></view>
			</view>
			<view class="th-line">
				<view>创建时间：<text>{{orderInfo.model.created_at || '-'}}</text></view>
			</view>
			<view class="th-line">
				<view>用户昵称：<text>{{orderInfo.nickname || '-'}}</text></view>
			</view>
		</view>
		<view class="td-box">
			<view class="tb-title">计时信息</view>
			<view class="tb-line">
				<!-- 项目 场时有 人时没有  order_type: 1场时  2人时  -->
				<view v-if="orderInfo.order_type==1">项目：<text>{{orderInfo.project_name || '-'}}({{orderInfo.venue_name || '-'}})</text></view>
				<view>进场时间：<text>{{orderInfo.start_time || '-'}}</text></view>
				<!-- 离场时间 已完成显示 -->
				<view v-if="orderInfo.pay_status != 0">离场时间：<text>{{orderInfo.end_time || '-'}}</text></view>
				<view>时长合计：<text>{{orderInfo.extension.duration || '-'}}</text></view>
			</view>
			<view class="tb-section" v-if="!(orderInfo.pay_status== 0&&orderInfo.early_end_timing==false)">
				<view class="ts-line">
					<view>金额小计</view>
					<view>¥{{orderInfo.amount || 0}}</view>
				</view>
				<view class="ts-line">
					<view>积分抵扣</view>
					<view>-¥{{orderInfo.deduction_amount ||0}}</view>
				</view>
				<view class="ts-line">
					<view>折扣金额</view>
					<view>-¥{{orderInfo.discount_amount||0}}</view>
				</view>
				<view class="ts-line">
					<view>优惠券优惠</view>
					<view>-¥{{orderInfo.coupons_amount || 0}}</view>
				</view>
				<view class="ts-total">
					<view>合计支付：<text>￥</text><text>{{orderInfo.pay_amount ||0}}</text></view>
				</view>
			</view>
		</view>
		<view class="td-box" v-if="orderInfo.pay_status != 0">
			<view class="tb-title">支付信息</view>
			<view class="tb-line">
				<view>支付方式：<text>{{zh_pay_type(orderInfo.pay_type)}}</text></view>
				<view>支付时间：<text>{{orderInfo.pay_time || '-'}}</text></view>
				<view v-if="orderInfo.pay_type==0">微信交易号：<text>{{orderInfo.trade_no || ''}}</text></view>
				<view v-if="orderInfo.pay_type==3">操作人：<text>{{orderInfo.end_bill_operator_name || ''}}</text></view>
			</view>
		</view>
		
		
		<!-- 退款列表 -->
		<view v-for="(e, i) in refundList" :key="i" style="padding: 24rpx 24rpx 0;">
			<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>
		</view>

		<view class="td-btn" @click="isEndBill = true" v-if="orderInfo.pay_status == 0&&orderInfo.early_end_timing==false">结束计费</view>
		<view class="td-btn" @click="completeBtn"  v-if="orderInfo.pay_status == 0&&orderInfo.early_end_timing==true">完结订单</view>

        <!-- 退款按钮拦 -->
        <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>
		
		<!-- 结束计费弹框 -->
		<end-billing-modal 
			v-if="isEndBill==true"
			@close="isEndBill=false"
			@timeEndBtn="timeEndBtn"
			:orderInfo="orderInfo"
		></end-billing-modal>
		<!-- 退款弹窗 -->
        <order-refund-modal
			ref="orderRefundModal"
		></order-refund-modal>
	</view>
</template>

<script>
import util from '@/utils/util';
import { ORDER_API } from '../../js/api';
import server from '../../js/server';
import { mapState } from 'vuex';
import end_billing_modal from '@/components/end_billing_modal/end_billing_modal.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';
export default {
	components: {
		'end-billing-modal': end_billing_modal,
        'order-refund-fixed': orderRefundFixed,
        'order-refund-modal': orderRefundModal,
		'order-refund-info': orderRefundInfo
	},
	computed: {
		...mapState(['brandInfo']),
		zh_order_status(){
			// 订单状态 0计费中1已完成
			let { orderInfo } = this
			return status =>{
				const _obj = {
					'0': orderInfo.early_end_timing==true?'待支付':'计费中',
					'1': '已完成',
					'4': '已退款',
				}
				return _obj[`${status}`] || '-'
			}
		},
	},
	data() {
		return {
			isEndBill: false,
            orderInfo: {},
			refundList: [], // 退款列表
		}
	},
    onLoad(options){
        this.getOrderInfo({
            order_no: options?.order_no || '',
            stadium_id: options?.stadium_id || ''
        })
        this.getRefundTimes(options?.order_no || '');
    },
	methods: {
        refunndBtn(){
            let { orderInfo,  refundList } = this;
            this.$refs.orderRefundModal.show({
                stadium_name: orderInfo?.stadium_name ?? '',
                order_no: orderInfo?.order_no ?? '',
                mobile: orderInfo?.mobile ?? '',
                refundable_amount: orderInfo?.extension?.refundable_amount ?? 0,
                refundable_integral: orderInfo?.extension?.refundable_integral ?? 0,
                refund_times: refundList?.length || -1,
                confirm: e => {
                    this.orderRefund({
                        order_no: orderInfo?.order_no || '',
                        amount: e.refund_amount || 0,
                        integral: e.refund_integral || 0,
                        stadium_id: orderInfo?.stadium_id || ''
                    })
                }
            });
        },
        orderRefund({ order_no = '', amount = 0, integral = 0, stadium_id = ''}){
            util.showLoad();
            server.get({
                url: ORDER_API.orderRefund,
                data: { order_no, amount, integral },
                isDefaultGet: false
            })
            .then(res=>{
                util.hideLoad();
                if(res.data.code == 0){
                    util.showNone(res.data.message || '操作成功！');
                }else{
                    util.showNone(res.data.message || '操作失败！');
                }
            })
            .catch(util.hideLoad)
            .finally(_=>setTimeout(_=>{
                this.getOrderInfo({ order_no, stadium_id });
                this.getRefundTimes(order_no);
            }, 1200));
        },
        async getRefundTimes(order_no){
            try{
                let _refundRes = await this.$store.dispatch('getOrderRefundList', order_no);
                let _refundLs = _refundRes?.data?.data?.list || [];
				this.refundList = _refundLs;
            }catch(err){
                console.warn('getRefundTimes err', err);
            }
        },
        getOrderInfo({ order_no, stadium_id }){
            util.showLoad();
            server.get({
                url: ORDER_API.timeOrderDetail,
                data: { order_no, stadium_id },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad()
                this.orderInfo = res || {}
            })
            .catch(util.hideLoad)
        },
        zh_pay_type: util.order_pay_type_txt,
		completeBtn(){
			this.$emit('completeBtn');
		},
		
		timeEndBtn(){
            let { orderInfo } = this;
            this.getOrderInfo({
                order_no: orderInfo?.order_no || '',
                stadium_id: orderInfo?.stadium_id || ''
            })
		},
        // 计时订单-完结订单
        completeBtn(){
            let { orderInfo } = this
            util.showModal({
                title: '提示',
                content: '是否确认完结订单？',
                showCancel: true,
                success: modalRes=>{
                    if(modalRes.confirm)this.timeOrderComplete({
                        brand_id: orderInfo?.brand_id || '',
                        order_no: orderInfo?.order_no || '',
                        stadium_id: orderInfo?.stadium_id || ''
                    })
                }
            })
        },
        //计时订单完结 请求
        timeOrderComplete({ brand_id, order_no, stadium_id }){
            util.showLoad();
            server.get({
                url: ORDER_API.timeOrderComplete,  //计时订单完结
                data: { brand_id, order_no },
                failMsg: '请求失败！'
            })
            .then(res=>{
                util.hideLoad();
                util.showNone('操作成功！');

                setTimeout(_=>{
                    this.getOrderInfo({ order_no, stadium_id });
                    util.previousPageFunction({
                        fnName: 'refreshList',
                        query: { isLoad: false},
                    });
                }, 1200)
            })
            .catch(util.hideLoad)
        }
	}
}
</script>

<style lang="scss" >
.timing-details{
	margin-bottom: 24rpx;
	.td-head{
		margin: 24rpx 24rpx 0rpx;
		padding: 30rpx;
		background-color: #FFF;
		border-radius: 10rpx 10rpx 0px 0px;
		.th-store{
			padding-bottom: 26rpx;
			margin-bottom: 18rpx;
			border-bottom: 2rpx solid #D8D8D8;
			display: flex;
			justify-content: flex-start;
			>image{
				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
			}
			>view{
				flex-grow: 1;
				margin-left: 14rpx;
				color: #333333;
				font-size: 28rpx;
			}
		}
		.th-line{
			margin-top: 8rpx;
			@include ctf(space-between);
			>view{
				line-height: 40rpx;
				font-size: 28rpx;
				&:first-child{
					color: #9A9A9D;
					>text{
						color: #333333;
					}
				}
				&:nth-child(2){
					>text{
						color: #9A9A9D;
					}
					.tl-active{
						color: $mColor;
					}
				}
			}
		}
	}
	.td-box{
		margin: 24rpx 24rpx 0rpx;
		padding: 30rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		.tb-title{
			color: #9A9A9D;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.tb-line{
			>view{
				line-height: 52rpx;
				font-size: 28rpx;
				color: #9A9A9D;
				>text{
					color: #333333;
				}
			}
			
		}
		.tb-section{
			margin-top: 30rpx;
			border-top: 2rpx solid #D8D8D8;
			.ts-line{
				margin-top: 26rpx;
				@include ctf(space-between);
				>view{
					color: #333333;
					&:first-child{
						font-size: 28rpx;
					}
					&:nth-child(2){
						font-size: 24rpx;
						margin-right: 8rpx;
					}
				}
			}
			.ts-total{
				margin-top: 22rpx;
				@include ctf(flex-end);
				>view{
					color: #333333;
					font-size: 28rpx;
					>text{
						color: #FF873D;
						&:first-child{
							font-size: 28rpx;
						}
						&:nth-child(2){
							font-size: 36rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}
	.td-btn{
		height: 112rpx;
		margin: 80rpx 24rpx 10upx;
		border-radius: 10rpx;
		background-color: $mColor;
		color: #FFF;
		font-size: 32rpx;
		line-height: 112rpx;
		text-align: center;
	}
	
}
</style>
