<template>
    <el-dialog
        v-model="dialogVisible"
        title="新增运送清单"
        width="800px"
        :close-on-click-modal="false"
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="120px"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="发货方" prop="shipper">
                        <el-select v-model="formData.shipper" placeholder="请选择发货方" clearable filterable style="width: 100%">
                            <el-option
                                v-for="item in supplierList"
                                :key="item.id"
                                :label="item.username || item.mobile"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="采购方" prop="buyer">
                        <el-select v-model="formData.buyer" placeholder="请选择采购方" clearable filterable style="width: 100%">
                            <el-option
                                v-for="item in buyerList"
                                :key="item.id"
                                :label="item.username || item.mobile"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="车牌号" prop="plateNumber">
                        <el-select v-model="formData.plateNumber" placeholder="请选择车牌号" clearable filterable style="width: 100%">
                            <el-option
                                v-for="item in vehicleOptions"
                                :key="item.id"
                                :label="item.licensePlate"
                                :value="item.licensePlate"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="司机姓名" prop="driverName">
                        <el-select v-model="formData.driverName" placeholder="请选择司机" clearable filterable style="width: 100%" @change="handleDriverChange">
                            <el-option
                                v-for="item in driverOptions"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="司机电话" prop="driverPhone">
                        <el-input v-model="formData.driverPhone" placeholder="请输入司机电话" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="主机设备" prop="serverId">
                        <el-select
                            v-model="formData.serverId"
                            placeholder="请选择主机设备"
                            clearable
                            filterable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in serverList"
                                :key="item.deviceId"
                                :label="item.deviceId + (item.name ? ' - ' + item.name : '')"
                                :value="item.deviceId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="耳标设备" prop="eartagIds">
                        <el-select
                            v-model="formData.eartagIds"
                            placeholder="请选择耳标设备"
                            multiple
                            clearable
                            filterable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in eartagList"
                                :key="item.deviceId"
                                :label="item.deviceId + (item.name ? ' - ' + item.name : '')"
                                :value="item.deviceId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项圈设备" prop="collarIds">
                        <el-select
                            v-model="formData.collarIds"
                            placeholder="请选择项圈设备"
                            multiple
                            clearable
                            filterable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in collarList"
                                :key="item.deviceId"
                                :label="item.deviceId + (item.name ? ' - ' + item.name : '')"
                                :value="item.deviceId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="预计出发时间" prop="estimatedDepartureTime">
                        <el-date-picker
                            v-model="formData.estimatedDepartureTime"
                            type="datetime"
                            placeholder="请选择预计出发时间"
                            style="width: 100%"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预计到达时间" prop="estimatedArrivalTime">
                        <el-date-picker
                            v-model="formData.estimatedArrivalTime"
                            type="datetime"
                            placeholder="请选择预计到达时间"
                            style="width: 100%"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="起点地址" prop="startLocation">
                        <el-input
                            v-model="formData.startLocation"
                            placeholder="请输入或在地图上选择起点地址"
                            @click="showStartLocationMap = true"
                            readonly
                            style="cursor: pointer;"
                        >
                            <template #append>
                                <el-button @click="showStartLocationMap = true">在地图上选择</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="目的地地址" prop="endLocation">
                        <el-input
                            v-model="formData.endLocation"
                            placeholder="请输入或在地图上选择目的地地址"
                            @click="showEndLocationMap = true"
                            readonly
                            style="cursor: pointer;"
                        >
                            <template #append>
                                <el-button @click="showEndLocationMap = true">在地图上选择</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="牛只数量" prop="cattleCount">
                        <el-input-number
                            v-model="formData.cattleCount"
                            :min="1"
                            :max="9999"
                            placeholder="请输入牛只数量"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预估重量(kg)" prop="estimatedWeight">
                        <el-input-number
                            v-model="formData.estimatedWeight"
                            :min="0.01"
                            :precision="2"
                            placeholder="请输入预估重量"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="检疫证号" prop="quarantineCertNo">
                        <el-input v-model="formData.quarantineCertNo" placeholder="请输入检疫证号（可选）" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="备注" prop="remark">
                <el-input
                    v-model="formData.remark"
                    type="textarea"
                    :rows="3"
                    maxlength="500"
                    show-word-limit
                    placeholder="请输入备注信息（可选）"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    
    <!-- 起点地址选择地图 -->
    <el-dialog v-model="showStartLocationMap" title="选择起点地址" width="900px">
        <baidu-map 
            class="map" 
            :center="{lng: 116.404, lat: 39.915}" 
            :zoom="15" 
            :scroll-wheel-zoom="true"
            @click="handleStartLocationClick"
            style="height: 500px"
        >
            <bm-marker v-if="formData.startLon && formData.startLat" :position="{lng: parseFloat(formData.startLon), lat: parseFloat(formData.startLat)}" :dragging="true" @dragging="handleStartMarkerDrag" />
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
        </baidu-map>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showStartLocationMap = false">取消</el-button>
                <el-button type="primary" @click="showStartLocationMap = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
    
    <!-- 目的地地址选择地图 -->
    <el-dialog v-model="showEndLocationMap" title="选择目的地地址" width="900px">
        <baidu-map 
            class="map" 
            :center="{lng: 116.404, lat: 39.915}" 
            :zoom="15" 
            :scroll-wheel-zoom="true"
            @click="handleEndLocationClick"
            style="height: 500px"
        >
            <bm-marker v-if="formData.endLon && formData.endLat" :position="{lng: parseFloat(formData.endLon), lat: parseFloat(formData.endLat)}" :dragging="true" @dragging="handleEndMarkerDrag" />
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
        </baidu-map>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showEndLocationMap = false">取消</el-button>
                <el-button type="primary" @click="showEndLocationMap = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { createDelivery, updateDeviceDeliveryId } from '@/api/shipping.js';
