<template>
    <view class="card" v-if="isEmpty">
        <view class="cell" v-for="cell in orderFields" :key="cell.label">
            <text class="width-200">{{ cell.label }}</text>
            <text class="flex-1 overflow-ellipsis-line">{{ setUnit(cell.value, cell.unit) }}</text>
        </view>
    </view>
    <view class="loading" v-else-if="!isLoading">
        <u-loading></u-loading>
        <view>加载中...</view>
    </view>
    <view class="empty" v-else>
        <u-empty text="" mode="data"></u-empty>
    </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useLockFn } from '@/hooks/useLockFn'
import { getDistributorOrderDetail } from '@/api/distributor_center'
import { setUnit } from '@/utils/util'

interface OrderProps {
    [key: string]: string | number
    id: number
    commission: number
    orderNo: number
    goodsCategoryName: string
    goodsName: string
    goodsNum: number
    orderAmount: number
    finishTime: string
    commissionRate: number
    appointTimeStart: string
    appointTimeEnd: string
}
const fieldsMap: Record<string, string | string[]> = {
    orderNo: '订单编号',
    goodsCategoryName: '服务类别',
    goodsName: '服务名称',
    goodsNum: ['商品数量', '个'],
    orderAmount: ['实付金额', '元'],
    address: '上门地址',
    appointTime: '预约时间',
    finishTime: '完成时间'
    // commissionRate: ['最终抽佣比', '%'],
    // commission: ['抽佣金额', '元']
}
const orderFields = ref<any[]>([])
const orderDetail = reactive<Partial<OrderProps>>({})
const isEmpty = computed(() => unref(orderFields).length > 0)
const isLoading = computed(() => Object.keys(orderDetail).length > 0)

onLoad(options => {
    const { id } = options
    initOrderDetail(id)
})

/**订单详情 */
const { lockFn: initOrderDetail } = useLockFn(async id => {
    const data = await getDistributorOrderDetail({ id })
    Object.keys(data).length > 0 && setDetailData(data)
})

/**保存信息 */
function setDetailData(data: any) {
    for (const key in data) {
        orderDetail[key] = data[key]
    }
    orderDetail.appointTime = `${orderDetail.appointTimeStart?.replace(
        /:\d{2}$/,
        ''
    )}-${orderDetail.appointTimeEnd?.split(' ')[1].replace(/:\d{2}$/, '')}`

    //    订单未完成，不显示订单完成时间
    if (orderDetail.orderStatus !== 3 && orderDetail.orderStatus !== 4) {
        delete fieldsMap.finishTime
    }
    orderFields.value = Object.keys(fieldsMap).map(field => {
        const text = fieldsMap[field]
        const [label, unit] = Array.isArray(text) ? text : [text, '']
        return {
            label: label,
            value: orderDetail[field],
            unit
        }
    })
}
</script>

<style lang="scss" scoped>
.card {
    background-color: $white;
    margin: 20rpx 40rpx 0;
    padding: 30rpx;
    border-radius: 16rpx;

    .cell {
        display: flex;
        line-height: 1.8;

        .width-200 {
            width: 220rpx;
            height: 70rpx;
            color: #827e7e;
        }
    }
}

.empty {
    @include center;
    min-height: 100vh;
}

.loading {
    @include center;
    flex-direction: column;
    min-height: 100vh;
}
</style>
