feiniao-farm-h5/src/views/old_mini/create_farm/index.vue

<template>
    <div class="create-farm">
        <custom-header
            :name="paramsType === 'client' ? '新增用户' : paramsType === 'edit' ? '编辑农场' : '创建农场'"
            :isGoBack="true"
            @goback="backgToHome"
        ></custom-header>
        <!-- 地图 -->
        <div class="map-container" ref="mapContainer"></div>
        <div class="farm-content">
            <div class="top-mask"></div>
            <div class="farm-filter">
                <el-select
                    v-model="locationVal"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="搜索位置"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @change="handleSearchRes"
                    popper-class="location-search-popper"
                >
                    <el-option
                        v-for="(item, index) in locationOptions.list"
                        :key="index"
                        :label="item.title"
                        :value="{ value: item.point, item }"
                    >
                        <span>{{ item.title }}</span>
                        <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
                    </el-option>
                </el-select>
            </div>

            <!-- 创建 -->
            <div class="create-wrap">
                <div class="create-box">
                    <div class="box-content">
                        <div class="create-title">
                            <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
                            {{ paramsType === "client" ? "新增用户" : paramsType === "edit" ? "编辑农场" : "创建农场" }}
                        </div>
                        <div class="create-content">
                            <div class="create-from">
                                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                                    <el-form-item label="农场位置" prop="address">
                                        <div class="position-wrap">
                                            <el-input
                                                placeholder="农场位置"
                                                readonly
                                                v-model="ruleForm.address"
                                                autocomplete="off"
                                            />
                                            <div class="draw-btn" @click="toSubPage">
                                                {{ hasDefaultPolygon ? "点击勾选地块" : "新增地块" }}
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="种植作物" prop="speciesItem">
                                        <div class="select-wrap">
                                            <el-select
                                                @change="changeSpecie"
                                                class="select-item"
                                                v-model="ruleForm.speciesItem"
                                                placeholder="品类"
                                            >
                                                <el-option
                                                    v-for="(item, index) in specieList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="{ value: item.id, ...item }"
                                                />
                                            </el-select>
                                            <el-select
                                                v-model="ruleForm.typeId"
                                                placeholder="品种"
                                                class="period-select select-item"
                                            >
                                                <el-option
                                                    v-for="(item, index) in fruitsList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="item.id"
                                                />
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="联系人" prop="fzr">
                                        <div class="area-box">
                                            <el-input
                                                placeholder="请输入联系人姓名"
                                                v-model="ruleForm.fzr"
                                                autocomplete="off"
                                                style="width: fit-content"
                                            />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="联系电话" prop="tel">
                                        <div class="area-box">
                                            <el-input
                                                placeholder="请输入联系人电话"
                                                v-model="ruleForm.tel"
                                                autocomplete="off"
                                                style="width: fit-content"
                                            />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="农场面积" prop="mu">
                                        <div class="area-box">
                                            <el-input
                                                :placeholder="
                                                    isFromEditMap ? '勾选地块获得农场面积' : '请输入农场的真实面积'
                                                "
                                                v-model="ruleForm.mu"
                                                :readonly="isFromEditMap"
                                                type="text"
                                                autocomplete="off"
                                                style="width: fit-content"
                                                @input="handleMianjiInput"
                                                @keypress="handleMianjiKeypress"
                                            />
                                            <div class="unit">亩</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="客户类型" prop="userType" class="select-wrap client-wrap">
                                        <el-select class="select-item" v-model="ruleForm.userType" placeholder="请选择">
                                            <el-option label="普通用户" :value="1" />
                                            <el-option label="托管用户" :value="2" />
                                            <el-option label="优质客户" :value="3" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="农场名称" prop="name">
                                        <el-input
                                            placeholder="请输入您的农场名称"
                                            v-model="ruleForm.name"
                                            autocomplete="off"
                                            @input="handleFarmNameInput"
                                        />
                                    </el-form-item>
                                    <!-- <Checkbox
                                        v-if="paramsType !== 'client' && curRole == 0"
                                        class="checkbox"
                                        icon-size="18px"
                                        shape="square"
                                        v-model="ruleForm.defaultFarm"
                                        >是否勾选为默认农场</Checkbox
                                    > -->
                                </el-form>
                            </div>
                            <div class="create-btn">
                                <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">
                                    {{
                                        paramsType === "client"
                                            ? "添加"
                                            : paramsType === "edit"
                                            ? "确认修改"
                                            : "立即创建"
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 农情采集成功弹窗 -->
    <tip-popup
        v-model:show="showSuccessPopup"
        type="success"
        text="农情采集成功"
        @confirm="handlePopupConfirm"
        @handleClickOverlay="handlePopupConfirm"
    />
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import IndexMap from "./map/index.js";
import { useRoute, useRouter } from "vue-router";
import { mapLocation } from "./map/index.js";
import { onMounted, ref, reactive, watch, onActivated, nextTick } from "vue";
import { useStore } from "vuex";
import { convertPointToArray } from "@/utils/index";
import { ElMessage } from "element-plus";
import { Checkbox } from "vant";
import tipPopup from "@/components/popup/tipPopup.vue";
import wx from "weixin-js-sdk";
import { transformFromGCJToWGS, transformFromWGSToGCJ } from "@/utils/WSCoordinate.js";

const route = useRoute();
const router = useRouter();
const store = useStore();

const indexMap = new IndexMap();
const mapContainer = ref(null);

// 农情采集成功弹窗
const showSuccessPopup = ref(false);

const handlePopupConfirm = () => {
    showSuccessPopup.value = false;
    router.replace(`/home`);
};

// 标记是否从编辑地图页面确认返回
const isFromEditMap = ref(false);

// 标记是否已创建默认地块
const hasDefaultPolygon = ref(false);

// 标记用户是否手动修改过农场名称
const isFarmNameManuallyModified = ref(false);

/**
 * 根据中心点生成指定边长的正方形地块WKT
 * @param {Array} center - 中心点坐标 [lng, lat]
 * @param {Number} sideLength - 正方形边长(米)
 * @returns {Object} 包含WKT字符串和面积(亩)的对象
 */
function generateSquarePolygonBySideLength(center, sideLength) {
    // 确保输入是数字类型
    const lng = parseFloat(center[0]);
    const lat = parseFloat(center[1]);

    // 半边长(米)
    const halfSide = sideLength / 2;

    // 纬度方向:1度约等于111000米
    const latDelta = halfSide / 111000;

    // 经度方向:需要根据纬度调整,1度约等于111000 * cos(lat)米
    const lngDelta = halfSide / (111000 * Math.cos((lat * Math.PI) / 180));

    // 计算四个顶点(逆时针顺序)
    const topLeft = [lng - lngDelta, lat + latDelta];
    const topRight = [lng + lngDelta, lat + latDelta];
    const bottomRight = [lng + lngDelta, lat - latDelta];
    const bottomLeft = [lng - lngDelta, lat - latDelta];

    // 生成MULTIPOLYGON格式的WKT(需要闭合,所以第一个点要重复)
    // 明确使用join来格式化坐标点
    const formatPoint = (point) => `${point[0]} ${point[1]}`;
    const coordinates = [topLeft, topRight, bottomRight, bottomLeft, topLeft].map(formatPoint).join(", ");

    // 注意：MULTIPOLYGON 和括号之间需要有一个空格
    const wkt = `MULTIPOLYGON (((${coordinates})))`;

    // 计算面积(亩): 边长200米 = 40,000平方米 ≈ 60亩
    const areaInSquareMeters = sideLength * sideLength;
    const areaInMu = (areaInSquareMeters / 666.67).toFixed(2);

    return { wkt, area: areaInMu };
}

/**
 * 根据中心点和亩数生成正方形地块WKT
 * @param {Array} center - 中心点坐标 [lng, lat]
 * @param {Number} mu - 面积(亩)
 * @returns {Object} 包含WKT字符串和面积(亩)的对象
 */
function generateSquarePolygonByMu(center, mu) {
    // 确保输入是数字类型
    const lng = parseFloat(center[0]);
    const lat = parseFloat(center[1]);

    // 1亩 ≈ 666.67平方米
    const areaInSquareMeters = mu * 666.67;
    // 正方形边长(米)
    const sideLength = Math.sqrt(areaInSquareMeters);
    // 半边长(米)
    const halfSide = sideLength / 2;

    // 纬度方向:1度约等于111000米
    const latDelta = halfSide / 111000;

    // 经度方向:需要根据纬度调整,1度约等于111000 * cos(lat)米
    const lngDelta = halfSide / (111000 * Math.cos((lat * Math.PI) / 180));

    // 计算四个顶点(逆时针顺序)
    const topLeft = [lng - lngDelta, lat + latDelta];
    const topRight = [lng + lngDelta, lat + latDelta];
    const bottomRight = [lng + lngDelta, lat - latDelta];
    const bottomLeft = [lng - lngDelta, lat - latDelta];

    // 生成MULTIPOLYGON格式的WKT(需要闭合,所以第一个点要重复)
    const formatPoint = (point) => `${point[0]} ${point[1]}`;
    const coordinates = [topLeft, topRight, bottomRight, bottomLeft, topLeft].map(formatPoint).join(", ");

    // 注意：MULTIPOLYGON 和括号之间需要有一个空格
    const wkt = `MULTIPOLYGON (((${coordinates})))`;

    return { wkt, area: parseFloat(mu).toFixed(2) };
}

onMounted(() => {
    // 清除上一次的地块数据，确保每次进入都是全新状态
    store.commit("home/SET_FARM_POLYGON", null);
    isFromEditMap.value = false; // 初始化时可以手动输入
    hasDefaultPolygon.value = false; // 初始化时没有默认地块

    centerPoint.value = store.state.home.miniUserLocationPoint;
    const arr = convertPointToArray(centerPoint.value);
    getLocationName(`${arr[1]},${arr[0]}`);
    indexMap.initMap(centerPoint.value, mapContainer.value);

    // 不再初始化时绘制默认地块，等待用户点击"新增地块"按钮
    // 清空地块和面积数据
    polygonArr.value = null;
    ruleForm.mu = "";
    ruleForm.typeId = "";

    // 如果是编辑模式，等待品类列表加载完成后再回填数据
    if (route.query.type === "edit" && store.state.home.editFarmData) {
        getSpecieList().then(() => {
            populateEditData();
        });
    } else {
        getSpecieList();
    }
});

const polygonArr = ref(null);
const paramsType = ref(null);
onActivated(() => {
    paramsType.value = route.query.type;
    // 仅在携带 isReload 标记、且不是编辑/小程序回流场景时，认为是一次全新创建，重置表单和地块，
    // 避免破坏原有自动生成农场名称等逻辑
    if (route.query.isReload && paramsType.value !== "edit" && !route.query.miniJson) {
        // 重置表单字段到初始值
        ruleFormRef.value && ruleFormRef.value.resetFields();
        // 重置与地块绘制相关的内部状态
        polygonArr.value = null;
        isFromEditMap.value = false;
        hasDefaultPolygon.value = false;
        // 清空上一次地块缓存
        store.commit("home/SET_FARM_POLYGON", null);
    }
    // 确保地图已初始化，使用 nextTick 等待 DOM 更新
    nextTick(() => {
        // 检查地图实例是否已初始化
        if (!indexMap.kmap) {
            // 如果地图未初始化，重新初始化
            if (mapContainer.value) {
                centerPoint.value = store.state.home.miniUserLocationPoint;
                const arr = convertPointToArray(centerPoint.value);
                indexMap.initMap(centerPoint.value, mapContainer.value);
            }
            // 等待地图初始化完成后再继续
            setTimeout(() => {
                handleMapUpdate();
            }, 100);
            return;
        }

        handleMapUpdate();
    });
});

// 处理地图更新的逻辑
function handleMapUpdate() {
    if (route.query.isReload) {
        // 清除旧的地块数据
        store.commit("home/SET_FARM_POLYGON", null);
        isFromEditMap.value = false; // 从home进入，可以手动输入
        hasDefaultPolygon.value = false; // 重置默认地块状态

        centerPoint.value = store.state.home.miniUserLocationPoint;
        const arr = convertPointToArray(centerPoint.value);
        getLocationName(`${arr[1]},${arr[0]}`);
        indexMap.setMapPosition(arr);

        indexMap.clearLayer();

        // 不再自动生成默认地块，等待用户点击"新增地块"
        polygonArr.value = null;
        ruleForm.mu = "";
        ruleForm.typeId = "";
        ruleForm.defaultFarm = false;

        return; // 直接返回，不执行下面的逻辑
    }

    indexMap.clearLayer();
    // 绘制勾画范围（从edit_map返回的情况）
    const polygonData = store.state.home.polygonData;

    // 优先处理从编辑地图页面返回的数据
    if (polygonData) {
        // 检查地块数据是否有效（数组存在且不为空）
        const hasValidGeometry =
            polygonData.geometryArr && Array.isArray(polygonData.geometryArr) && polygonData.geometryArr.length > 0;

        if (hasValidGeometry) {
            // 用户从edit_map返回，且有有效的地块数据
            // 根据 isConfirmed 判断是否锁定输入框
            if (polygonData.isConfirmed) {
                // 用户点击了"确认"按钮，锁定输入框并显示精确面积
                isFromEditMap.value = true;
                ruleForm.mu = polygonData.mianji;
            } else {
                // 用户点击了"取消"，不锁定输入框，面积保持原样
                isFromEditMap.value = false;
                // 面积输入框保持之前的值，不更新
            }
            // 使用 nextTick 确保地图渲染完成后再设置地块
            nextTick(() => {
                indexMap.setAreaGeometry(polygonData.geometryArr);
            });
            polygonArr.value = polygonData.geometryArr;
            // 有地块数据时，标记已创建默认地块
            hasDefaultPolygon.value = true;
        } else {
            // 用户在编辑页面删除了所有地块
            // 重置所有状态
            polygonArr.value = null;
            ruleForm.mu = "";
            isFromEditMap.value = false;
            hasDefaultPolygon.value = false;
            ruleForm.defaultFarm = false;
        }
    } else if (route.query.type === "edit" && store.state.home.editFarmData) {
        // 如果是编辑模式且没有从编辑地图返回的数据，回填原始编辑数据
        populateEditData();
    } else if (centerPoint.value && polygonArr.value) {
        // 没有新的编辑数据，保持当前地块
        // 同样需要检查数据有效性
        if (Array.isArray(polygonArr.value) && polygonArr.value.length > 0) {
            nextTick(() => {
                indexMap.setAreaGeometry(polygonArr.value);
            });
            // 保持 hasDefaultPolygon 状态
        }
    }
}

// 搜索
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const locationVal = ref(null);
const locationOptions = reactive({
    list: [],
});
const loading = ref(false);
const remoteMethod = async (keyword) => {
    if (keyword) {
        locationOptions.list = [];
        loading.value = true;
        const params = {
            key: MAP_KEY,
            keyword,
            location: route.query.userLocation || "113.61702297075017,23.584863449735067",
        };
        await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
            if (data && data.length) {
                data.forEach((item) => {
                    item.point = item.location.lat + "," + item.location.lng;
                    locationOptions.list.push(item);
                });
            }
        });
        VE_API.old_mini_map.search(params).then(({ data }) => {
            loading.value = false;
            data.forEach((item) => {
                item.point = item.location.lat + "," + item.location.lng;
                locationOptions.list.push(item);
            });
        });
    } else {
        locationOptions.list = [];
    }
};

