<template>
    <view class="curriculum-info">
        <view class="ci-box ci-user">
            <view class="cu-stadium">
                <view>{{ orderInfo.source || '-' }}</view>
                <view>{{ orderInfo.order_status_text || '-' }}</view>
            </view>
            <view class="cu-line">手机号码：{{ orderInfo.student_phone || '-' }}</view>
            <view class="cu-line">用户昵称：{{ orderInfo.user_info&&orderInfo.user_info.user_nickname || '-' }}</view>
            <view class="cu-line">学员信息：{{ orderInfo.student_name || '-' }}（{{ orderInfo.student_gender || '-' }}）</view>
        </view>

        <view class="ci-box ci-info">
            <view class="ci-tit">课程信息</view>
            <view class="ci-course-name">课程名称：{{ orderInfo.course_name || '-' }}</view>
            <a-line :value="orderInfo.course_kind || '-'">
                <block slot="name">课程类型：</block> 
            </a-line>
            <a-line :value="'￥' + orderInfo.price || '-'">
                <block slot="name">课程价格：</block> 
            </a-line>
            <a-line :value="orderInfo.course_period_nums || '-'">
                <block slot="name">总课时：</block> 
            </a-line>
            <a-line :value="orderInfo.number || '-'">
                <block slot="name">购买课时：</block> 
            </a-line>
            <a-line :value="course_period_nums_give">
                <block slot="name">
                    {{ orderInfo.course_period_nums_give >= 0 ? '赠送课时：':'扣减课时：'}}
                </block> 
            </a-line>
            <a-line :value="orderInfo.end_time || '-'">
                <block slot="name">有效期至：</block> 
            </a-line>
            <a-line :value="orderInfo.course_period">
                <block slot="name">课时时长：</block> 
            </a-line>

            <a-line :value="orderInfo.course_coach_type_text || '-'">
                <block slot="name">上课教练：</block> 
            </a-line>
            <a-line :value="orderInfo.course_content || '-'">
                <block slot="name">课程内容：</block> 
            </a-line>
            <a-line :value="orderInfo.is_include_venue_price?'是（不含场地费用）':'否'">
                <block slot="name">上课是否需要场地：</block> 
            </a-line>
        </view>
        

        <view class="ci-box pay-info">
            <view class="pi-line">
                <view class="pl-key">金额小计</view><view class="pl-value">¥{{ orderInfo.amount || 0 }}</view>
            </view>
            <view class="pi-line">
                <view class="pl-key">积分抵扣</view><view class="pl-value">¥{{ orderInfo.deduction_amount || 0 }}</view>
            </view>
            <view class="pi-line">
                <view class="pl-key">折扣金额</view><view class="pl-value">¥{{ orderInfo.discount_amount || 0 }}</view>
            </view>
            <view class="pi-line">
                <view class="pl-key">优惠券优惠</view><view class="pl-value">¥{{ orderInfo.coupons_amount || 0 }}</view>
            </view>
            <view class="pi-total">
                <text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}
            </view>
        </view>



        <view class="ci-box payment-info">
            <view class="ci-tit">支付信息</view>
            <a-line :value="orderInfo.created_at || '-'">
                <block slot="name">下单时间：</block> 
            </a-line>
            <a-line :value="orderInfo.order_no || '-'">
                <block slot="name">订单编号：</block> 
            </a-line>
            <a-line :value="orderInfo.pay_time || '-'">
                <block slot="name">支付时间：</block> 
            </a-line>
            <a-line :value="getPayType(orderInfo.pay_type)">
                <block slot="name">支付方式：</block> 
            </a-line>
            <a-line :value="orderInfo.trade_no || '-'">
                <block slot="name">交易流水：</block> 
            </a-line>
        </view>

        <!-- 退款列表 -->
		<view v-for="(e, i) in refundList" :key="i" style="padding: 0 0 24rpx;">
			<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>
        <!-- 课程订单只支持一次退款，refund_times 写死为1间接 -->
        <order-refund-fixed
			:pay_amount="orderInfo.pay_amount || 0"
			:refund_amount="orderInfo.refund_amount || 0"
			:refund_times="refundTimes"
            @click:button="refunndBtn"
		></order-refund-fixed>

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

