<template>
    <el-dialog v-model="data.dialogVisible" title="详情" style="width: 1000px; padding-bottom: 20px">
        <el-row :gutter="30" class="el-row">
            <el-col :span="12"
                ><div class="label">订单标题：</div>
                <div class="info">{{ data.info.deliveryTitle || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">装车数量：</div>
                <div class="info">{{ data.info.ratedQuantity || '0' }}</div></el-col
            >
        </el-row>
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">供应商：</div>
                <div class="info">{{ data.info.supplierName || data.info.supplierId || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">资金方：</div>
                <div class="info">{{ data.info.fundName || data.info.fundId || '--' }}</div></el-col
            >
        </el-row>
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">司机：</div>
                <div class="info">{{ data.info.driverName || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">采购商：</div>
                <div class="info">{{ data.info.buyerName || data.info.buyerId || '--' }}</div></el-col
            >
        </el-row>
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">采购单价：</div>
                <div class="info">{{ data.info.buyerPrice || '--' }}元/公斤</div></el-col
            >
            <el-col :span="12"
                ><div class="label">销售单价：</div>
                <div class="info">{{ data.info.salePrice || '--' }}元/公斤</div></el-col
            >
        </el-row>
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">约定单价：</div>
                <div class="info">{{ data.info.firmPrice || '--' }}元/公斤</div></el-col
            >
        </el-row>

        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">起始地：</div>
                <div class="info">{{ data.info.startLocation || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">目的地：</div>
                <div class="info">{{ data.info.endLocation || '--' }}</div></el-col
            >
        </el-row>
        
        <!-- 新增更多字段 -->
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">装车订单编号：</div>
                <div class="info">{{ data.info.deliveryNumber || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">车牌号：</div>
                <div class="info">{{ data.info.licensePlate || '--' }}</div></el-col
            >
        </el-row>
        
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">司机手机：</div>
                <div class="info">{{ data.info.driverMobile || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">预计送达时间：</div>
                <div class="info">{{ data.info.estimatedDeliveryTime || '--' }}</div></el-col
            >
        </el-row>
        
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">已注册设备数量：</div>
                <div class="info">{{ data.info.registeredJbqCount || '0' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">订单状态：</div>
                <div class="info">{{ getStatusText(data.info.status) }}</div></el-col
            >
        </el-row>
        
        <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">创建人：</div>
                <div class="info">{{ data.info.createByName || '--' }}</div></el-col
            >
            <el-col :span="12"
                ><div class="label">创建时间：</div>
                <div class="info">{{ data.info.createTime || '--' }}</div></el-col
            >
        </el-row>
        <!-- <el-row :gutter="30">
            <el-col :span="12"
                ><div class="label">服务费比例：</div>
                <div class="info">0.11%</div></el-col
            >
        </el-row> -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { orderDetail } from '@/api/shipping.js';

const data = reactive({
    dialogVisible: false,
    deliveryId: '',
    info: {},
});
// 查详情
const getDetail = () => {
    orderDetail(data.deliveryId).then((res) => {
        if (res.code === 200) {
            // 后端返回的数据结构是 {delivery: {...}, warningLog: [...]}
            data.info = res.data.delivery || res.data;
        } else {
            ElMessage.error(res.msg);
        }
    });
};
const handleClose = () => {
    data.dialogVisible = false;
};
const onShowDetailDialog = (row) => {
    data.dialogVisible = true;
    if (row) {
        data.deliveryId = row.id;
        getDetail();
    }
};

// 状态文本转换
const getStatusText = (status) => {
    const statusMap = {
        1: '待装车',
        2: '装车中',
        3: '运输中',
        4: '已送达',
        5: '已完成'
    };
    return statusMap[status] || '未知状态';
};

defineExpose({
    onShowDetailDialog,
});
</script>

<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
}
.el-col {
    display: flex;
}
.label {
    width: 90px;
    text-align: right;
}
.info {
    flex: 1;
}
</style>