const handleSearchRes = (v) => {
    const parts = v.value.split(",");
    let { latitude, longitude } = transformFromGCJToWGS(parseFloat(parts[0]), parseFloat(parts[1]));
    const coordinateArray = [longitude, latitude];
    indexMap.setMapPosition(coordinateArray);
    centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`;
    ruleForm.address = v.item?.title || v.item?.address;
    pointAddress.value = v.item?.province + v.item?.city + v.item?.district;
    // 更新farmCity以便后续更新农场名称
    farmCity.value = v.item?.city + v.item?.district || "";
    // 地址修改后，如果满足条件则自动更新农场名称
    updateFarmNameIfNeeded();
};

// 表单
const ruleFormRef = ref(null);
const ruleForm = reactive({
    address: "",
    mu: "",
    speciesItem: null,
    typeId: "",
    name: "",
    fzr: "",
    tel: "",
    userType: 1,
    defaultFarm: 0, // 0:否 1:是
});
// 自定义验证规则：验证面积必须是大于0的数字
const validateMianji = (rule, value, callback) => {
    if (!value) {
        callback(new Error("请输入农场面积"));
    } else {
        const num = parseFloat(value);
        if (isNaN(num)) {
            callback(new Error("面积必须是数字"));
        } else if (num <= 0) {
            callback(new Error("面积必须大于0"));
        } else {
            callback();
        }
    }
};

const rules = reactive({
    address: [{ required: true, message: "请选择农场位置", trigger: "blur" }],
    userType: [{ required: true, message: "请选择客户类型", trigger: "blur" }],
    mu: [
        { required: true, message: "请输入农场面积", trigger: "blur" },
        { validator: validateMianji, trigger: ["blur", "change"] },
    ],
    speciesItem: [{ required: true, message: "请选择品类", trigger: "blur" }],
    typeId: [{ required: true, message: "请选择品种", trigger: "blur" }],
    name: [{ required: true, message: "请输入您的农场名称", trigger: ["blur", "change"] }],
    fzr: [{ required: true, message: "请输入联系人姓名", trigger: ["blur", "change"] }],
    tel: [
        { required: true, message: "请输入联系人电话", trigger: ["blur"] },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: ["blur"],
        },
    ],
    defaultFarm: [{ required: true, message: "请选择是否为默认农场", trigger: "blur" }],
});

const curRole = localStorage.getItem("SET_USER_CUR_ROLE");

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            const params = {
                ...ruleForm,
                wkt: centerPoint.value,
                speciesId: ruleForm.speciesItem?.id,
                containerId: ruleForm.speciesItem?.defaultContainerId,
                agriculturalCreate: route.query.type === "client" ? 1 : 0,
                // 编辑时geom不是数组，新增时是数组
                geom:
                    route.query.type === "edit"
                        ? polygonArr.value && polygonArr.value.length > 0
                            ? polygonArr.value[0]
                            : null
                        : polygonArr.value,
            };

            // 如果是编辑模式，添加农场ID
            if (route.query.type === "edit" && route.query.farmId) {
                params.farmId = route.query.farmId;
            }

            if (route.query.type === "client") {
                // 处理 geom 参数，如果是数组需要序列化
                const queryParams = {
                    ...params,
                    ...route.query,
                };

                // 如果 geom 是数组，需要序列化为 JSON 字符串
                if (Array.isArray(queryParams.geom)) {
                    queryParams.geom = JSON.stringify(queryParams.geom);
                }
                queryParams.speciesName = ruleForm.speciesItem?.name;

                router.push({
                    path: "/prescription",
                    query: queryParams,
                });
                return;
            }

            const apiCall = route.query.type === "edit" ? VE_API.farm.updateFarm(params) : VE_API.farm.saveFarm(params);

            apiCall.then((res) => {
                if (res.code === 0) {
                    ElMessage.success(route.query.type === "edit" ? "修改成功" : "创建成功");
                    // 重置表单和地块数据
                    ruleFormRef.value.resetFields();
                    store.commit("home/SET_FARM_POLYGON", null);
                    store.commit("home/SET_EDIT_FARM_DATA", null); // 清除编辑数据
                    polygonArr.value = null;
                    isFromEditMap.value = false;

                    if (route.query.type !== "edit" && curRole == 0) {
                        localStorage.setItem("selectedFarmId", res.data.id);
                        localStorage.setItem("selectedFarmName", res.data.name);
                    }

                    // 根据来源页面决定跳转目标
                    const fromPage = route.query.from;
                    if (fromPage && fromPage !== "details") {
                        // 如果是从monitor页面来的
                        router.replace(`/${fromPage}`);
                    } else if (fromPage === "details") {
                        router.go(-1);
                    } else {
                        if (route.query.miniJson) {
                            const json = JSON.parse(route.query.miniJson);
                            //上传图片
                            VE_API.ali
                                .uploadImg({
                                    farmId: res.data.id,
                                    images: json.images,
                                    uploadDate: formatDate(new Date()),
                                })
                                .then(({ code, msg }) => {
                                    if (code === 0) {
                                        showSuccessPopup.value = true;
                                    } else {
                                        ElMessage.error(msg);
                                    }
                                });
                        } else {
                            router.replace(`/home`);
                        }
                    }
                } else {
                    ElMessage.error(res.msg);
                }
            });
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    // 清除地块数据
    store.commit("home/SET_FARM_POLYGON", null);
    polygonArr.value = null;
    isFromEditMap.value = false;
    hasDefaultPolygon.value = false; // 重置默认地块状态

    // 根据来源页面决定返回目标
    const fromPage = route.query.from;
    if (fromPage && fromPage !== "details") {
        router.replace(`/${fromPage}`);
        return;
    }
    router.go(-1);
};

const centerPoint = ref(null);

function toSubPage() {
    // 如果还没有默认地块，先创建默认地块
    if (!hasDefaultPolygon.value) {
        if (centerPoint.value) {
            const arr = convertPointToArray(centerPoint.value);
            const squareData = generateSquarePolygonBySideLength(arr, 200); // 200米边长
            const geometryData = {
                geometryArr: [squareData.wkt],
                mianji: squareData.area,
            };

            // 绘制默认地块
            indexMap.setAreaGeometry(geometryData.geometryArr);

            // 保存地块数据
            polygonArr.value = geometryData.geometryArr;

            // 标记已创建默认地块
            hasDefaultPolygon.value = true;

            // 不跳转，停留在当前页面
            return;
        }
    }

    // 如果已有默认地块，则跳转到编辑页面
    // 保存到store中以便在编辑页面回显
    if (polygonArr.value) {
        const polygonData = {
            geometryArr: polygonArr.value,
            mianji: ruleForm.mu || "", // 保存用户输入的面积，如果没有输入则为空
            isConfirmed: false, // 标记：还未从编辑页面确认返回
        };
        store.commit("home/SET_FARM_POLYGON", polygonData);
    }

    router.push(
        `/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.address}&pointAddress=${pointAddress.value}&from=${route.query.from}&type=${route.query.type}`
    );
}

const pointAddress = ref(null);
const farmCity = ref(null);
function getLocationName(location) {
    const params = {
        key: MAP_KEY,
        location,
    };
    VE_API.old_mini_map.location(params).then(({ result }) => {
        // locationVal.value = result.formatted_addresses.recommend;
        const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
        ruleForm.address = add;
        pointAddress.value = result.address;
        farmCity.value = result.address_component?.city + result.address_component?.district || "";
        // 地址修改后，如果满足条件则自动更新农场名称
        updateFarmNameIfNeeded();
    });
}

watch(
    () => mapLocation.data,
    (newValue, oldValue) => {
        if (newValue) {
            let { latitude, longitude } = transformFromWGSToGCJ(newValue[1], newValue[0]);
            centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`;
            getLocationName(`${latitude},${longitude}`);
        }
    }
);