import { memberListByType, driverList as fetchDriverList, vehicleList as fetchVehicleList } from '@/api/userManage.js';
import { iotDeviceQueryList } from '@/api/hardware.js';
import { BaiduMap, BmMapType, BmMarker } from 'vue-baidu-map-3x';

const dialogVisible = ref(false);
const formRef = ref(null);
const submitLoading = ref(false);
const serverList = ref([]);
const eartagList = ref([]);
const collarList = ref([]);
const supplierList = ref([]);
const buyerList = ref([]);
const driverOptions = ref([]);
const vehicleOptions = ref([]);
const showStartLocationMap = ref(false);
const showEndLocationMap = ref(false);

const formData = reactive({
    shipper: null,
    buyer: null,
    plateNumber: null,
    driverName: null,
    driverPhone: '',
    serverId: null,
    eartagIds: [],
    collarIds: [],
    estimatedDepartureTime: '',
    estimatedArrivalTime: '',
    startLocation: '',
    endLocation: '',
    startLat: '',
    startLon: '',
    endLat: '',
    endLon: '',
    cattleCount: 1,
    estimatedWeight: null,
    quarantineCertNo: '',
    remark: '',
});

// 车牌号校验
const validatePlateNumber = (rule, value, callback) => {
    const plateReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-Z0-9]{5}[A-Z0-9挂学警港澳]$/;
    if (!value) {
        callback(new Error('请输入车牌号'));
    } else if (!plateReg.test(value)) {
        callback(new Error('车牌号格式不正确'));
    } else {
        callback();
    }
};

// 手机号校验
const validatePhone = (rule, value, callback) => {
    const phoneReg = /^1[3-9]\d{9}$/;
    if (!value) {
        callback(new Error('请输入司机电话'));
    } else if (!phoneReg.test(value)) {
        callback(new Error('手机号格式不正确'));
    } else {
        callback();
    }
};

// 时间校验
const validateArrivalTime = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请选择预计到达时间'));
    } else if (formData.estimatedDepartureTime && value <= formData.estimatedDepartureTime) {
        callback(new Error('预计到达时间必须晚于出发时间'));
    } else {
        callback();
    }
};

