<template>
    <el-dialog v-model="data.dialogVisible" :title="data.title" :before-close="handleClose" style="width: 650px; padding-bottom: 20px">
        <el-form ref="formDataRef" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="司机姓名" prop="username">
                <el-input v-model="ruleForm.username" placeholder="请输入司机姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="司机手机号" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请输入司机手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="账号状态" prop="status">
                <el-radio-group v-model="ruleForm.status">
                    <el-radio :value="0">启用</el-radio>
                    <el-radio :value="1">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="车牌号" prop="carNumber">
                <el-input v-model="ruleForm.carNumber" placeholder="请输入车牌号" clearable></el-input>
            </el-form-item>
            <el-form-item label="驾驶证" prop="driverImg">
                <el-upload
                    :limit="2"
                    list-type="picture-card"
                    action="/api/common/upload"
                    :on-success="
                        (response, file, fileList) => {
                            return handleAvatarSuccess(response, file, fileList, 'driverImg');
                        }
                    "
                    :on-preview="handlePreview"
                    :on-remove="
                        (file, fileList) => {
                            return handleRemove(file, fileList, 'driverImg');
                        }
                    "
                    :before-upload="beforeAvatarUpload"
                    :file-list="ruleForm.driverImg"
                    :headers="importHeaders"
                    :on-exceed="
                        (files, uploadFiles) => {
                            return handleExceed(files, uploadFiles, 2);
                        }
                    "
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="行驶证" prop="licenseImg">
                <el-upload
                    :limit="2"
                    list-type="picture-card"
                    action="/api/common/upload"
                    :on-success="
                        (response, file, fileList) => {
                            return handleAvatarSuccess(response, file, fileList, 'licenseImg');
                        }
                    "
                    :on-preview="handlePreview"
                    :on-remove="
                        (file, fileList) => {
                            return handleRemove(file, fileList, 'licenseImg');
                        }
                    "
                    :before-upload="beforeAvatarUpload"
                    :file-list="ruleForm.licenseImg"
                    :headers="importHeaders"
                    :on-exceed="
                        (files, uploadFiles) => {
                            return handleExceed(files, uploadFiles, 2);
                        }
                    "
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="牧运通备案码" prop="codeImg">
                <el-upload
                    :limit="2"
                    list-type="picture-card"
                    action="/api/common/upload"
                    :on-success="
                        (response, file, fileList) => {
                            return handleAvatarSuccess(response, file, fileList, 'codeImg');
                        }
                    "
                    :on-preview="handlePreview"
                    :on-remove="
                        (file, fileList) => {
                            return handleRemove(file, fileList, 'codeImg');
                        }
                    "
                    :before-upload="beforeAvatarUpload"
                    :file-list="ruleForm.codeImg"
                    :headers="importHeaders"
                    :on-exceed="
                        (files, uploadFiles) => {
                            return handleExceed(files, uploadFiles, 2);
                        }
                    "
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="车头&车身照片" prop="carImg">
                <el-upload
                    :limit="2"
                    list-type="picture-card"
                    action="/api/common/upload"
                    :on-success="
                        (response, file, fileList) => {
                            return handleAvatarSuccess(response, file, fileList, 'carImg');
                        }
                    "
                    :on-preview="handlePreview"
                    :on-remove="
                        (file, fileList) => {
                            return handleRemove(file, fileList, 'carImg');
                        }
                    "
                    :before-upload="beforeAvatarUpload"
                    :file-list="ruleForm.carImg"
                    :headers="importHeaders"
                    :on-exceed="
                        (files, uploadFiles) => {
                            return handleExceed(files, uploadFiles, 2);
                        }
                    "
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="身份证前后面" prop="idCardImg">
                <el-upload
                    :limit="2"
                    list-type="picture-card"
                    action="/api/common/upload"
                    :on-success="
                        (response, file, fileList) => {
                            return handleAvatarSuccess(response, file, fileList, 'idCardImg');
                        }
                    "
                    :on-preview="handlePreview"
                    :on-remove="
                        (file, fileList) => {
                            return handleRemove(file, fileList, 'idCardImg');
                        }
                    "
                    :before-upload="beforeAvatarUpload"
                    :file-list="ruleForm.idCardImg"
                    :headers="importHeaders"
                    :on-exceed="
                        (files, uploadFiles) => {
                            return handleExceed(files, uploadFiles, 2);
                        }
                    "
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="ruleForm.remark" placeholder="请输入备注" clearable></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="data.saveLoading" type="primary" @click="onClickSave">保存</el-button>
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
        <el-dialog v-model="data.dialogVisibleImg">
            <img w-full :src="data.dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { driverAdd, driverEdit } from '@/api/userManage.js';