const specieList = ref([]);

function getSpecieList() {
    return VE_API.farm.fetchSpecieList({ point: centerPoint.value }).then(({ data }) => {
        specieList.value = data;
        return data;
    });
}

async function changeSpecie(v) {
    const data = await checkExistsEnabledScheme(v.defaultContainerId);
    if (!data) {
        ElMessage.warning("该品类暂无可用方案，请选择其他品类");
        ruleForm.speciesItem = "";
        ruleForm.typeId = "";
        fruitsList.value = [];
        return;
    }
    getFruitsTypeItemList(v.id);
    // 清空品种选择
    ruleForm.typeId = "";
    // 只有在创建模式下且用户没有手动修改过农场名称时，才自动设置农场名称
    if (route.query.type !== "edit" && !isFarmNameManuallyModified.value) {
        ruleForm.name = farmCity.value + v.name + "农场";
    }
}

//判断是否存在可用方案
async function checkExistsEnabledScheme(containerId) {
    const { data } = await VE_API.home.existsEnabledScheme({containerId});
    return data;
}

const fruitsList = ref([]);
function getFruitsTypeItemList(parentId) {
    VE_API.farm.fruitsTypeItemList({ parentId }).then(({ data }) => {
        fruitsList.value = data;
    });
}

/**
 * 格式化日期为 YYYY-MM-DD 格式
 * @param {Date} date - 日期对象
 * @returns {string} 格式化后的日期字符串
 */
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
}

