pet-system-merchant-web/src/views/order/management/components/OrderDetailDrawer.vue

<template>
    <el-drawer v-model="drawerVisible" title="订单详情" direction="rtl" size="60%" class="order-detail-drawer">
        <div class="detail-container" v-if="order">
            <!-- 1. Header Status -->
            <div class="detail-header">
                <div class="left-head">
                    <span class="order-no">{{ order.orderNo }}</span>
                    <el-tag :type="getStatusTag(order.status)" effect="dark" class="status-tag">{{
                        getStatusName(order.status) }}</el-tag>
                    <el-tag effect="plain" class="type-tag"
                        :type="order.type === 'transport' ? '' : (order.type === 'feeding' ? 'warning' : 'danger')">
                        {{ getTypeName(order.type) }}
                    </el-tag>
                </div>
                <div class="right-head">
                    <!-- Action Buttons Group -->
                    <div class="detail-actions">
                        <!--                        <template v-if="[0, 1, 2].includes(order.status)">-->
                        <!--                            <el-button type="success" icon="Bicycle" @click="emit('dispatch', order)">-->
                        <!--                                {{ order.fulfiller || order.fulfillerName ? '重新派单' : '立即派单' }}-->
                        <!--                            </el-button>-->
                        <!--                        </template>-->

                        <template v-if="order.status === 0">
                            <el-button v-hasPermi="['order:management:cancel']" type="danger" plain icon="CircleClose"
                                @click="emit('cancel', order)">取消订单</el-button>
                        </template>

                        <template v-if="order.status === 3">
                            <el-button type="primary" icon="CircleCheck"
                                @click="emit('command', 'complete', order)">确认完成</el-button>
                        </template>

                        <template v-if="[3, 4].includes(order.status)">
                            <el-button v-hasPermi="['order:management:nursingSummary']" icon="Notebook"
                                @click="emit('care-summary', order)">护理小结</el-button>
                        </template>

                        <el-dropdown trigger="click" @command="(cmd) => emit('command', cmd, order)"
                            style="margin-left: 12px;">
                            <el-button icon="More">更多操作</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-hasPermi="['order:management:reward']" command="reward"
                                        icon="Trophy">奖惩操作</el-dropdown-item>
                                    <el-dropdown-item v-hasPermi="['order:management:remark']" command="remark"
                                        icon="EditPen">订单备注</el-dropdown-item>
                                    <el-dropdown-item command="delete" v-if="[5, 4].includes(order.status)" divided
                                        icon="Delete" style="color: #f56c6c;">删除订单</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </div>

            <div class="detail-scroll-area">
                <!-- 2. Progress Section -->
                <div class="progress-section">
                    <el-steps :active="currentOrderSteps.active" finish-status="success" align-center
                        class="custom-steps">
                        <el-step v-for="(step, index) in currentOrderSteps.steps" :key="index" :title="step.title"
                            :description="step.time" />
                    </el-steps>
                </div>

                <!-- 3. Top Info: Pet & User -->
                <div class="top-info-row">
                    <!-- Left: Pet Info -->
                    <div class="info-section pet-section" style="cursor: pointer" @click="petDetailVisible = true">
                        <div class="sec-header">
                            <span class="label">宠物档案</span>
                            <el-tag size="small" effect="plain">{{ order.petBreed }}</el-tag>
                        </div>
                        <div class="pet-basic-row">
                            <el-avatar :size="50" :src="order.petAvatar" shape="square" class="pet-avatar-lg">{{
                                (order.petName || '').charAt(0) }}</el-avatar>
                            <div class="pet-names">
                                <div class="b-name">{{ order.petName }}
                                    <el-icon v-if="order.petGender === 'male'" color="#409eff">
                                        <Male />
                                    </el-icon>
                                    <el-icon v-else color="#f56c6c">
                                        <Female />
                                    </el-icon>
                                </div>
                                <div class="b-tags">
                                    <el-tag size="small" type="info">{{ order.petAge || '未知年龄' }}</el-tag>
                                    <el-tag size="small" type="info">{{ order.petWeight || '未知体重' }}</el-tag>
                                </div>
                            </div>
                        </div>
                        <el-descriptions :column="2" size="small" class="pet-desc" border>
                            <el-descriptions-item label="品种">{{ order.petBreed || '未知' }}</el-descriptions-item>
                            <el-descriptions-item label="疫苗状态"><span style="color:#67c23a">{{ order.petVaccine || '未知'
                                    }}</span></el-descriptions-item>
                            <el-descriptions-item label="性格特点">{{ order.petCharacter || '温顺' }}</el-descriptions-item>
                            <el-descriptions-item label="健康状况">{{ order.petHealth || '健康' }}</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- Right: User Info -->
                    <div class="info-section user-section">
                        <div class="sec-header">
                            <span class="label">用户信息</span>
                        </div>
                        <div class="user-content">
                            <div class="u-row">
                                <el-avatar :size="40" :src="order.userAvatar">{{ (order.userName || '').charAt(0)
                                    }}</el-avatar>
                                <div class="u-info">
                                    <div class="nm">{{ order.userName }}</div>
                                    <div class="ph">{{ order.contactPhone }}</div>
                                </div>
                            </div>
                            <div class="addr-box">
                                <div class="addr-label">服务地址</div>
                                <div class="addr-txt">{{ order.city }}{{ order.district }} {{ order.address || '' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 4. Bottom Tabs -->
                <el-tabs v-model="activeDetailTab" class="detail-tabs type-card">
                    <!-- Tab 1: Basic Info -->
                    <el-tab-pane label="订单基础信息" name="basic">
                        <div class="tab-pane-content">
                            <div class="section-block">
                                <div class="sec-title-bar">基础业务信息</div>
                                <el-descriptions :column="3" border size="default" class="custom-desc">
                                    <el-descriptions-item label="系统单号">{{ order.orderNo }}</el-descriptions-item>
                                    <el-descriptions-item label="服务类型">
                                        {{ getTypeName(order.type) }}
                                        <el-tag size="small" v-if="order.type === 'transport'" style="margin-left:5px"
                                            effect="light">{{ getTransportModeName(order.transportType) }}</el-tag>
                                    </el-descriptions-item>

                                    <el-descriptions-item label="归属门店">{{ order.merchantName }}
                                        ({{ Number(order.platformId) === 1 ? '门店下单' : '平台代下单' }})</el-descriptions-item>
                                    <el-descriptions-item label="宠主信息">{{ order.userName }} / {{ order.contactPhone
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="服务费用" label-class-name="money-label">
                                        <span style="color:#f56c6c; font-weight:bold;">¥ {{ order.fulfillerFee }}</span>
                                    </el-descriptions-item>

                                    <el-descriptions-item label="预约时间">{{ getServiceTimeRange(order.serviceTime)
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="团购套餐">{{ order.groupBuyPackage || '未使用团购套餐'
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="创建时间">{{ order.createTime }}</el-descriptions-item>

                                    <el-descriptions-item label="订单备注" :span="3">
                                        {{ order.remark || '暂无备注' }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>

                            <div v-if="order.type === 'transport'" class="section-block transport-split-block">
                                <div class="sec-title-bar">接送任务详情</div>
                                <div class="transport-one">
                                    <div class="t-row">
                                        <el-tag size="small" effect="plain" class="sub-badge">{{
                                            getTransportLabel(order.subOrderType) }}</el-tag>
                                        <span class="time">{{ order.serviceTime }}</span>
                                    </div>
                                    <div class="t-row">
                                        <span class="t-k">起点</span>
                                        <span class="t-v">{{ order.detail?.fromAddress || order.detail?.pickAddr || '--'
                                        }}</span>
                                    </div>
                                    <div class="t-row">
                                        <span class="t-k">终点</span>
                                        <span class="t-v">{{ order.detail?.toAddress || order.detail?.dropAddr ||
                                            order.toAddress ||
                                            '--' }}</span>
                                    </div>
                                    <div class="t-row sub">
                                        <span class="t-v">{{ order.contact || order.userName || '--' }} {{
                                            order.contactPhoneNumber
                                            || order.contactPhone || '--' }}</span>
                                    </div>
                                </div>
                            </div>

                            <div v-if="['feeding', 'washing'].includes(order.type)" class="section-block">
                                <div class="sec-title-bar">服务执行要求</div>
                                <el-descriptions :column="2" border size="default" class="custom-desc">
                                    <el-descriptions-item label="服务地址" :span="2">{{ order.detail?.area || order.address
                                        }}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- Tab 2: Fulfiller Info -->
                    <el-tab-pane label="指派履约者" name="fulfiller">
                        <div class="tab-pane-content">
                            <div v-if="order.fulfillerName" class="fulfiller-card">
                                <div class="f-left">
                                    <el-avatar :size="60" :src="order.fulfillerAvatar">{{ order.fulfillerName.charAt(0)
                                        }}</el-avatar>
                                </div>
                                <div class="f-right">
                                    <div class="f-row1">
                                        <span class="f-name">{{ order.fulfillerName }}</span>
                                        <el-tag size="small" type="primary" effect="plain" round>Lv1 普通</el-tag>
                                    </div>
                                    <div class="f-row2">
                                        <span>联系电话：{{ order.fulfillerPhone || '138****0000' }}</span>
                                        <span class="sep">|</span>
                                        <span>归属区域：{{ order.fulfillerStation || '朝阳一站' }}</span>
                                    </div>
                                    <div class="f-row3"
                                        style="margin-top: 8px; font-size: 13px; color: #606266; background: #f9fafe; padding: 8px; border-radius: 4px; display: flex; gap: 20px;">
                                        <span><span style="color:#909399;">指派时间：</span>{{ order.createTime }}</span>
                                        <span><span style="color:#909399;">接单时间：</span>{{ order.detail?.receiveTime ||
                                            order.serviceTime }}</span>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="empty-state">
                                <el-result icon="info" title="暂无履约者" sub-title="该订单尚未指派履约人员"></el-result>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- Tab 3: Service Progress -->
                    <el-tab-pane label="服务进度" name="service">
                        <div class="tab-pane-content">
                            <div v-if="serviceProgressSteps.length === 0" class="empty-progress"
                                style="padding:40px; text-align:center; color:#909399;">
                                <el-result icon="info" title="待接单" sub-title="履约者接单后将在此记录服务进度"></el-result>
                            </div>

                            <el-timeline style="padding: 10px 20px;" v-else>
                                <el-timeline-item v-for="(step, index) in serviceProgressSteps" :key="index"
                                    :timestamp="step.time" placement="top" :color="step.color" :icon="step.icon"
                                    size="large">
                                    <div class="progress-card">
                                        <h4 class="p-title">{{ step.title }}</h4>
                                        <p class="p-desc">{{ step.desc }}</p>
                                        <div class="p-media" v-if="step.media && step.media.length">
                                            <div v-for="(item, i) in step.media" :key="i" class="media-item">
                                                <!-- 图片类型 -->
                                                <el-image v-if="item.type === 'image'" :src="item.url"
                                                    :preview-src-list="step.media.filter(m => m.type === 'image').map(m => m.url)"
                                                    fit="cover" class="p-img" :preview-teleported="true" />

                                                <!-- 视频类型 -->
                                                <div v-else-if="item.type === 'video'" class="p-video-box"
                                                    @click="openVideoPreview(item.url)">
                                                    <video :src="item.url" preload="metadata"
                                                        class="p-img p-video"></video>
                                                    <div class="play-icon-overlay">
                                                        <el-icon>
                                                            <VideoPlay />
                                                        </el-icon>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-tab-pane>

                    <!-- Tab 4: Logs -->
                    <el-tab-pane label="订单日志" name="logs">
                        <div class="tab-pane-content">
                            <div style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                                <el-button type="primary" size="small" icon="Download"
                                    v-hasPermi="['order:management:queryExportExcel']"
                                    @click="handleExportLogs">导出日志Excel</el-button>
                            </div>
                            <el-timeline>
                                <el-timeline-item v-for="(log, index) in (orderLogs || [])" :key="index"
                                    :timestamp="log.createTime || log.time || ''" :type="'primary'" :icon="undefined"
                                    placement="top">
                                    <div class="log-card">
                                        <div class="l-tit">{{ log.title }}</div>
                                        <div class="l-txt">{{ log.content }}</div>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-tab-pane>

                    <!-- Tab 5: Complaint Records -->
                    <el-tab-pane label="投诉记录" name="complaints">
                        <div class="tab-pane-content">
                            <div v-if="complaintList.length === 0" class="empty-state">
                                <el-result icon="success" title="暂无投诉" sub-title="该订单暂无投诉记录"></el-result>
                            </div>
                            <el-timeline v-else>
                                <el-timeline-item v-for="(complaint, index) in complaintList" :key="index"
                                    :timestamp="complaint.createTime" placement="top" color="#f56c6c">
                                    <div class="log-card">
                                        <div class="l-tit">履约者：{{ complaint.fulfiller }}</div>
                                        <div class="l-txt">{{ complaint.reason }}</div>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <PetDetailDrawer v-model:visible="petDetailVisible" :pet-id="order?.pet || order?.petId" />
        </div>
    </el-drawer>

    <!-- 视频播放弹窗 -->
    <el-dialog v-model="videoPreview.visible" title="视频播放" width="800px" append-to-body @closed="videoPreview.url = ''">
        <div
            style="width: 100%; display: flex; justify-content: center; background: #000; border-radius: 4px; overflow: hidden;">
            <video v-if="videoPreview.url" :src="videoPreview.url" controls autoplay
                style="max-width: 100%; max-height: 70vh;"></video>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { getPet } from '@/api/archieves/pet'
import { getCustomer } from '@/api/archieves/customer'
import { listSubOrderLog, exportSubOrderLogUrl } from '@/api/order/subOrderLog/index'
import { listComplaintByOrder } from '@/api/fulfiller/complaint'
import PetDetailDrawer from '@/components/PetDetailDrawer/index.vue'

// 视频判定辅助函数
const isVideo = (url) => {
    if (!url) return false;
    const videoExts = ['.mp4', '.mov', '.avi', '.wmv', '.webm', '.ogg'];
    return videoExts.some(ext => String(url).toLowerCase().endsWith(ext));
}

// 视频预览状态
const videoPreview = reactive({
    visible: false,
    url: ''
})

const openVideoPreview = (url) => {
    videoPreview.url = url;
    videoPreview.visible = true;
}

const { proxy } = getCurrentInstance()

const props = defineProps({
    visible: Boolean,
    order: Object
})

const emit = defineEmits(['update:visible', 'dispatch', 'cancel', 'command', 'care-summary'])

const drawerVisible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
})

const orderDetail = ref(null)
const order = computed(() => orderDetail.value || props.order)

const loadSeq = ref(0)

const orderLogs = ref([])
const fulfillerLogs = ref([])
const complaintList = ref([])

const loadOrderLogs = async (order) => {
    const id = order?.id
    if (!id) {
        orderLogs.value = []
        fulfillerLogs.value = []
        return
    }
    try {
        const res = await listSubOrderLog({ orderId: id })
        const list = res?.data?.data || res?.data || []
        const arr = Array.isArray(list) ? list : []
        orderLogs.value = arr.filter(i => Number(i?.logType) === 0)
        fulfillerLogs.value = arr.filter(i => Number(i?.logType) === 1)
    } catch {
        orderLogs.value = []
        fulfillerLogs.value = []
    }

    try {
        const complaintRes = await listComplaintByOrder(id)
        complaintList.value = complaintRes?.data || []
    } catch {
        complaintList.value = []
    }
}

const loadPetAndCustomer = async (order) => {
    const seq = ++loadSeq.value
    const next = { ...(order || {}) }

    const petId = next?.pet || next?.petId
    if (petId) {
        try {
            const res = await getPet(petId)
            const pet = res?.data
            if (pet) {
                next.petName = pet.name ?? next.petName
                next.petAvatar = pet.avatarUrl ?? next.petAvatar
                next.petGender = pet.gender ?? next.petGender
                next.petAge = (pet.age !== undefined && pet.age !== null) ? `${pet.age}岁` : next.petAge
                next.petWeight = (pet.weight !== undefined && pet.weight !== null) ? `${pet.weight}kg` : next.petWeight
                next.petBreed = pet.breed ?? next.petBreed
                next.petSterilized = (pet.isSterilized !== undefined && pet.isSterilized !== null)
                    ? (Number(pet.isSterilized) === 1)
                    : next.petSterilized
                next.petVaccine = pet.vaccineStatus ?? next.petVaccine
                next.petCharacter = pet.personality ?? next.petCharacter
                next.petHealth = pet.healthStatus ?? next.petHealth
            }
        } catch {
        }
    }

    const customerId = next?.customer || next?.customerId
    if (customerId) {
        try {
            const res = await getCustomer(customerId)
            const customer = res?.data
            if (customer) {
                next.userName = customer.name ?? next.userName
                next.userAvatar = customer.avatarUrl ?? next.userAvatar
                next.contactPhone = customer.phone ?? next.contactPhone
                next.city = customer.areaName ?? next.city
                next.address = customer.address ?? next.address
            }
        } catch {
        }
    }

    if (seq !== loadSeq.value) return
    orderDetail.value = next
}

watch(() => props.order, (val) => {
    if (!val) {
        orderDetail.value = null
        orderLogs.value = []
        fulfillerLogs.value = []
        return
    }
    loadPetAndCustomer(val)
    loadOrderLogs(val)
}, { immediate: true, deep: true })

const petDetailVisible = ref(false)

const activeDetailTab = ref('basic')

const getStatusName = (status) => {
    const map = { 0: '待派单', 1: '待接单', 2: '服务中', 3: '待商家确认', 4: '已完成', 5: '已取消' }
    return map[status] || '未知'
}
const getStatusTag = (status) => {
    const map = { 0: 'danger', 1: 'warning', 2: 'primary', 3: 'warning', 4: 'success', 5: 'info' }
    return map[status] || 'info'
}
const getTypeName = (type) => {
    const map = { transport: '宠物接送', feeding: '上门喂遛', washing: '上门洗护' }
    return map[type]
}
const getTransportModeName = (type) => {
    const map = { round: '往返接送', pick: '单程接(到店)', drop: '单程送(回家)' }
    return map[type] || '接送服务'
}

const getTransportLabel = (t) => {
    if (t === 0 || t === '0') return '接'
    if (t === 1 || t === '1') return '送'
    if (t === 2 || t === '2') return '单程接'
    if (t === 3 || t === '3') return '单程送'
    return '接送'
}
const getServiceTimeRange = (timeStr) => {
    if (!timeStr) return '--'
    try {
        if (timeStr.length < 16) return timeStr
        let timePart = timeStr.substring(11, 16)
        let [hh, mm] = timePart.split(':').map(Number)
        let endH = hh + 2
        if (endH >= 24) endH -= 24
        let endHStr = endH.toString().padStart(2, '0')
        return `${timeStr}-${endHStr}:${mm.toString().padStart(2, '0')}`
    } catch (e) {
        return timeStr
    }
}

const currentOrderSteps = computed(() => {
    if (!props.order) return { active: 0, steps: [] }
    const steps = [
        { title: '商户下单', status: 'created', time: '' },
        { title: '运营派单', status: 'dispatched', time: '' },
        { title: '履约接单', status: 'accepted', time: '' },
        { title: '服务中', status: 'serving', time: '' },
        { title: '待商家确认', status: 'confirming', time: '' },
        { title: '已完成', status: 'completed', time: '' }
    ]
    const logs = orderLogs.value || []
    const status = props.order.status
    let active = 0
    const findTime = (keyword) => {
        const log = logs.find(l => l.title.includes(keyword) || l.content.includes(keyword))
        return log ? log.time : ''
    }
    steps[0].time = props.order.createTime || findTime('下单') || findTime('创建')
    if (steps[0].time) active = 1
    if ([0].includes(status)) {
        steps[1].time = findTime('派单') || steps[0].time
    } else {
        steps[1].time = findTime('派单') || ''
    }
    if ([1, 2, 3, 4].includes(status)) active = 2
    steps[2].time = findTime('接单')
    if ([1].includes(status)) {
        steps[2].title = '待履约者接单'
    } else if ([2, 3, 4].includes(status)) {
        steps[2].title = '履约者已接单'
        active = 3
    }
    steps[3].time = findTime('到达') || findTime('出发')
    if ([2].includes(status)) {
        steps[3].title = '服务进行中'
    } else if ([3, 4].includes(status)) {
        steps[3].title = '服务已完成'
        active = 4
    }
    steps[4].time = findTime('等待商家确认') || findTime('待验收')
    if ([3].includes(status)) {
        steps[4].title = '待商家确认'
    } else if ([4].includes(status)) {
        steps[4].title = '商家已确认'
        active = 5
    }
    if (status === 4) {
        steps[5].time = findTime('完成')
        active = 6
    }
    if (status === 5) {
        return {
            active: 1,
            steps: [
                { title: '商户下单', time: steps[0].time },
                { title: '已取消', time: findTime('取消') || '订单已取消' }
            ]
        }
    }
    return { active, steps }
})

const serviceProgressSteps = computed(() => {
    const list = fulfillerLogs.value || []
    return list.map((i) => {
        const media = (i?.photoUrls || []).map(url => {
            const isVideo = url.toLowerCase().match(/\.(mp4|mov|avi|wmv|flv|mkv)$/)
            return {
                type: isVideo ? 'video' : 'image',
                url
            }
        })
        return {
            title: i?.title || '--',
            time: i?.createTime || '',
            icon: undefined,
            color: '#ff9900',
            desc: i?.content || '',
            media: media
        }
    })
})

const handleExportLogs = () => {
    const id = props.order?.id;
    if (!id) {
        ElMessage.warning('订单信息不完整，无法导出');
        return;
    }
    proxy?.download(
        exportSubOrderLogUrl(id),
        {},
        `OrderLogs_${props.order.orderNo}_${new Date().getTime()}.xlsx`
    );
}
</script>

<style scoped>
/* Detail Styles */
.order-detail-drawer :deep(.el-drawer__body) {
    padding: 0 !important;
}

.detail-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
}

.detail-header {
    background: #fff;
    padding: 20px 24px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-no {
    font-size: 20px;
    font-weight: bold;
    color: #303133;
}

.type-tag {
    font-weight: normal;
}

.detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Progress */
.progress-section {
    background: #fff;
    padding: 30px 20px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.custom-steps :deep(.el-step__title) {
    font-size: 13px;
}

/* Top Info Row */
.top-info-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.info-section {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
}

.sec-header .label {
    font-weight: bold;
    font-size: 15px;
    color: #303133;
    border-left: 3px solid #409eff;
    padding-left: 8px;
}

/* Pet Section */
.pet-basic-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.pet-avatar-lg {
    border-radius: 8px;
    background: #ecf5ff;
    color: #409eff;
    font-size: 20px;
    font-weight: bold;
}

.pet-names {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.b-name {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.b-tags {
    display: flex;
    gap: 5px;
}

.pet-desc :deep(.el-descriptions__label) {
    width: 70px;
}

/* User Section */
.u-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.u-info .nm {
    font-weight: bold;
    font-size: 15px;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 6px;
}

.u-info .ph {
    font-size: 13px;
    color: #909399;
    margin-top: 2px;
}

.addr-box {
    background: #fdf6ec;
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.addr-label {
    font-size: 12px;
    color: #e6a23c;
    margin-bottom: 2px;
    font-weight: bold;
}

.addr-txt {
    font-size: 13px;
    color: #606266;
    line-height: 1.4;
}

/* Tabs */
.detail-tabs {
    background: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-height: 400px;
}

.tab-pane-content {
    padding: 15px 0;
}

/* Fulfiller Card inside Tab */
.fulfiller-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
}

.f-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.f-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.f-name {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
}

.f-row2 {
    font-size: 13px;
    color: #606266;
    display: flex;
    gap: 10px;
}

.sep {
    color: #e4e7ed;
}

.empty-state {
    padding: 40px 0;
    text-align: center;
}

/* Progress Card Styles */
.progress-card {
    background: #f8fcfb;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #ebeef5;
}

.p-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: bold;
    color: #303133;
}

.p-desc {
    margin: 0 0 12px;
    color: #606266;
    font-size: 13px;
    line-height: 1.5;
}

.p-media {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.p-video {
    object-fit: cover;
}

.p-img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    cursor: pointer;
    background: #f5f7fa;
}

.p-video-box {
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.p-video-box:hover .play-icon-overlay {
    background: rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%) scale(1.1);
}

/* New Transport Split Styles */
.transport-split-block {
    margin-top: 20px;
}

.transport-grid {
    display: flex;
    gap: 20px;
}

.transport-card {
    flex: 1;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.transport-card .t-header {
    background: #f5f7fa;
    padding: 10px 15px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transport-card .t-header .time {
    font-size: 13px;
    font-weight: bold;
    color: #f56c6c;
}

.transport-card .t-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transport-card .row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #303133;
    line-height: 1.4;
}

.transport-card .row.sub {
    color: #909399;
    font-size: 13px;
    margin-top: 4px;
}

.transport-card .row .el-icon {
    margin-top: 3px;
}

.transport-one {
    border: 1px solid #ebeef5;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transport-one .t-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.transport-one .t-row .time {
    font-size: 13px;
    font-weight: bold;
    color: #f56c6c;
}

.transport-one .t-k {
    width: 40px;
    color: #909399;
    font-size: 13px;
}

.transport-one .t-v {
    color: #303133;
    font-size: 14px;
    line-height: 1.4;
}

.transport-one .t-row.sub .t-v {
    color: #909399;
    font-size: 13px;
}

/* Logs */
.log-card {
    background: #f4f4f5;
    padding: 10px 15px;
    border-radius: 4px;
    position: relative;
    top: -5px;
    width: 100%;
}

.l-tit {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    color: #303133;
}

.l-txt {
    font-size: 13px;
    color: #606266;
    line-height: 1.5;
}
</style>