import { checkMobile } from '~/utils/validateFuns.js';
import { useUserStore } from '../../store/user';

const userStore = useUserStore();
const importHeaders = reactive({ Authorization: userStore.$state.token });
const emits = defineEmits();
const formDataRef = ref();
const data = reactive({
    dialogVisible: false,
    title: '',
    saveLoading: false,
    dialogVisibleImg: false,
    dialogImageUrl: '',
});
const ruleForm = reactive({
    username: '', // 司机姓名
    mobile: '', // 司机手机号
    status: '', // 账号状态
    carNumber: '', // 车牌号
    driverImg: [], // 驾驶证
    licenseImg: [], // 行驶证
    codeImg: [], // 牧运通备案码
    carImg: [], // 车头&车身照片
    idCardImg: [], // 身份证前后面
    remark: '', // 备注
});

const rules = reactive({
    username: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
    mobile: [
        {
            required: true,
            validator(rule, value, callback) {
                if (!value) {
                    callback(new Error('请输入司机手机号'));
                }
                if (!checkMobile(value)) {
                    callback(new Error('请输入正确的手机号'));
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
    status: [{ required: true, message: '请选择账户状态', trigger: 'change' }],
    carNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
    driverImg: [{ required: true, message: '请上传驾驶证', trigger: 'change' }],
    licenseImg: [{ required: true, message: '请上传行驶证', trigger: 'change' }],
    codeImg: [{ required: true, message: '请上传牧运通备案码', trigger: 'change' }],
    carImg: [{ required: true, message: '请上传车头&车身照片', trigger: 'change' }],
    idCardImg: [{ required: true, message: '请上传身份证前后面', trigger: 'change' }],
});
const handleAvatarSuccess = (res, file, fileList, type) => {
    console.log('上传成功响应:', res);
    console.log('文件信息:', file);
    console.log('类型:', type);
    
    if (ruleForm.hasOwnProperty(type)) {
        // 检查响应格式，支持多种可能的响应结构
        let imageUrl = null;
        
        if (res && res.data && res.data.src) {
            // 格式1: res.data.src
            imageUrl = res.data.src;
        } else if (res && res.data && typeof res.data === 'string') {
            // 格式2: res.data 直接是URL字符串
            imageUrl = res.data;
        } else if (res && res.url) {
            // 格式3: res.url
            imageUrl = res.url;
        } else if (res && typeof res === 'string') {
            // 格式4: res 直接是URL字符串
            imageUrl = res;
        } else {
            console.error('无法解析上传响应:', res);
            ElMessage.error('图片上传失败：响应格式不正确');
            return;
        }
        
        console.log('解析到的图片URL:', imageUrl);
        ruleForm[type].push({ url: imageUrl });
    }
};
// 移除
const handleRemove = (file, fileList, type) => {
    if (ruleForm.hasOwnProperty(type)) {
        ruleForm[type] = fileList;
    }
};
// 上传时 - 判断
const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt1M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt1M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt1M;
};
// 超出限制
const handleExceed = (files, uploadFiles, number) => {
    ElMessage({
        message: `最多上传${number}张照片`,
        type: 'warning',
    });
};
// 预览
const handlePreview = (file) => {
    data.dialogImageUrl = file.url;
    data.dialogVisibleImg = true;
};
const handleClose = () => {
    if (formDataRef.value) {
        formDataRef.value.resetFields();
    }
    data.dialogVisible = false;
};

// 保存按钮
const onClickSave = () => {
    if (formDataRef.value) {
        formDataRef.value.validate((valid) => {
            if (valid) {
                const params = {
                    username: ruleForm.username,
                    mobile: ruleForm.mobile,
                    status: ruleForm.status,
                    carNumber: ruleForm.carNumber,
                    remark: ruleForm.remark,
                };
                params.driverLicense = ruleForm.driverImg.length > 0 ? ruleForm.driverImg.map((item) => item.url).join(',') : '';
                params.drivingLicense = ruleForm.licenseImg.length > 0 ? ruleForm.licenseImg.map((item) => item.url).join(',') : '';
                params.carImg = ruleForm.carImg.length > 0 ? ruleForm.carImg.map((item) => item.url).join(',') : '';
                params.recordCode = ruleForm.codeImg.length > 0 ? ruleForm.codeImg.map((item) => item.url).join(',') : '';
                params.idCard = ruleForm.idCardImg.length > 0 ? ruleForm.idCardImg.map((item) => item.url).join(',') : '';
                // params.recordCode = ruleForm.codeImg.length > 0 ? ruleForm.codeImg[0].url : '';
                data.saveLoading = true;
                if (data.title === '新增司机') {
                    driverAdd(params)
                        .then((res) => {
                            data.saveLoading = false;
                            if (res.code === 200) {
                                ElMessage({
                                    message: res.msg,
                                    type: 'success',
                                });
                                emits('success');
                                if (formDataRef.value) {
                                    formDataRef.value.resetFields();
                                    data.dialogVisible = false;
                                } else {
                                    data.saveLoading = false;
                                    ElMessage.error(res.msg);
                                }
                            }
                        })
                        .catch((err) => {
                            data.saveLoading = false;
                        });
                } else {
                    params.id = ruleForm.id;
                    driverEdit(params)
                        .then((res) => {
                            data.saveLoading = false;
                            if (res.code === 200) {
                                ElMessage({
                                    message: res.msg,
                                    type: 'success',
                                });
                                emits('success');
                                if (formDataRef.value) {
                                    formDataRef.value.resetFields();
                                    data.dialogVisible = false;
                                } else {
                                    data.saveLoading = false;
                                    ElMessage.error(res.msg);
                                }
                            }
                        })
                        .catch((err) => {
                            data.saveLoading = false;
                        });
                }
            } else {
                console.log('error submit!');
            }
        });
    }
};
const onShowDialog = (row) => {
    data.title = row ? '编辑司机' : '新增司机';
    data.dialogVisible = true;
    if (formDataRef.value) {
        formDataRef.value.resetFields();
    }
    if (row) {
        nextTick(() => {
            ruleForm.id = row.id;
            ruleForm.username = row.username; // 司机姓名
            ruleForm.mobile = row.mobile; // 司机手机号
            ruleForm.carNumber = row.car_number; // 车牌号 - 修复字段名
            ruleForm.status = row.status || '1'; // 账号状态 - 添加默认值
            ruleForm.remark = row.remark; // 备注
            ruleForm.driverImg = row.driver_license
                ? getImageList(row.driver_license).map((item) => {
                      return {
                          url: item,
                      };
                  })
                : [];
            ruleForm.licenseImg = row.driving_license
                ? getImageList(row.driving_license).map((item) => {
                      return {
                          url: item,
                      };
                  })
                : [];
            ruleForm.carImg = row.car_img
                ? getImageList(row.car_img).map((item) => {
                      return {
                          url: item,
                      };
                  })
                : [];
            ruleForm.codeImg = row.record_code
                ? getImageList(row.record_code).map((item) => {
                      return {
                          url: item,
                      };
                  })
                : [];
            ruleForm.idCardImg = row.id_card
                ? getImageList(row.id_card).map((item) => {
                      return {
                          url: item,
                      };
                  })
                : [];
        });
    }
};

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

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

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