function backgToHome() {
    ruleFormRef.value?.resetFields();

    // 根据来源页面决定返回目标
    const fromPage = route.query.from;
    if (route.query.miniJson) {
        const json = JSON.parse(route.query.miniJson);
        if (json.isMini) {
            const dropdownGardenItem = ref({
                organId: json.farmId,
                periodId: json.periodId,
                name: json.name,
                page: "create_farm",
                showFarmSelect: true,
                images: json.images,
            });
            wx.miniProgram.reLaunch({
                url: `/pages/subPages/new_recognize/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
            });
        }
    } else {
        if (fromPage && fromPage !== "details") {
            router.replace(`/${fromPage}`);
            return;
        } else {
            router.go(-1);
        }
    }
}

// 处理面积按键输入 - 只允许数字和小数点
function handleMianjiKeypress(event) {
    // 如果是从编辑地图返回的，不允许手动修改
    if (isFromEditMap.value) {
        event.preventDefault();
        return;
    }

    const charCode = event.which ? event.which : event.keyCode;
    const char = String.fromCharCode(charCode);

    // 允许数字 (0-9) 和小数点 (.)
    if (!/^[0-9.]$/.test(char)) {
        event.preventDefault();
        return;
    }

    // 如果已经有小数点，不允许再输入小数点
    const currentValue = ruleForm.mu || "";
    if (char === "." && currentValue.includes(".")) {
        event.preventDefault();
        return;
    }

    // 不允许以小数点开头
    if (char === "." && !currentValue) {
        event.preventDefault();
        return;
    }
}

// 处理农场名称输入
function handleFarmNameInput() {
    // 标记用户已手动修改过农场名称
    isFarmNameManuallyModified.value = true;
}

// 根据地址更新农场名称（如果满足条件）
function updateFarmNameIfNeeded() {
    // 只有在创建模式下且用户没有手动修改过农场名称且已选择品类时，才自动更新农场名称
    if (route.query.type !== "edit" && !isFarmNameManuallyModified.value && ruleForm.speciesItem && farmCity.value) {
        ruleForm.name = farmCity.value + ruleForm.speciesItem.name + "农场";
    }
}

// 回填编辑数据
function populateEditData() {
    const editData = store.state.home.editFarmData;
    if (!editData) {
        return;
    }

    // 回填基本信息
    ruleForm.name = editData.name || "";
    ruleForm.fzr = editData.fzr || "";
    ruleForm.tel = editData.tel || "";
    ruleForm.defaultFarm = editData.defaultOption || false;
    ruleForm.mu = editData.mianji || "";
    ruleForm.address = editData.address || "";

    // 设置地图中心点
    if (editData.pointWkt) {
        centerPoint.value = editData.pointWkt;
        const arr = convertPointToArray(editData.pointWkt);
        indexMap.setMapPosition(arr);
    }

    // 处理地块数据
    if (editData.geomWkt) {
        polygonArr.value = [editData.geomWkt];
        indexMap.setAreaGeometry([editData.geomWkt]);
        hasDefaultPolygon.value = true;
        isFromEditMap.value = true; // 编辑模式下锁定面积输入
    }

    // 处理作物数据
    if (editData.speciesId && editData.speciesName) {
        // 设置品类 - 需要匹配模板中的数据结构
        ruleForm.speciesItem = {
            value: editData.speciesId,
            id: editData.speciesId,
            name: editData.speciesName,
            defaultContainerId: editData.containerId,
        };

        // 获取品种列表
        getFruitsTypeItemList(editData.speciesId);

        // 设置品种
        if (editData.typeId) {
            ruleForm.typeId = editData.typeId;
        }
    }

    // 设置地址信息
    if (editData.district) {
        try {
            const districtInfo = JSON.parse(editData.district);
            pointAddress.value = districtInfo.province + districtInfo.city + districtInfo.district;
        } catch (e) {
            console.warn("解析地址信息失败:", e);
        }
    }
}

// 处理面积输入
let mianjiInputTimer = null;
function handleMianjiInput(value) {
    // 如果是从编辑地图返回的，不允许手动修改
    if (isFromEditMap.value) {
        return;
    }

    // 过滤非法字符，只保留数字和小数点
    let filteredValue = value.replace(/[^\d.]/g, "");

    // 确保只有一个小数点
    const parts = filteredValue.split(".");
    if (parts.length > 2) {
        filteredValue = parts[0] + "." + parts.slice(1).join("");
    }

    // 限制小数点后最多2位
    if (parts.length === 2 && parts[1].length > 2) {
        filteredValue = parts[0] + "." + parts[1].substring(0, 2);
    }

    // 更新输入框的值（如果被过滤了）
    if (filteredValue !== value) {
        ruleForm.mu = filteredValue;
        return;
    }

    // 清除之前的定时器
    if (mianjiInputTimer) {
        clearTimeout(mianjiInputTimer);
    }

    // 防抖处理，用户停止输入500ms后再更新地块
    mianjiInputTimer = setTimeout(() => {
        const mu = parseFloat(filteredValue);

        // 验证输入的有效性
        if (!mu || isNaN(mu) || mu <= 0) {
            return;
        }

        // 根据亩数重新生成地块
        if (centerPoint.value) {
            const arr = convertPointToArray(centerPoint.value);
            const squareData = generateSquarePolygonByMu(arr, mu);

            const geometryData = {
                geometryArr: [squareData.wkt],
                mianji: squareData.area,
            };

            // 清除旧地块
            indexMap.clearLayer();
            // 绘制新地块
            indexMap.setAreaGeometry(geometryData.geometryArr);

            // 更新状态
            polygonArr.value = geometryData.geometryArr;
            // 标记已创建默认地块
            hasDefaultPolygon.value = true;
        }
    }, 500);
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-form-item--default {
        margin-bottom: 20px;
    }
}
.create-farm {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .map-container {
        width: 100%;
        height: calc(100% - 320px);
    }
    .checkbox {
        padding: 0 12px 6px;
        font-size: 15px;
    }
    .farm-content {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        pointer-events: none;
        z-index: 2;
        .top-mask {
            height: 100px;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
        }
    }
    .farm-filter {
        pointer-events: all;
        margin: 12px;
        position: relative;
        z-index: 10;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        &::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 9px;
            width: 14px;
            height: 14px;
            background: url("@/assets/img/home/search.png") no-repeat center center / 100% 100%;
        }

        ::v-deep {
            .el-select__wrapper {
                background: none;
                box-shadow: none;
                padding-left: 34px;
                font-size: 12px;
                .el-select__selected-item,
                .el-select__placeholder,
                .el-select__input {
                    color: rgba(255, 255, 255, 0.6);
                    &.is-transparent {
                        color: #ccc;
                        font-size: 12px;
                    }
                }
            }
            .el-select {
                transition: all 0.3s;
                .el-input.is-focus .el-input__wrapper {
                    box-shadow: none !important;
                }
            }
            .el-input {
                .el-input__wrapper {
                    background: none;
                    box-shadow: none;
                    padding-left: 18px;
                    font-size: 11px;
                    .el-input__inner {
                        color: rgba(255, 255, 255, 0.6);
                    }
                    &.is-focus {
                        .el-input__inner {
                            color: #ccc;
                            font-size: 11px;
                        }
                    }
                }
            }
        }
    }

    .create-wrap {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, transparent 0%, #f5f7fb 20%);
    }

    .create-box {
        pointer-events: all;
        margin: 0 12px 10px 12px;
        width: calc(100% - 24px);
        background: #e0f1fe;
        border-radius: 14px;
        .box-content {
            position: relative;
            &::after {
                position: absolute;
                right: 10px;
                top: 2px;
                content: "";
                width: 79px;
                height: 72px;
                background: url("@/assets/img/home/creat-bg.png") no-repeat center / 100% 100%;
            }
        }
        .create-title {
            display: flex;
            align-items: center;
            padding: 12px 6px 12px 12px;
            color: #0089f5;
            font-size: 18px;
            font-weight: bold;
            .title-icon {
                width: 18px;
                padding-right: 10px;
            }
        }
        .create-content {
            background: #fff;
            border-radius: 14px;
            padding: 12px;
            position: relative;
            z-index: 2;

            .create-from {
                .select-wrap {
                    display: flex;
                    // width: 86%;
                    ::v-deep {
                        .el-input__wrapper {
                            background: none;
                            box-shadow: none;
                        }
                        .el-input__inner {
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.5);
                        }
                        .el-select__wrapper {
                            background: none;
                            box-shadow: none;
                            gap: 2px;
                            padding: 4px 2px;
                            justify-content: center;
                        }
                        .el-select__selection {
                            flex: none;
                            width: fit-content;
                        }
                        .el-select__placeholder {
                            color: #000;
                            position: static;
                            transform: none;
                            width: fit-content;
                        }
                    }
                    &.client-wrap {
                        ::v-deep {
                            .el-select__wrapper {
                                justify-content: flex-start;
                            }
                        }
                    }
                    // .select-item {
                    //     width: fit-content;
                    // }
                    .period-select {
                        margin-left: 6px;
                    }
                    .select-item {
                        min-width: 76px;
                    }
                }
                ::v-deep {
                    .el-form-item__label {
                        color: #000;
                    }
                    .el-form-item__error {
                        top: 117%;
                    }
                    .el-form-item {
                        position: relative;
                        &::after {
                            content: "";
                            position: absolute;
                            left: 60px;
                            bottom: -5px;
                            width: calc(100% - 60px);
                            height: 1px;
                            background: rgba(0, 0, 0, 0.08);
                        }
                    }
                    .el-input__wrapper {
                        box-shadow: none;
                        padding: 1px 6px;
                    }
                }
                .area-box {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    .unit {
                        padding-right: 10px;
                    }
                }
                .position-wrap {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .draw-btn {
                        flex: none;
                        padding: 0 12px;
                        height: 30px;
                        line-height: 30px;
                        box-sizing: border-box;
                        color: #2199f8;
                        border: 1px solid #2199f8;
                        background: rgba(33, 153, 248, 0.1);
                        border-radius: 20px;
                        font-size: 12px;
                    }
                }
            }
            .create-btn {
                display: flex;
                align-items: center;
                width: 100%;
                padding-top: 10px;
                .btn-item {
                    flex: 1;
                    text-align: center;
                    padding: 0 11px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 34px;
                    font-size: 16px;
                    box-sizing: border-box;
                    &.sencond-btn {
                        border: 1px solid rgba(153, 153, 153, 0.5);
                        color: #666666;
                    }
                    &.primary-btn {
                        background: linear-gradient(180deg, #76c3ff, #2199f8);
                        color: #fff;
                    }
                }
                .btn-item + .btn-item {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>

<style lang="scss">
.location-search-popper {
    .el-select-dropdown__list {
        max-width: 96vw;
        overflow-x: auto;
    }
    .sub-title {
        padding-left: 6px;
        font-size: 12px;
        color: #ccc;
    }
}
</style>