<route lang="jsonc" type="page">{
    // "needLogin": true,
    "layout": "default",
    "style": {
		"navigationStyle": "custom"
    }
}</route>

<template>
    <view class="pb-30rpx">
        <view class="order-list">
            <navbar title="账单详情" custom-class='!bg-[#F6F7F8]'></navbar>
        </view>

        <!-- 订单详情 -->
        <view class="mt-28rpx mx-32rpx bg-white rounded-16rpx py-30rpx relative">
            <view class="absolute top-0 right-38rpx">
                <!-- change_type: 1.预定2.续时3.续茶4.退款5.提现-->
                <wd-img v-if="billDetails.change_type == 1" width="112rpx" height="112rpx" :src="`${OSS}images/store/bill/image1.png`"
                    mode="aspectFill" />      
                <wd-img v-if="billDetails.change_type == 2" width="112rpx" height="112rpx" :src="`${OSS}images/store/bill/image2.png`"
                    mode="aspectFill" />   
            </view>
            <view class="flex items-center">
                <view class="w-8rpx h-32rpx bg-[#4C9F44] mr-22rpx"></view>
                <view class="font-bold text-28rpx leading-40rpx text-[#303133]">订单号：{{ billDetails.source_sn }}</view>
            </view>

            <view class="mt-38rpx text-center">
                <view class="text-28rpx leading-40rpx text-[#606266]">金额</view>
                <view class="mt-20rpx">
                   + <price-format color="#000" :first-size="36" :second-size="36" :showSubscript="false" :price="billDetails.amount"></price-format>
                </view>
            </view>

            <view class="mt-16rpx mb-20rpx border-b-2rpx border-b-solid border-[#E5E5E5] mx-18rpx"></view>

            <view class="text-28rpx leading-40rpx text-[#606266] mx-28rpx">
                <view class="flex justify-between items-center mb-16rpx">
                    <view class="w-150rpx">消费类型</view>
                    <view>{{ Bill.handleMapTransactionType(billDetails.change_type) }}</view>
                </view>
                <view class="flex justify-between items-center mb-16rpx">
                    <view class="w-150rpx">交易方式</view>
                    <view>{{ billDetails.pay_way_title }}</view>
                </view>
                <view class="flex justify-between items-center mb-16rpx">
                    <view class="w-150rpx">实际收入</view>
                    <view>{{ billDetails.amount }}</view>
                </view>
                <view class="flex justify-between items-center mb-16rpx">
                    <view class="w-150rpx">用户备注</view>
                    <view class="w-400rpx text-right">{{ billDetails.remark }}</view>
                </view>
            </view>

            <view class="mt-26rpx mb-20rpx border-b-2rpx border-b-dashed border-[#E5E5E5] mx-18rpx"></view>

            <view class="text-28rpx leading-40rpx text-[#606266] mx-28rpx">
                <view class="flex justify-between items-center mb-16rpx">
                    <view>用户名</view>
                    <view>{{ billDetails.user_name }}</view>
                </view>
                <view class="flex justify-between items-center mb-16rpx">
                    <view>支付时间</view>
                    <view>{{ billDetails.create_time}}</view>
                </view>
            </view>
        </view>
    </view>
</template>


<script lang="ts" setup>
    import { getTeaSpecialistBillDetails } from '@/api/tes-specialist'
    import { PayWayText } from '@/utils/pay'
    
    const OSS = inject('OSS')

    // 账单明细
    const id = ref<number>(0)
    const billDetails = ref<any>({
        id: 0,
        amount: 0,
        change_type: 0,
        order: {
            order_sn: '',
            pay_way: '', // 支付方式 1余额支付 2微信支付 3门店支付
            nickname: '',
            mobile: '',
            update_dtime: '',
            remark: '', // 用户备注
        }
    })

    onLoad(async (args) => {
        id.value = Number(args.id) || 0
        const res = await getTeaSpecialistBillDetails(id.value)
        billDetails.value = res
        console.log("🚀 ~ billDetails.value:", billDetails.value)
    })

    const Bill = {
        /**
         * 映射流水明细类型
         */
        handleMapTransactionType: (type: number) => {
            const typeMap: Record<number, string> = {
                1: '包间预定',
                2: '包间续费',
                3: '提现',
                4: '团购核销'
            }
            return typeMap[type] || '其他'
        }
    }
</script>

<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }

</style>
