<template>
    <el-dialog v-model="data.dialogVisible" title="详情" style="width: 800px; padding-bottom: 20px" :key="data.dialogKey">
        <div v-loading="data.loading" element-loading-text="加载中...">
            <el-row :gutter="40" class="el-row">
                <el-col :span="12"><span class="label">司机姓名：</span>{{ data.info.username || '' }}</el-col>
                <el-col :span="12"><span class="label">司机手机号：</span>{{ data.info.mobile || '' }}</el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12"><span class="label">账号状态：</span>{{ data.info.status == 1 ? '启用' : '禁用' }}</el-col>
                <el-col :span="12"><span class="label">车牌号：</span>{{ data.info.car_number || '' }}</el-col>
            </el-row>
        <el-row :gutter="40">
            <el-col :span="12" style="display: flex">
                <div><span class="label">驾驶证：</span></div>
                <template v-if="data.info.driver_license">
                    <el-image
                        v-for="(item, index) in getImageList(data.info.driver_license)"
                        :key="index"
                        :src="item"
                        style="width: 80px; height: 80px; margin-right: 10px"
                        fit="cover"
                        :preview-src-list="getImageList(data.info.driver_license)"
                        preview-teleported
                    >
                        <template #error>
                            <div style="width: 50px; height: 50px; display: flex; justify-content: center" class="image-slot">
                                <el-icon :size="20"><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
                <span v-else style="color: #999">暂无图片</span>
            </el-col>
            <el-col :span="12" style="display: flex">
                <div><span class="label">行驶证：</span></div>
                <template v-if="data.info.driving_license">
                    <el-image
                        v-for="(item, index) in getImageList(data.info.driving_license)"
                        :key="index"
                        :src="item"
                        style="width: 80px; height: 80px; margin-right: 10px"
                        fit="cover"
                        :preview-src-list="getImageList(data.info.driving_license)"
                        preview-teleported
                    >
                        <template #error>
                            <div style="width: 50px; height: 50px; display: flex; justify-content: center" class="image-slot">
                                <el-icon :size="20"><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
                <span v-else style="color: #999">暂无图片</span>
            </el-col>
        </el-row>
        <el-row :gutter="40">
            <el-col :span="12" style="display: flex"
                ><span class="label">牧运通备案码：</span>
                <template v-if="data.info.record_code">
                    <el-image
                        v-for="(item, index) in getImageList(data.info.record_code)"
                        :key="index"
                        :src="item"
                        style="width: 80px; height: 80px; margin-right: 10px"
                        fit="cover"
                        :preview-src-list="getImageList(data.info.record_code)"
                        preview-teleported
                    >
                        <template #error>
                            <div style="width: 50px; height: 50px; display: flex; justify-content: center" class="image-slot">
                                <el-icon :size="20"><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
                <span v-else style="color: #999">暂无图片</span>
            </el-col>
            <el-col :span="12" style="display: flex">
                <div><span class="label">车头&车身照片：</span></div>
                <template v-if="data.info.car_img">
                    <el-image
                        v-for="(item, index) in getImageList(data.info.car_img)"
                        :key="index"
                        :src="item"
                        style="width: 80px; height: 80px; margin-right: 10px"
                        fit="cover"
                        :preview-src-list="getImageList(data.info.car_img)"
                        preview-teleported
                    >
                        <template #error>
                            <div style="width: 50px; height: 50px; display: flex; justify-content: center" class="image-slot">
                                <el-icon :size="20"><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
                <span v-else style="color: #999">暂无图片</span>
            </el-col>
        </el-row>
        <el-row :gutter="40">
            <el-col :span="12" style="display: flex">
                <div><span class="label">身份证前后面：</span></div>
                <template v-if="data.info.id_card">
                    <el-image
                        v-for="(item, index) in getImageList(data.info.id_card)"
                        :key="index"
                        :src="item"
                        style="width: 80px; height: 80px; margin-right: 10px"
                        fit="cover"
                        :preview-src-list="getImageList(data.info.id_card)"
                        preview-teleported
                    >
                        <template #error>
                            <div style="width: 50px; height: 50px; display: flex; justify-content: center" class="image-slot">
                                <el-icon :size="20"><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
                <span v-else style="color: #999">暂无图片</span>
            </el-col>
        </el-row>
        <el-row :gutter="40"
            ><el-col :span="12"><span class="label">备注：</span>{{ data.info.remark || '无' }}</el-col>
        </el-row>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { driverDetail } from '@/api/userManage.js';

const data = reactive({
    dialogVisible: false,
    info: {},
    loading: false,
    dialogKey: 0,
});
const handleClose = () => {
    data.dialogVisible = false;
};
const onShowDetailDialog = async (row) => {
    data.dialogVisible = true;
    data.loading = true;
    data.dialogKey++; // 强制重新渲染对话框
    
    if (row && row.id) {
        try {
            // 根据ID重新获取最新的司机数据
            const res = await driverDetail(row.id);
            if (res.code === 200) {
                data.info = res.data;
            } else {
                // 如果API调用失败，使用传入的row数据作为备选
                data.info = row;
            }
        } catch (error) {
            console.error('获取司机详情失败:', error);
            // 如果API调用失败，使用传入的row数据作为备选
            data.info = row;
        }
    } else {
        data.info = row || {};
    }
    
    data.loading = false;
};

// 处理逗号分隔的图片URL
const getImageList = (imageUrl) => {
    if (!imageUrl || imageUrl.trim() === '') {
        return [];
    }
    // 按逗号分割并过滤空字符串
    return imageUrl.split(',').map(url => url.trim()).filter(url => url !== '');
};

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

<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
}
.label {
    width: 120px;
    display: inline-block;
    text-align: right;
}
</style>
