<template>
    <div class="base-info">
        <ele-data-table
            ref="tableRef"
            row-key="userId"
            :columns="columns"
            :data="datasource"
            :tools="false"
            :pagination="false"
        >
            <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.orderTime || '-' }}</el-text>
                </div>
            </template>

            <template #expectMoney="{ row }">
                <div style="display: flex; align-items: center">
                    {{ '￥' + row.expectMoney }}
                </div>
                <div style="color: #f56c6c" v-if="row.upsellExpectMoney">
                    {{ '+' + row.upsellExpectMoney }}
                </div>
            </template>

            <template #finalMoney="{ row }">
                <div style="display: flex; align-items: center">
                    {{
                        typeof row.finalMoney == 'number'
                            ? '￥' + row.finalMoney
                            : '待核算'
                    }}
                </div>
                <div style="color: #f56c6c" v-if="row.upsellFinalMoney">
                    {{ '+' + row.upsellFinalMoney }}
                </div>
            </template>

            <template #status="{ row }">
                <el-tag
                    effect="dark"
                    :type="row.status < 5 ? 'warning' : 'success'"
                    >{{ row.status < 5 ? '未发货' : '已发货' }}</el-tag
                >
                <el-tag
                    style="margin-left: 15px"
                    effect="dark"
                    :type="row.status < 8 ? 'warning' : 'success'"
                    >{{ row.status < 8 ? '未收货' : '已收货' }}</el-tag
                >
                <el-tag
                    style="margin-left: 15px"
                    effect="dark"
                    :type="row.status != 11 ? 'warning' : 'success'"
                    >{{ row.status == 11 ? '已支付' : '未支付' }}</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>{{ formatTime }}</el-text>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="common-text">
                    <el-text>发件人：</el-text>
                    <el-text
                        >{{ formatName(detail.sendName) }}(ID：{{
                            detail.userId
                        }})</el-text
                    >
                </div>
                <div class="common-text">
                    <el-text>电 话：</el-text>
                    <el-text v-if="!isShowPhone">{{
                        formatPhone(detail.sendMobile)
                    }}</el-text>
                    <el-text v-else>{{ detail.sendMobile }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>地 址：</el-text>
                    <el-text>{{ detail.sendAddress }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>备 注：</el-text>
                    <el-text>{{ detail.userExpress || '暂无信息' }}</el-text>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="common-text">
                    <el-text>收货仓库：</el-text>
                    <el-text
                        >{{ detail.recipientGodown }}-{{
                            detail.recipientName
                        }}</el-text
                    >
                </div>
                <div class="common-text">
                    <el-text>收 件 人：</el-text>
                    <el-text>{{ detail.recipientName || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>电  话：</el-text>
                    <el-text>{{ detail.recipientMobile || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>地  址：</el-text>
                    <el-text>{{ detail.recipientAddress || '-' }}</el-text>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { formatName, formatPhone } from '@/utils/common';
    import { ref, reactive, watch } from 'vue';
    import { usePermission } from '@/utils/use-permission';

    const { hasPermission } = usePermission();
    const isShowPhone = computed(() => {
        return hasPermission('recycleOrder:search:viewPhone');
    });

    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: 'orderId' },
        {
            label: '订单来源',
            prop: 'orderFrom',
            formatter: (row) =>
                orderFormDicts.value.find((d) => d.dictValue == row.orderFrom)
                    ?.dictLabel
        },
        { label: '用户', prop: 'userNick' },
        {
            label: '预估书款',
            prop: 'expectMoney',
            slot: 'expectMoney'
        },
        {
            label: '审核书款',
            prop: 'finalMoney',
            slot: 'finalMoney'
        },
        {
            label: '快递重量',
            prop: 'chargeWeight',
            width: 120,
            formatter: (row) =>
                row.chargeWeight ? row.chargeWeight + 'kg' : '-'
        },
        { label: '下单时间', prop: 'orderTime', slot: 'orderTime', width: 200 },
        { label: '交易状态', prop: 'status', slot: 'status', width: 240 }
    ]);
</script>