<script>
import a_line from '../../../../../components/order_list/a_line/a_line.vue';
import util from '../../../../../utils/util';
import { ORDER_API } from '../../../js/api';
import server from '../../../js/server';
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 {
    computed: {
        course_period_nums_give(){
            let { orderInfo } = this;
            let _num = orderInfo.course_period_nums_give || 0;
            return (_num + '').replace('-', '')
        },
        refundTimes(){
            // 课程订单只支持一次退款，refund_times + 1 间接实现
            let _num = this.refundList?.length || 0;
            return _num + 1;
        }
    },
    // ('订单状态 0-待付款 1-进行中 2-已结束 3-已退款 4-已取消')
    components: {
        'a-line': a_line,
        'order-refund-fixed': orderRefundFixed,
        'order-refund-modal': orderRefundModal,
        'order-refund-info': orderRefundInfo
    },
    data(){
        return {
            orderInfo: {
                user_info: {}
            },
            refundList: [], // 退款列表
        }
    },
    onLoad(options){
        this.getInfo(options.order_no);
        this.getRefundTimes(options.order_no);
    },
    methods: {
        refunndBtn(){
            let { orderInfo, refundTimes } = this;
            this.$refs.orderRefundModal.show({
                stadium_name: orderInfo?.extension?.stadium_name ?? '',
                order_no: orderInfo?.order_no ?? '',
                mobile: orderInfo?.student_phone ?? '',
                refundable_amount: orderInfo?.extension?.refundable_amount ?? 0,
                refundable_integral: orderInfo?.extension?.refundable_integral ?? 0,
                refund_times: refundTimes,
                confirm: e => {
                    this.venueCourseOrderRefund({
                        order_no: orderInfo?.order_no ?? '',
                        amount: e.refund_amount || 0,
                        integral: e.refund_integral || 0
                    })  
                }
            });
        },
        venueCourseOrderRefund({ order_no = '', amount = 0, integral = 0}){
            util.showLoad();
            server.get({
                url: ORDER_API.venueCourseOrderRefund,
                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.getInfo(order_no);
                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);
            }
        },
        getInfo(order_no){
            util.showLoad();
            server.get({
                url: ORDER_API.venueCourse_orderInfo,
                data: { order_no },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                this.orderInfo = res || {};
            })
            .catch(util.hideLoad)
        },
        getPayType: util.order_pay_type_txt,
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .curriculum-info{
        padding: 24upx;
        .ci-box{
            margin-bottom: 24upx;
            padding: 30upx;
            border-radius: 10upx;
            background-color: #fff;

        }
        .ci-user{
            .cu-stadium{
                margin-bottom: 24upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        line-height: 44upx;
                        font-size: 32upx;
                        color: #1A1A1A;
                        @include textHide(1);
                    }
                    &+view{
                        flex-shrink: 0;
                        font-size: 28upx;
                        line-height: 40upx;
                        color: $themeColor;
                    }
                }
            }
            .cu-line{
                line-height: 48upx;
                font-size: 28upx;
                color: #1A1A1A;
                @include textHide(1);
            }
        }
        .ci-tit{
            margin-bottom: 20upx;
            line-height: 40upx;
            font-size: 28upx;
            color: #9c9c9f;
        }
        .ci-info{
            .ci-course-name{
                line-height: 52upx;
                font-weight: 500;
                font-size: 28upx;
                color: #1a1a1a;
                @include textHide(1);
            }
        }
    }
    .pay-info{
        .pi-line{
            margin-bottom: 24upx;
            @include centerFlex(space-between);
            .pl-key{
                flex-shrink: 0;
                line-height: 40upx;
                font-size: 28upx;
                color: #1a1a1a;
            }
            .pl-value{
                font-size: 24upx;
                line-height: 34upx;
                color: #1a1a1a;
                @include textHide(1);
            }
        }
        .pi-total{
            text-align: right;
            font-size: 32upx;
            font-weight: 500;
            color: #1a1a1a;
            @include textHide(1);
            >text{
                font-size: 28upx;
                font-weight: 400;
                color: #9a9a9d;
            }
        }
    }   
    
</style>