const rules = {
    shipper: [{ required: true, message: '请选择发货方', trigger: 'change' }],
    buyer: [{ required: true, message: '请选择采购方', trigger: 'change' }],
    plateNumber: [{ required: true, validator: validatePlateNumber, trigger: 'blur' }],
    driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
    driverPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
    estimatedDepartureTime: [{ required: true, message: '请选择预计出发时间', trigger: 'change' }],
    estimatedArrivalTime: [{ required: true, validator: validateArrivalTime, trigger: 'change' }],
    startLocation: [{ required: true, message: '请输入起点地址', trigger: 'blur' }],
    endLocation: [{ required: true, message: '请输入目的地地址', trigger: 'blur' }],
    cattleCount: [{ required: true, message: '请输入牛只数量', trigger: 'blur' }],
    estimatedWeight: [{ required: true, message: '请输入预估重量', trigger: 'blur' }],
};

// 完善提交数据
const buildSubmitData = () => {
    const data = { ...formData };
    // 确保经纬度是字符串格式
    if (data.startLat) data.startLat = String(data.startLat);
    if (data.startLon) data.startLon = String(data.startLon);
    if (data.endLat) data.endLat = String(data.endLat);
    if (data.endLon) data.endLon = String(data.endLon);
    return data;
};

// 打开弹窗
const open = () => {
    dialogVisible.value = true;
    loadSupplierAndBuyerList();
    loadDeviceOptions();
    loadDriverList();
    loadVehicleList();
};

// 加载供应商和采购方列表
const loadSupplierAndBuyerList = async () => {
    try {
        // 加载供应商列表 (type=2)
        const supplierRes = await memberListByType({ type: 2, pageNum: 1, pageSize: 9999 });
        if (supplierRes.code === 200) {
            supplierList.value = supplierRes.data?.rows || supplierRes.data || [];
        }
        
        // 加载采购方列表 (type=4)
        const buyerRes = await memberListByType({ type: 4, pageNum: 1, pageSize: 9999 });
        if (buyerRes.code === 200) {
            buyerList.value = buyerRes.data?.rows || buyerRes.data || [];
        }
    } catch (error) {
        console.error('加载供应商/采购方列表失败', error);
    }
};

// 加载设备选项
const loadDeviceOptions = async () => {
    try {
        // 统一使用 iotDeviceQueryList 接口，通过 type 参数区分设备类型
        // type: 1-主机, 2-耳标, 4-项圈
        const [serverRes, eartagRes, collarRes] = await Promise.all([
            iotDeviceQueryList({ pageNum: 1, pageSize: 9999, type: 1 }), // 主机
            iotDeviceQueryList({ pageNum: 1, pageSize: 9999, type: 2 }), // 耳标
            iotDeviceQueryList({ pageNum: 1, pageSize: 9999, type: 4 })  // 项圈
        ]);
        
        if (serverRes.code === 200) {
            // 过滤出主机类型设备 (type === 1)
            const allServers = serverRes.data?.rows || serverRes.data || [];
            serverList.value = allServers.filter(item => item.type === 1 || item.type === '1');
        }
        
        if (eartagRes.code === 200) {
            // 过滤出耳标类型设备 (type === 2)
            const allEartags = eartagRes.data?.rows || eartagRes.data || [];
            eartagList.value = allEartags.filter(item => item.type === 2 || item.type === '2');
        }
        
        if (collarRes.code === 200) {
            // 过滤出项圈类型设备 (type === 4)
            const allCollars = collarRes.data?.rows || collarRes.data || [];
            collarList.value = allCollars.filter(item => item.type === 4 || item.type === '4');
        }
    } catch (error) {
        console.error('加载设备列表失败', error);
    }
};

// 加载司机列表
const loadDriverList = async () => {
    try {
        const res = await fetchDriverList({ pageNum: 1, pageSize: 9999 });
        if (res.code === 200) {
            driverOptions.value = res.data?.rows || res.data || [];
        }
    } catch (error) {
        console.error('加载司机列表失败', error);
    }
};

// 加载车辆列表
const loadVehicleList = async () => {
    try {
        const res = await fetchVehicleList({ pageNum: 1, pageSize: 9999 });
        if (res.code === 200) {
            vehicleOptions.value = res.data?.data?.rows || res.data?.rows || res.data || [];
        }
    } catch (error) {
        console.error('加载车辆列表失败', error);
    }
};

