<template>
    <div class="base-info">
        <ele-data-table
            ref="tableRef"
            row-key="userId"
            :columns="columns"
            :data="datasource"
            :tools="false"
            :pagination="false"
        >
            <template #userNick="{ row }">
                <el-text
                    >{{ formatName(detail.receiveName) }}(ID：{{
                        detail.userId
                    }})</el-text
                >
            </template>

            <template #orderTime="{ row }">
                <div class="common-text">
                    <el-text>建单：</el-text>
                    <el-text>{{ row.createTime }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>付款：</el-text>
                    <el-text>{{ row.payTime || '-' }}</el-text>
                </div>
            </template>
            <template #status="{ row }">
                <el-tag
                    effect="dark"
                    :type="row.status < 1 ? 'warning' : 'success'"
                    >{{ row.status < 1 ? '未付款' : '已付款' }}</el-tag
                >
                <el-tag
                    style="margin-left: 15px"
                    effect="dark"
                    :type="row.status < 5 ? 'warning' : 'success'"
                    >{{ row.status < 5 ? '未完成' : '已完成' }}</el-tag
                >
            </template>
        </ele-data-table>
        <el-row :gutter="12" style="padding: 16px 10px; padding-bottom: 0">
            <el-col :span="8">
                <div class="common-text">
                    <el-text>物流类型：</el-text>
                    <el-text>平台物流</el-text>
                </div>
                <div class="common-text">
                    <el-text>快递单号：</el-text>
                    <el-text>{{ detail.waybillCode || '暂无信息' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>快递公司：</el-text>
                    <el-text>{{ finalExpressText || '暂无信息' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>发货时间：</el-text>
                    <el-text>{{ detail.sendTime || '-' }}</el-text>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="common-text">
                    <el-text>收货人：</el-text>
                    <el-text
                        >{{ formatName(detail.receiveName) }}(ID：{{
                            detail.userId
                        }})</el-text
                    >
                </div>
                <div class="common-text">
                    <el-text>电 话：</el-text>
                    <el-text>{{ formatPhone(detail.receiveMobile) }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>地 址：</el-text>
                    <el-text>{{ detail.receiveAddress || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>买家留言：</el-text>
                    <el-text>{{ detail.userExpress || '-' }}</el-text>
                </div>
            </el-col>
            <el-col :span="8">
                <el-tag
                    effect="dark"
                    :type="detail.firstOrder == 1 ? 'success' : 'warning'"
                    >{{ detail.firstOrder == 1 ? '首单' : '非首单' }}</el-tag
                >
                <el-tag
                    style="margin-left: 15px"
                    effect="dark"
                    :type="detail.stockStatus == 1 ? 'success' : 'warning'"
                    >{{ detail.stockStatus == 1 ? '已入库' : '未入库' }}</el-tag
                >
                <el-tag
                    style="margin-left: 15px"
                    effect="dark"
                    :type="detail.checkStatus == 1 ? 'success' : 'warning'"
                    >{{ detail.checkStatus == 1 ? '已推送' : '未推送' }}</el-tag
                >
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { formatName, formatPhone } from '@/utils/common';
    import { ref, reactive, watch } from 'vue';
    const props = defineProps({
        detail: { type: Object, default: () => ({}) }
    });

    import { useDictData } from '@/utils/use-dict-data';

    /** 字典数据 */
    const [expressDicts, orderFormDicts] = useDictData([
        'final_express',
        'order_form'
    ]);

    const finalExpressText = computed(() => {
        if (props.detail.finalExpress == '0' || !props.detail.finalExpress) {
            return '暂无信息';
        }
        return (
            expressDicts.value.find(
                (d) => d.dictValue == props.detail.finalExpress
            )?.dictLabel || '暂无信息'
        );
    });

    const formatTime = computed(() => {
        if (!props.detail.schedulePickupStartTime) return '-';
        return (
            props.detail.schedulePickupStartTime +
            '-' +
            props.detail.schedulePickupEndTime.split(' ')[1]
        );
    });

    const datasource = ref([]);
    watch(
        () => props.detail,
        (newVal) => {
            console.log(newVal, 'newVal');
            datasource.value = newVal ? [newVal] : [];
            console.log(datasource.value);
        },
        { immediate: true, deep: true }
    );

    const columns = ref([
        { label: '订单编号', prop: 'refundOrderId' },
        {
            label: '订单来源',
            prop: 'orderFrom',
            formatter: (row) => '申请退回订单'
        },
        { label: '用户', prop: 'userNick', slot: 'userNick' },
        {
            label: '订单运费',
            prop: 'expressMoney',
            formatter: (row) => '￥' + row.expressMoney
        },
        {
            label: '实付款',
            prop: 'payMoney',
            formatter: (row) =>
                typeof row.payMoney == 'number' ? '￥' + row.payMoney : '-'
        },
        { label: '创建时间', prop: 'orderTime', slot: 'orderTime', width: 200 },
        { label: '交易状态', prop: 'status', slot: 'status', width: 240 }
    ]);
</script>
