<template>
    <div>
        <base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef"></base-search>
        <div style="display: flex; padding: 10px; background: #fff; margin-bottom: 10px">
            <el-button type="primary" @click="showAddDialog(null)">新增车辆</el-button>
        </div>
        <div class="main-container">
            <el-table :data="data.rows" border v-loading="data.dataListLoading" element-loading-text="数据加载中..." style="width: 100%">
                <el-table-column label="车牌号" prop="licensePlate" width="120"></el-table-column>
                <el-table-column label="车头照片" prop="carFrontPhoto" min-width="120">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.carFrontPhoto"
                            :src="scope.row.carFrontPhoto"
                            style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #dcdfe6"
                            fit="cover"
                            :preview-src-list="[scope.row.carFrontPhoto]"
                            preview-teleported
                            :lazy="true"
                        >
                            <template #error>
                                <div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px; color: #909399">
                                    <el-icon size="20"><Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                        <span v-else style="color: #999; font-size: 12px">暂无图片</span>
                    </template>
                </el-table-column>
                <el-table-column label="车尾照片" prop="carRearPhoto" min-width="120">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.carRearPhoto"
                            :src="scope.row.carRearPhoto"
                            style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #dcdfe6"
                            fit="cover"
                            :preview-src-list="[scope.row.carRearPhoto]"
                            preview-teleported
                            :lazy="true"
                        >
                            <template #error>
                                <div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px; color: #909399">
                                    <el-icon size="20"><Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                        <span v-else style="color: #999; font-size: 12px">暂无图片</span>
                    </template>
                </el-table-column>
                <el-table-column label="行驶证" prop="drivingLicensePhoto" min-width="120">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.drivingLicensePhoto"
                            :src="scope.row.drivingLicensePhoto"
                            style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #dcdfe6"
                            fit="cover"
                            :preview-src-list="[scope.row.drivingLicensePhoto]"
                            preview-teleported
                            :lazy="true"
                        >
                            <template #error>
                                <div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px; color: #909399">
                                    <el-icon size="20"><Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                        <span v-else style="color: #999; font-size: 12px">暂无图片</span>
                    </template>
                </el-table-column>
                <el-table-column label="牧运通备案码" prop="recordCode" min-width="120">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.recordCode"
                            :src="scope.row.recordCode"
                            style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #dcdfe6"
                            fit="cover"
                            :preview-src-list="[scope.row.recordCode]"
                            preview-teleported
                            :lazy="true"
                        >
                            <template #error>
                                <div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 4px; color: #909399">
                                    <el-icon size="20"><Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                        <span v-else style="color: #999; font-size: 12px">暂无图片</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
                <el-table-column label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="primary" @click="showAddDialog(scope.row)">编辑</el-button>
                        <el-button link type="danger" @click="delClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="dataListOnEmpty">暂无数据</div>
                </template>
            </el-table>
            <pagination v-model:limit="form.pageSize" v-model:page="form.pageNum" :total="data.total" @pagination="getDataList" />
            <VehicleDialog ref="VehicleDialogRef" @success="getDataList" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';
import baseSearch from '@/components/common/searchCustom/index.vue';
import { vehicleList, vehicleDel } from '@/api/userManage.js';
import VehicleDialog from './vehicleDialog.vue';

const baseSearchRef = ref();
const VehicleDialogRef = ref();
const formItemList = reactive([
    {
        label: '车牌号',
        param: 'licensePlate',
        type: 'input',
        placeholder: '请输入车牌号',
        span: 7,
        labelWidth: 100,
    },
]);

const searchFrom = () => {
    form.pageNum = 1;
    getDataList();
};

const data = reactive({
    rows: [],
    total: 0,
    dataListLoading: false,
});

const form = reactive({
    pageNum: 1,
    pageSize: 10,
    licensePlate: '',
});

const showAddDialog = (row) => {
    VehicleDialogRef.value.open(row);
};

const delClick = (row) => {
    ElMessageBox.confirm('请确认是否删除该车辆数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            vehicleDel(row.id)
                .then(() => {
                    ElMessage.success('删除成功');
                    getDataList();
                })
                .catch((error) => {
                    ElMessage.error('删除失败');
                    console.error('删除失败:', error);
                });
        })
        .catch(() => {});
};

const getDataList = async () => {
    data.dataListLoading = true;
    try {
        const params = {
            pageNum: form.pageNum,
            pageSize: form.pageSize,
            licensePlate: form.licensePlate,
        };
        console.log('查询参数:', params);
        
        const res = await vehicleList(params);
        console.log('查询结果:', res);
        
        if (res.code === 200) {
            // 数据嵌套在 res.data.data 中
            const dataInfo = res.data?.data || res.data;
            data.rows = dataInfo?.rows || [];
            data.total = dataInfo?.total || 0;
            console.log('提取的数据:', dataInfo);
            console.log('列表数据:', data.rows);
        } else {
            ElMessage.error(res.msg || '查询失败');
        }
    } catch (error) {
        console.error('查询车辆列表失败:', error);
        ElMessage.error('查询失败，请稍后重试');
    } finally {
        data.dataListLoading = false;
                }
};

onMounted(() => {
    getDataList();
});
</script>

<style scoped>
.main-container {
    padding: 10px;
    background: #fff;
}

.dataListOnEmpty {
    text-align: center;
    padding: 20px;
    color: #999;
}
</style>

