<template>
    <view class="card" @click.stop="goPage">
        <view class="card--header flex justify-between">
            <view class="order-sn">订单编号：{{ orderInfo.sn }}</view>
            <view class="status">{{ getStatueName(orderInfo) }}</view>
        </view>

        <view class="card--main flex">
            <u-image
                :src="orderInfo.orderGoodsDetailVo?.imageUrl"
                width="160"
                height="160"
                border-radius="16"
            ></u-image>
            <view class="ml-[20rpx] service-text">
                <view class="service-text--name truncate">
                    {{ orderInfo.orderGoodsDetailVo?.goodsName }}
                </view>
                <view class="mt-[16rpx]">
                    预约时间: {{ orderInfo.appointTime }} {{ orderInfo.weekDay }}
                </view>
                <view class="mt-[16rpx]">
                    服务金额:
                    <text class="text-[#f36161] text-base pl-1.5">¥{{ servicePrice }}</text>
                </view>
                <!-- <view class="mt-[16rpx]" v-if="orderInfo.orderStatus == 0">
                    待付金额:
                    <text class="text-[#f36161] text-base pl-1.5">
                        ¥{{ orderInfo.orderAmount }}
                    </text>
                </view> -->
                <!-- <view class="mt-[16rpx]" v-if="orderInfo.orderStatus == 1">
                    实付金额:
                    <text class="text-[#f36161] text-base pl-1.5">
                        ¥{{ orderInfo.orderAmount }}
                    </text>
                </view>
                <view class="mt-[16rpx]" v-if="orderInfo.orderStatus == 2">
                    实付金额:
                    <text class="text-[#f36161] text-base pl-1.5">
                        ¥{{ orderInfo.orderAmount }}
                    </text>
                </view>
                <view class="mt-[16rpx]" v-if="orderInfo.orderStatus == 3">
                    实付金额:
                    <text class="text-[#f36161] text-base pl-1.5">
                        ¥{{ orderInfo.orderAmount }}
                    </text>
                </view>
                <view class="mt-[16rpx]" v-if="orderInfo.orderStatus == 4">
                    应付金额:
                    <text class="text-[#f36161] text-base pl-1.5">
                        ¥{{ orderInfo.orderAmount }}
                    </text>
                </view> -->
            </view>
        </view>

        <view class="card--footer flex justify-between items-center">
            <view class="text-primary">
                <template v-if="orderInfo.cancelBtnTime">
                    <!-- v-if="timeStamp >= 0" -->
                    <view class="flex" v-if="timeStamp > 0">
                        <u-count-down
                            :timestamp="timeStamp"
                            format="mm:ss"
                            :font-size="26"
                            :separator-size="26"
                            @end="timeStamp = 0"
                        />
                        <text class="ml-[10rpx]">后自动取消</text>
                    </view>
                </template>
            </view>

            <view>
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, inject, onUnmounted, ref, watch } from 'vue'
import { apiOrderClose } from '@/api/order'
import { PriceEnum } from '@/enums/appEnums'
import { formatString } from '@/utils/util'

const props = withDefaults(
    defineProps<{
        orderInfo?: any // 底部
    }>(),
    {
        orderInfo: {}
    }
)
const emit = defineEmits(['refresh'])
const servicePrice = computed(() => {
    const { priceType, goodsPrice, priceRange } = props.orderInfo
    return priceType == PriceEnum.CUSTOMER_PRICE ? goodsPrice : formatString(priceRange)
})

const timeStamp = ref<number | null>(0)
let timeoutId: Timeout | null = null
// 超时关闭订单
watch(
    () => props.orderInfo.cancelBtnTime,
    newCancelBtnTime => {
        // 清除之前的定时器
        if (timeoutId) {
            clearTimeout(timeoutId)
        }
        // 将秒转换为毫秒
        const endTimestampInMilliseconds = newCancelBtnTime * 1000
        const startTimestamp = new Date().getTime()
        timeStamp.value = endTimestampInMilliseconds - startTimestamp

        if (timeStamp.value > 0) {
            timeoutId = setTimeout(() => {
                timeStamp.value = 0
                orderClose()
            }, timeStamp.value)
        }
    },
    { immediate: true }
)
const parent = inject('Order')
const orderClose = async () => {
    await apiOrderClose({
        outTradeNo: props.orderInfo.id
    })
    // emit('refresh')
    parent.refresh()
}

const goPage = () => {
    uni.navigateTo({
        url: `/pages/order_detail/index?id=${props.orderInfo.id}`
    })
}
const getStatueName = orderInfo => {
    // 1:预约中且已派单，还是显示已派单更好
    if (orderInfo.orderStatus == 1 && orderInfo.isDispatch == 1) {
        return '已预约'
    }

    return orderInfo.orderStatusName
}
onUnmounted(() => {
    if (timeoutId) {
        clearTimeout(timeoutId)
    }
})
</script>

<style lang="scss" scoped>
.card {
    border-radius: 14rpx;
    background-color: #ffffff;
    margin: 20rpx 20rpx 0 20rpx;

    &--header {
        padding: 24rpx 30rpx;
        font-size: 26rpx;

        // border-bottom: 1px solid #e5e5e5;
        .order-sn {
            color: #222222;
        }

        .status {
            color: #f36161;
        }
    }

    &--main {
        padding: 30rpx;
        color: #555555;
        font-size: 26rpx;

        .service-text {
            &--name {
                width: 460rpx;
                font-weight: 500;
                color: #222222;
                font-size: 32rpx;
            }
        }
    }

    &--footer {
        padding: 20rpx 30rpx;
        font-size: 26rpx;
        // border-top: 1px solid #e5e5e5;
    }
}
</style>
