<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="username" width="120"></el-table-column>
                <el-table-column label="司机手机号" prop="mobile" width="130"></el-table-column>
                <el-table-column label="驾驶证照片" prop="driver_license" min-width="120">
                    <template #default="scope">
                        <div style="display: flex; flex-wrap: wrap; gap: 5px">
                            <template v-if="scope.row.driver_license">
                                <el-image
                                    :src="scope.row.driver_license"
                                    style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #dcdfe6"
                                    fit="cover"
                                    :preview-src-list="[scope.row.driver_license]"
                                    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>
                            </template>
                            <span v-else style="color: #999; font-size: 12px">暂无图片</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="身份证照片" prop="id_card" min-width="120">
                    <template #default="scope">
                        <div style="display: flex; flex-wrap: wrap; gap: 5px">
                            <template v-if="scope.row.id_card">
                                <el-image
                                    v-for="(url, index) in scope.row.id_card.split(',')"
                                    :key="index"
                                    :src="url.trim()"
                                    style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #dcdfe6"
                                    fit="cover"
                                    :preview-src-list="scope.row.id_card.split(',')"
                                    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>
                            </template>
                            <span v-else style="color: #999; font-size: 12px">暂无图片</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="create_time" 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" />
            <DriverDialog ref="DriverDialogRef" @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 { driverList, driverDel } from '@/api/userManage.js';
import DriverDialog from './driverDialog.vue';

const baseSearchRef = ref();
const DriverDialogRef = ref();
const formItemList = reactive([
    {
        label: '司机姓名',
        param: 'username',
        type: 'input',
        placeholder: '请输入司机姓名',
        span: 7,
        labelWidth: 100,
    },
    {
        label: '司机手机号',
        param: 'mobile',
        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,
});
// 列表
const getDataList = () => {
    data.dataListLoading = true;
    const params = {
        ...form,
        ...baseSearchRef.value.penetrateParams(),
    };
    
    driverList(params)
        .then((res) => {
            data.dataListLoading = false;
            data.rows = res.data.rows;
            data.total = res.data.total;
        })
        .catch((error) => {
            data.dataListLoading = false;
            console.error('查询失败:', error);
        });
};
// 删除
const delClick = (row) => {
    ElMessageBox.confirm('请确认是否删除该司机数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            driverDel(row.id)
                .then(() => {
                    ElMessage.success('删除成功');
                    getDataList();
                })
                .catch((error) => {
                    ElMessage.error('删除失败');
                    console.error('删除失败:', error);
                });
        })
        .catch(() => {
            // 用户取消删除
        });
};
// 新增/编辑司机
const showAddDialog = (row) => {
    if (DriverDialogRef.value) {
        DriverDialogRef.value.onShowDialog(row);
    }
};


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

<style lang="less" scoped></style>