// 司机选择变化时自动填充电话
const handleDriverChange = (driverId) => {
    if (driverId) {
        const driver = driverOptions.value.find(item => item.id === driverId);
        if (driver && driver.mobile) {
            formData.driverPhone = driver.mobile;
        }
    } else {
        formData.driverPhone = '';
    }
};

// 更新选中设备的delivery_id
const updateSelectedDevicesDeliveryId = async (deliveryId) => {
    try {
        const devicesToUpdate = [];
        
        // 收集所有选中的设备
        if (formData.serverId) {
            devicesToUpdate.push(formData.serverId);
        }
        if (formData.eartagIds && formData.eartagIds.length > 0) {
            devicesToUpdate.push(...formData.eartagIds);
        }
        if (formData.collarIds && formData.collarIds.length > 0) {
            devicesToUpdate.push(...formData.collarIds);
        }
        
        // 批量更新设备的delivery_id
        for (const deviceId of devicesToUpdate) {
            await updateDeviceDeliveryId({
                deviceId: deviceId,
                deliveryId: deliveryId
            });
        }
        
        console.log(`成功更新 ${devicesToUpdate.length} 个设备的delivery_id`);
    } catch (error) {
        console.error('更新设备delivery_id失败:', error);
        // 不阻止流程，只记录错误
    }
};

// 提交表单
const handleSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            // 验证地址经纬度
            if (!formData.startLat || !formData.startLon) {
                ElMessage.warning('请在地图上选择起点位置');
                return;
            }
            if (!formData.endLat || !formData.endLon) {
                ElMessage.warning('请在地图上选择目的地位置');
                return;
            }
            
            submitLoading.value = true;
            try {
                const submitData = buildSubmitData();
                console.log('提交的数据:', submitData);
                const res = await createDelivery(submitData);
                if (res.code === 200) {
                    // 获取新创建的运送清单ID
                    const newDeliveryId = res.data?.id;
                    
                    if (newDeliveryId) {
                        // 更新设备的delivery_id
                        await updateSelectedDevicesDeliveryId(newDeliveryId);
                    }
                    
                    ElMessage.success('创建成功');
                    dialogVisible.value = false;
                    emit('success');
                } else {
                    ElMessage.error(res.msg || '创建失败');
                }
            } catch (error) {
                console.error('创建失败:', error);
                ElMessage.error('创建失败，请稍后重试');
            } finally {
                submitLoading.value = false;
            }
        }
    });
};

// 地图点击事件 - 起点
const handleStartLocationClick = (e) => {
    formData.startLon = e.point.lng;
    formData.startLat = e.point.lat;
    // 反向地理编码获取地址
    const geocoder = new window.BMap.Geocoder();
    geocoder.getLocation(e.point, (res) => {
        if (res) {
            formData.startLocation = res.address;
            ElMessage.success('已设置起点地址');
        }
    });
};

// 起点标记拖拽事件
const handleStartMarkerDrag = (e) => {
    formData.startLon = e.point.lng;
    formData.startLat = e.point.lat;
    const geocoder = new window.BMap.Geocoder();
    geocoder.getLocation(e.point, (res) => {
        if (res) {
            formData.startLocation = res.address;
        }
    });
};

// 地图点击事件 - 目的地
const handleEndLocationClick = (e) => {
    formData.endLon = e.point.lng;
    formData.endLat = e.point.lat;
    // 反向地理编码获取地址
    const geocoder = new window.BMap.Geocoder();
    geocoder.getLocation(e.point, (res) => {
        if (res) {
            formData.endLocation = res.address;
            ElMessage.success('已设置目的地地址');
        }
    });
};

// 目的地标记拖拽事件
const handleEndMarkerDrag = (e) => {
    formData.endLon = e.point.lng;
    formData.endLat = e.point.lat;
    const geocoder = new window.BMap.Geocoder();
    geocoder.getLocation(e.point, (res) => {
        if (res) {
            formData.endLocation = res.address;
        }
    });
};

// 关闭弹窗
const handleClose = () => {
    formRef.value?.resetFields();
    dialogVisible.value = false;
    showStartLocationMap.value = false;
    showEndLocationMap.value = false;
};

// 暴露方法给父组件
defineExpose({
    open,
});

const emit = defineEmits(['success']);
</script>

<style scoped>
.map {
    width: 100%;
    height: 500px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>

