feiniao-farm-h5/src/views/old_mini/home/subPages/prescriptionPage.vue

<template>
    <div class="prescription-page">
        <div class="prescription-title">
            <img @click="goBack" src="@/assets/img/home/back.png" alt="" />
            <div class="title-name">农场基本信息</div>
            <div class="title-desc">请认真核对一下内容</div>
        </div>
        <div class="prescription-box" v-loading="loadingPage">
            <!-- <div class="box-title">
                <img src="@/assets/img/home/label-icon.png" />
                农场情况
            </div> -->
            <div class="box-content">
                <div class="box-item">
                    <div class="item-name">
                        <span>请选择您的果园土壤类型</span>
                    </div>
                    <div class="tips">土壤类型确认最佳施肥策略</div>
                    <div class="item-checkbox">
                        <el-radio-group v-model="basicForm.soilTypes">
                            <el-radio-button v-for="(item, index) in basicFarmFormData.soilTypes" :key="index"
                                :label="item.name" :value="item.code" />
                        </el-radio-group>
                    </div>
                </div>
                <div class="box-item">
                    <div class="item-name">
                        <span>请选择您的灌溉方式</span>
                        <span class="sub-name"> (可多选)</span>
                    </div>
                    <div class="tips">灌溉方式确认药肥最佳配比</div>
                    <div class="item-checkbox">
                        <div class="tag-group add-tag-group">
                            <div class="tag-item" :class="{ self: item.custom === true, selected: item.selected }"
                                @click="handleSelect('irrigationMethods', idx, item.custom)"
                                v-for="(item, idx) in basicFarmFormData.irrigationMethods" :key="'ce-' + idx">
                                <span class="text">{{ item.name }}</span>
                            </div>
                            <div class="tag-item last-add" @click="handleAdd('irrigationMethods')"><el-icon class="add-icon">
                                    <Plus />
                                </el-icon>其它方式</div>
                        </div>
                    </div>
                </div>
                <div class="box-item">
                    <div class="item-name">
                        <span>请选择您的农机设备</span>
                        <span class="sub-name"> (可多选)</span>
                    </div>
                    <div class="tips">农闲时可将闲置农机加入农事服务联盟，获取额外服务收益</div>
                    <div class="item-checkbox">
                        <div class="tag-group add-tag-group">
                            <div class="tag-item" :class="{ self: item.custom === true, selected: item.selected }"
                                @click="handleMachinerySelect('machinery', idx, item)"
                                v-for="(item, idx) in basicFarmFormData.machinery" :key="'nj-' + idx">
                                <span class="text">{{ item.name }}</span>
                                <span class="quantity-text" v-show="item.quantity">{{ item.quantity }}</span>
                            </div>
                            <div class="tag-item last-add" @click="handleMachineryAdd('machinery', item)"><el-icon class="add-icon">
                                    <Plus />
                                </el-icon>其它设备</div>
                        </div>
                        <!-- <el-checkbox-group v-model="basicForm.machineryWithQuantity">
                            <el-checkbox-button v-for="(item, index) in basicFarmFormData.machinery" :key="index"
                                :label="item.name" :value="item.code" />
                        </el-checkbox-group> -->
                    </div>
                </div>
                <!-- 农场规模 -->
                <div class="farm-scale-header">
                    <div class="farm-scale-title">请填写您的农场规模</div>
                    <div class="farm-scale-desc">农闲时可以提供农事服务，获取额外收益</div>
                </div>
                <div class="farm-scale-form">
                    <div class="farm-scale-item">
                        <div class="farm-scale-label">
                            农场固定长工
                            <div class="sub-label">(会操作各种小型农机)</div>
                        </div>
                        <el-input v-model="farmScale.regularWorkerCount" placeholder="请输入人数" class="farm-scale-input">
                            <template #append>人</template>
                        </el-input>
                    </div>
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">无人机植保人员</label>
                        <el-input v-model="farmScale.plantProtectionWorkerCount" placeholder="请输入人数" class="farm-scale-input">
                            <template #append>人</template>
                        </el-input>
                    </div>
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">专业树形修剪人员</label>
                        <el-input v-model="farmScale.pruningWorkerCount" placeholder="请输入人数" class="farm-scale-input">
                            <template #append>人</template>
                        </el-input>
                    </div>
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">专业嫁接换种人员</label>
                        <el-input v-model="farmScale.graftingWorkerCount" placeholder="请输入人数" class="farm-scale-input">
                            <template #append>人</template>
                        </el-input>
                    </div>
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">农忙可调度人员</label>
                        <el-input v-model="farmScale.tempDispatchWorkerCount" placeholder="请输入人数" class="farm-scale-input">
                            <template #append>人</template>
                        </el-input>
                    </div>
                </div>
                <div class="box-item">
                    <div class="item-name">
                        <span>希望专家帮助解决的种植难题</span>
                        <span class="sub-name"> (可多选)</span>
                    </div>
                    <div class="item-checkbox">
                        
                        <div class="tag-group add-tag-group">
                            <div class="tag-item" :class="{ self: item.custom === true, selected: item.selected }"
                                @click="handleSelect('improvementAreas', idx, item.custom)"
                                v-for="(item, idx) in basicFarmFormData.improvementAreas" :key="'wt-' + idx">
                                <span class="text">{{ item.name }}</span>
                            </div>
                        </div>
                        <!-- <el-checkbox-group v-model="basicForm.improvementAreas">
                            <el-checkbox-button v-for="(item, index) in basicFarmFormData.improvementAreas" :key="index"
                                :label="item.name" :value="item.code" />
                        </el-checkbox-group> -->
                    </div>
                </div>
                <div class="box-item">
                    <div class="item-name">
                        <span>您最希望得到哪位荔枝专家的农事处方</span>
                    </div>
                    <div class="item-checkbox">
                        <!-- <div class="tag-group add-tag-group">
                            <div class="tag-item" :class="{ self: item.custom === true, selected: item.selected }"
                                @click="handleSelect('expertOptions', idx, item.custom)"
                                v-for="(item, idx) in basicFarmFormData.expertOptions" :key="'zj-' + idx">
                                <span class="text">{{ item.name }}</span>
                            </div>
                        </div> -->
                            <el-radio-group v-model="basicForm.expertCode">
                                <el-radio-button v-for="(item, index) in basicFarmFormData.expertOptions" :key="index"
                                    :label="item.name" :value="item.code" />
                            </el-radio-group>
                        <!-- <el-checkbox-group v-model="basicForm.improvementAreas">
                            <el-checkbox-button v-for="(item, index) in basicFarmFormData.improvementAreas" :key="index"
                                :label="item.name" :value="item.code" />
                        </el-checkbox-group> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="custom-bottom-fixed-btns">
            <!-- <div class="bottom-btn secondary-btn" @click="handlePage">跳过</div> -->
            <div 
                class="bottom-btn primary-btn" 
                @click.stop="handlePage"
                @touchstart.stop
                @touchend.stop
            >确认信息</div>
        </div>
    </div>

    <popup class="add-tag-popup" round v-model:show="showAddPopup">
        <div class="tag-item" v-if="addTypeKey !== 'machinery' || (addTypeKey === 'machinery' && isMachineSelf)">
            <div class="popup-title">编辑<span class="name-text">{{ formNameObj[addTypeKey] }}</span><span class="ml-2">名称</span></div>
            <el-input class="popup-input" v-model="popupInputVal" :placeholder="'请输入' + formNameObj[addTypeKey]" size="large" />
        </div>
        <div class="device-item" v-if="addTypeKey === 'machinery'">
            <div class="popup-title">编辑
                <span class="name-text" v-show="isMachineSelf">{{ formNameObj[addTypeKey] }}</span>
                <span class="name-text" v-show="!isMachineSelf">{{ popupInputVal }}</span>
                <span class="ml-2">数量</span>
            </div>
            <el-input class="popup-input" v-model="popupInputNum" :placeholder="'请输入' + formNameObj[addTypeKey]+'数量'" size="large">
                <template #append>{{ machineryUnit || '辆' }}</template>
            </el-input>
        </div>
        <div class="popup-button">
            <div class="delete" v-if="isEditPopup && isMachineSelf" @click="handleDelete">删除</div>
            <div class="delete" v-else-if="isEditPopup && !isMachineSelf" @click="handleCancelSelect">取消选中</div>
            <div class="cancel" v-else @click="showAddPopup = false">取消</div>
            <div @click="handleConfirm">确认</div>
        </div>
    </popup>

    <!-- 物候期信息 -->
    <popup class="period-popup" round v-model:show="showPeriodPopup">
        <div class="period-header">为了{{ basicForm?.expertInfo?.name }}专家的处方体系适用于您的果园管理，请完善基本物候信息</div>
        <div class="period-content">
            <div class="period-item" v-for="(item, i) in phenologyList" :key="i">
                <div class="period-item-name">{{ item.typeName }}</div>
                <div class="period-item-label">
                    <div class="label-item-group">
                        <div class="label-item">当下物候期</div>
                        <div class="label-item-value period-display">{{ item.phenologyName }}</div>
                    </div>
                    <div class="label-item-group">
                        <div class="label-item">{{ item.startDateLabel || '起始时间' }}</div>
                        <div class="label-item-value">
                            <el-date-picker
                                v-model="item.phenologyStartDate"
                                type="date"
                                :default-value="new Date(2026, 1, 1)"
                                placeholder="选择时间"
                                :disabled-date="disabledDate"
                                :clearable="false"
                                :editable="false"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                style="width: 100%"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="period-footer">
            <div class="period-footer-btn" @click="handlePeriodConfirm">确认信息</div>
        </div>
    </popup>

    <tip-popup
        v-model:show="showSuccessPopup"
        type="success"
        text="专属处方已经生成"
        buttonText="点击查看"
        @closedPopup="handleSuccessConfirm"
        @confirm="handleSuccessConfirm"
    >
        <template #default>
            <div class="expert-info">
                <!-- <img class="expert-img" src="@/assets/img/home/zj-1.png" alt=""> -->
                <el-avatar class="expert-img" :size="26" :src="basicForm?.expertInfo?.avatar" />
                {{ basicForm?.expertInfo?.name }}  专家的
            </div>
        </template>
    </tip-popup>
</template>

<script setup>
import { ref, onActivated, onBeforeUnmount, onDeactivated, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import tipPopup from "@/components/popup/tipPopup.vue";
import { Popup } from "vant";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
const store = useStore();

const outputList = ref([
    { name: "低温冻害" },
    { name: "干旱" },
    { name: "暴雨渍水" },
    { name: "病虫害" },
    { name: "阴天寡照" },
]);
// 默认选中前两项
const outputVal = ref([]);
const disasterDesc = ref("");
// 农场规模
const farmScale = ref({
    regularWorkerCount: "",
    plantProtectionWorkerCount: "",
    pruningWorkerCount: "",
    graftingWorkerCount: "",
    tempDispatchWorkerCount: "",
});
// 初始化默认选中第一项
onActivated(() => {
    getBasicFarmFormData();
    // 为 productList 的每个 group 设置默认选中第一项
});

onMounted(() => {
    getCurrentAndNextPhenology();
});

const loadingPage = ref(false);
const basicForm = ref({
    soilTypes: "",
    irrigationMethods: [],
    machineryWithQuantity: [],
    improvementAreas: [],
    expertCode: "",
    expertInfo: {},
});

const basicFarmFormData = ref({});
const getBasicFarmFormData = () => {
    loadingPage.value = true;
    VE_API.basic_farm.fetchBasicFarmFormData().then(({ data }) => {
        basicFarmFormData.value = data;
        
        // 根据返回的数据进行默认赋值
        // 1. 土壤类型 - 找到 selected: true 的项
        if (data.soilTypes && Array.isArray(data.soilTypes)) {
            const selectedSoilType = data.soilTypes.find(item => item.selected);
            if (selectedSoilType) {
                basicForm.value.soilTypes = selectedSoilType.code;
            }
        }
        
        // 2. 专家选项 - 找到 selected: true 的项
        if (data.expertOptions && Array.isArray(data.expertOptions)) {
            const selectedExpert = data.expertOptions.find(item => item.selected);
            if (selectedExpert) {
                basicForm.value.expertCode = selectedExpert.code;
                basicForm.value.expertInfo = selectedExpert;
            }
        }
        
        // 3. 农场规模数据
        if (data.farmScale) {
            farmScale.value = {
                regularWorkerCount: data.farmScale.regularWorkerCount || "",
                plantProtectionWorkerCount: data.farmScale.plantProtectionWorkerCount || "",
                pruningWorkerCount: data.farmScale.pruningWorkerCount || "",
                tempDispatchWorkerCount: data.farmScale.tempDispatchWorkerCount || "",
                graftingWorkerCount: data.farmScale.graftingWorkerCount || "",
            };
        }
        
        // 4. irrigationMethods, improvementAreas, machinery 的 selected 状态已经在 data 中设置好了
        // 这些数据会直接显示在页面上，因为页面是通过 basicFarmFormData 来渲染的
    }).finally(() => {
        loadingPage.value = false;
    });
}

// 收集表单数据并保存草稿
const saveDraft = async () => {
    try {
        const draftData = handleSubmit();

        // 调用保存草稿接口
        await VE_API.basic_farm.saveDraft(draftData);
    } catch (error) {
        console.error("保存草稿失败:", error);
        // 静默失败，不显示错误提示
    }
};

// 离开页面时保存草稿
onBeforeUnmount(() => {
    // saveDraft();
});

onDeactivated(() => {
    saveDraft();
});

const formNameObj = ref({
    irrigationMethods: '灌溉方式',
    crops: '作物',
    machinery: '农机设备',
    improvementAreas: '希望专家帮助解决的种植难题',
    soilTypes: '土壤类型',
});
const showAddPopup = ref(false);
const addTypeKey = ref("");
const popupInputVal = ref("");
// 农机设备数量
const popupInputNum = ref("");
const machineryUnit = ref("");
const isEditPopup = ref(false);
const currentEditIndex = ref(-1);
function handleAdd(type) {
    isEditPopup.value = false;
    showAddPopup.value = true;
    addTypeKey.value = type;
    popupInputVal.value = "";
    popupInputNum.value = "";
}

function handleMachineryAdd(type) {
    handleAdd(type);
    isMachineSelf.value = true;
}

function handleSelect(type, index, custom) {
    isMachineSelf.value = custom;
    if (custom === true) {
        showAddPopup.value = true;
        isEditPopup.value = true;
        addTypeKey.value = type;
        popupInputVal.value = basicFarmFormData.value[type][index].name;
        currentEditIndex.value = index;
    }
    basicFarmFormData.value[type][index].selected = !basicFarmFormData.value[type][index].selected;
}

// 农机设备
const isMachineSelf = ref(false);
function handleMachinerySelect(type, index, item) {
    showAddPopup.value = true;
    isMachineSelf.value = item.custom;
    isEditPopup.value = item.selected || item.custom;
    addTypeKey.value = type;
    popupInputVal.value = item.name;
    popupInputNum.value = item.quantity;
    machineryUnit.value = item.unit;
    currentEditIndex.value = index;
}

function handleConfirm() {
    if (addTypeKey.value === 'machinery') {
        if (!popupInputNum.value.trim()) {
            return;
        }
        if (isMachineSelf.value && !isEditPopup.value) {
            
            saveCustomOption(popupInputVal.value);
        } else {
            const option = basicFarmFormData.value[addTypeKey.value][currentEditIndex.value]
            option.name = popupInputVal.value;
            option.quantity = popupInputNum.value;
            option.selected = true;
            // 更新名称
            console.log('更新名称', basicFarmFormData.value[addTypeKey.value][currentEditIndex.value]);
            if (option.custom) {
                // updateCustomOption(popupInputVal.value, option.id || option.code);
                updateCustomOption(popupInputVal.value, basicFarmFormData.value[addTypeKey.value][currentEditIndex.value].id);
            }
        }
        currentEditIndex.value = -1;
        isEditPopup.value = false;
        showAddPopup.value = false;
        return;
    }
    if (!popupInputVal.value.trim()) {
        return;
    }
    if (isEditPopup.value) {
        const option = basicFarmFormData.value[addTypeKey.value][currentEditIndex.value]
        option.name = popupInputVal.value;
        currentEditIndex.value = -1;
        isEditPopup.value = false;
        showAddPopup.value = false;
        updateCustomOption(popupInputVal.value, option.id || option.code);
        return;
    }
    // basicFarmFormData.value[addTypeKey.value].push({ name: popupInputVal.value, code: popupInputVal.value, selected: true, custom: true });
    saveCustomOption(popupInputVal.value);

    showAddPopup.value = false;
}

const configTypeObj = {
    irrigationMethods: 'IRRIGATION',
    machinery: 'MACHINERY',
}
function saveCustomOption(name) {
    VE_API.basic_farm.addCustomOption({ configType: configTypeObj[addTypeKey.value], name: name }).then(({ data }) => {
        console.log(data);
        ElMessage.success('保存成功');
        basicFarmFormData.value[addTypeKey.value].push({ id: data.id, name: popupInputVal.value, code: popupInputVal.value, selected: true, custom: true, quantity: popupInputNum.value });
    });
}

function updateCustomOption(name, id) {
    VE_API.basic_farm.updateCustomOption({ id, configType: configTypeObj[addTypeKey.value], name: name }).then(({ data }) => {
        console.log(data);
        ElMessage.success('保存成功');
    });
}

function handleDelete() {
    const option = basicFarmFormData.value[addTypeKey.value][currentEditIndex.value]
    VE_API.basic_farm.deleteCustomOption({ optionId: option.id || option.code }).then(({ data }) => {
        ElMessage.success('删除成功');
        basicFarmFormData.value[addTypeKey.value].splice(currentEditIndex.value, 1);
        currentEditIndex.value = -1;
        showAddPopup.value = false;
    });
}

function handleCancelSelect() {
    const option = basicFarmFormData.value[addTypeKey.value][currentEditIndex.value]
    option.selected = false;
    option.quantity = null;
    currentEditIndex.value = -1;
    showAddPopup.value = false;
}

const goBack = () => {
    // saveDraft();
    // router.go(-1);
    router.replace(`/create_farm?from=${route.query.from}&type=${route.query.type}`)
};

function handleSubmit() {
    // 收集土壤类型（转换为数组）
    const soilTypes = basicForm.value.soilTypes 
        ? (Array.isArray(basicForm.value.soilTypes) ? basicForm.value.soilTypes : [basicForm.value.soilTypes])
        : [];

    // 收集灌溉方式（获取选中的 code）
    const irrigationMethods = (basicFarmFormData.value.irrigationMethods || [])
        .filter(item => item.selected)
        .map(item => item.code || item.id);

    // 收集农机设备（包含 code 和 quantity）
    const machineryWithQuantity = (basicFarmFormData.value.machinery || [])
        .filter(item => item.selected && item.quantity)
        .map(item => ({
            code: item.code || item.id,
            quantity: Number(item.quantity) || 0
        }));

    // 收集希望专家帮助解决的种植难题（获取选中的 code）
    const improvementAreas = (basicFarmFormData.value.improvementAreas || [])
        .filter(item => item.selected)
        .map(item => item.code || item.id);

    // 收集农场规模数据
    const draftData = {
        soilTypes: soilTypes.map(code => Number(code)),
        irrigationMethods: irrigationMethods.map(code => Number(code)),
        machineryWithQuantity: machineryWithQuantity.map(item => ({
            code: Number(item.code),
            quantity: item.quantity
        })),
        regularWorkerCount: Number(farmScale.value.regularWorkerCount) || 0,
        plantProtectionWorkerCount: Number(farmScale.value.plantProtectionWorkerCount) || 0,
        pruningWorkerCount: Number(farmScale.value.pruningWorkerCount) || 0,
        graftingWorkerCount: Number(farmScale.value.graftingWorkerCount) || 0,
        tempDispatchWorkerCount: Number(farmScale.value.tempDispatchWorkerCount) || 0,
        improvementAreas: improvementAreas.map(code => Number(code)),
    };

    // 如果有选择的专家，添加 preferredExpertCode
    if (basicForm.value.expertCode) {
        draftData.preferredExpertCode = Number(basicForm.value.expertCode);
    }

    return draftData;
}

// 校验必填项
function validateForm() {
    // 校验土壤类型
    if (!basicForm.value.soilTypes) {
        ElMessage.warning('请选择您的果园土壤类型');
        return false;
    }

    // 校验灌溉方式
    const irrigationMethods = (basicFarmFormData.value.irrigationMethods || [])
        .filter(item => item.selected);
    if (irrigationMethods.length === 0) {
        ElMessage.warning('请选择您的灌溉方式');
        return false;
    }

    // 校验农机设备
    const machineryWithQuantity = (basicFarmFormData.value.machinery || [])
        .filter(item => item.selected && item.quantity);
    if (machineryWithQuantity.length === 0) {
        ElMessage.warning('请选择您的农机设备并填写数量');
        return false;
    }

    // 校验希望专家帮助解决的种植难题
    const improvementAreas = (basicFarmFormData.value.improvementAreas || [])
        .filter(item => item.selected);
    if (improvementAreas.length === 0) {
        ElMessage.warning('请选择希望专家帮助解决的种植难题');
        return false;
    }

    // 校验专家选项
    if (!basicForm.value.expertCode) {
        ElMessage.warning('请选择您最希望得到哪位荔枝专家的农事处方');
        return false;
    }

    return true;
}
const showSuccessPopup = ref(false);
const handleSuccessConfirm = () => {
    router.push('/agri_record');
}
async function submit() {
    try {
        // 正式提交
        const draftData = handleSubmit();
        const params = {
            ...route.query,
            phenologyId: phenologyList.value[0].phenologyId,
            phenologyStartDate: phenologyList.value[0].phenologyStartDate,
            basicInfo: draftData,
            expertMiniUserId: '81881',
        }
        const res = await VE_API.basic_farm.saveBasicFarmInfoByExpert(params);
        
        if (res.code === 0) {
            showSuccessPopup.value = true;

            // 设置选中当前新增的农场
            localStorage.setItem("selectedFarmId", res.data.id);
            localStorage.setItem("selectedFarmName", res.data.name);
            return true;
        } else {
            ElMessage.error(res.msg || '提交失败，请重试');
            return false;
        }
    } catch (error) {
        console.error('提交失败:', error);
        ElMessage.error('提交失败，请重试');
        return false;
    }
}

const showPeriodPopup = ref(false);
const phenologyList = ref([]);
const disabledDate = (time) => {
    // 获取今天的开始时间（00:00:00）
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    // 获取明天的开始时间（00:00:00）
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);
    
    // 设置最小日期为 2025-01-01
    const minDate = new Date(2025, 10, 1); // 月份从0开始，0表示1月
    minDate.setHours(0, 0, 0, 0);
    
    // 如果时间 < 2025-10-01 或 >= 明天的开始时间，则禁用
    // 只能选择 2025-10-01 到今天的日期范围
    return time.getTime() < minDate.getTime() || time.getTime() >= tomorrow.getTime();
}
const handlePage = async () => {
    try {
        // 先进行校验
        if (!validateForm()) {
            return;
        }
        
        // 安全解析 typeNames
        let typeNames = [];
        try {
            if (route.query.typeNames) {
                typeNames = JSON.parse(route.query.typeNames);
            } else {
                ElMessage.warning('缺少必要参数，请重新进入页面');
                return;
            }
        } catch (e) {
            console.error('解析 typeNames 失败:', e);
            ElMessage.warning('参数格式错误，请重新进入页面');
            return;
        }
        
        // 检查 firstPhenology 是否已初始化
        if (!firstPhenology.value || !firstPhenology.value.phenologyId) {
            ElMessage.warning('物候期数据未加载完成，请稍候再试');
            return;
        }
        
        phenologyList.value = typeNames.map(item => ({
            typeName: item,
            phenologyId: firstPhenology.value.phenologyId,
            startDateLabel: firstPhenology.value.startDateLabel,
            phenologyName: firstPhenology.value.phenologyName,
            phenologyStartDate: '2026-01-01',
        }));
        
        // 如果有选择的专家，添加 preferredExpertCode
        if (basicForm.value.expertCode) {
            const selectedExpert = basicFarmFormData.value.expertOptions?.find(item => item.code === basicForm.value.expertCode);
            if (selectedExpert) {
                basicForm.value.expertInfo = selectedExpert;
            }
        }
        
        showPeriodPopup.value = true;
    } catch (error) {
        console.error('handlePage 执行失败:', error);
        ElMessage.error('操作失败，请重试');
    }
};


// 获取当前日期（YYYY-MM-DD格式）
const getTodayDate = () => {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0");
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
};

const firstPhenology = ref({});
const phenologyData = ref({});
// 获取当前和下一个物候期
const getCurrentAndNextPhenology = async () => {
    try {
        const { data } = await VE_API.home.getCurrentAndNextPhenology({ 
            expertMiniUserId: '81881',
            containerId: route.query.containerId,
        });
        if (data && Array.isArray(data)) {
            // 初始化物候期表单数据，日期使用第一个物候期的 startDate
            firstPhenology.value = data[0];
        }
    } catch (error) {
        console.error("获取物候期数据失败", error);
        ElMessage.error("获取物候期数据失败");
    }
};

// 确认物候期信息
const handlePeriodConfirm = async () => {
    // 校验所有物候期信息是否填写完整
    const hasEmptyDate = phenologyList.value.some(item => !item.phenologyStartDate);
    if (hasEmptyDate) {
        ElMessage.warning('请选择时间');
        return;
    }
    
    // 关闭弹窗并提交表单
    showPeriodPopup.value = false;
    loadingPage.value = true;
    // 正式提交
    const success = await submit();
    loadingPage.value = false;
    if (!success) {
        return;
    }
    
    // 提交成功后跳转
    // if (route.query.type === 'farmer') {
    //     router.push('/agri_record')
    //     return
    // }

    // // 获取所有需要传递的参数，包括 from 参数
    // const queryParams = {
    //     containerId: route.query.containerId,
    // };

    // // 如果存在 from 参数，继续传递
    // if (route.query.from) {
    //     queryParams.from = route.query.from;
    // }

    // // 传递所有农场相关的参数，以便在 agricultural_plan 页面创建农场
    // const farmParams = ['wkt', 'speciesId', 'containerId', 'agriculturalCreate', 'geom', 'address', 'mu', 'name', 'fzr', 'tel', 'defaultFarm', 'typeId', 'speciesName', 'userType'];
    // farmParams.forEach(key => {
    //     if (route.query[key] !== undefined) {
    //         queryParams[key] = route.query[key];
    //     }
    // });
    // router.push({
    //     path: '/agricultural_plan',
    //     query: queryParams
    // });
};
</script>

<style lang="scss" scoped>
.prescription-page {
    position: relative;
    width: 100%;
    height: calc(100vh - 62px);
    overflow: auto;
    box-sizing: border-box;
    background: linear-gradient(to left, #e6f2ff, #8fc5fe);

    .prescription-title {
        padding: 16px 14px;
        background: url("@/assets/img/home/page-bg.png") no-repeat bottom right / 149px 116px;
        background-position-y: 30px;

        img {
            width: 24px;
        }

        .title-name {
            font-size: 22px;
            color: #2e2e2e;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
            font-weight: 500;
            padding: 21px 0 4px 6px;
        }

        .title-desc {
            font-size: 14px;
            color: rgba(49, 49, 49, 0.56);
            padding-left: 6px;
        }
    }

    .prescription-box {
        background: #ffffff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin: 0 10px 10px;
        box-sizing: border-box;
        padding-bottom: 10px;

        .box-title {
            margin: 0 10px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            font-weight: 800;
            font-size: 18px;
            color: #222222;
            padding: 15px 0 10px;

            img {
                width: 14px;
                height: 9px;
            }
        }

        .pt-16 {
            padding-top: 16px;
        }

        .box-content {
            padding: 0 10px;

            .box-item {
                padding-top: 16px;

                .item-name {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.9);
                    font-weight: 500;

                    .required-icon {
                        color: #ff0000;
                        font-size: 16px;
                        margin-right: 4px;
                    }

                    .sub-name {
                        font-size: 12px;
                        font-weight: 400;
                    }
                }

                .tips {
                    // margin-left: 10px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.4);
                }

                .item-checkbox {
                    .tag-group {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 0 7px;
                        font-size: 14px;

                        .tag-item {
                            margin-top: 10px;
                            position: relative;
                            border-radius: 4px;
                            color: #2199f8;
                            // padding: 0 4px;
                            box-sizing: border-box;
                            // min-width: 26vw;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                            cursor: pointer;
                            transition: all 0.3s;
                            .quantity-text {
                                font-size: 10px;
                                color: #fff;
                                position: absolute;
                                right: -7px;
                                top: -7px;
                                width: 14px;
                                text-align: center;
                                line-height: 14px;
                                height: 14px;
                                border-radius: 50%;
                                background: #2199F8;
                            }

                            .text {
                                display: inline-flex;
                                align-items: center;
                            }

                            .edit-icon {
                                margin-left: 8px;
                            }

                            .del-icon {
                                position: absolute;
                                right: -8px;
                                top: -8px;
                                background: #2199F8;
                                border-radius: 50%;
                                width: 16px;
                                height: 16px;
                                font-size: 10px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: #fff;
                            }

                            &.selected {
                                border: 1px solid #2199F8;
                                background: #E8F5FF;
                                color: #2199F8;
                                &::after {
                                    content: "";
                                    position: absolute;
                                    z-index: 9;
                                    bottom: -1px;
                                    right: 0;
                                    width: 18px;
                                    height: 13px;
                                    background: url("@/assets/img/home/checked-bg.png") no-repeat bottom right / 18px 13px;
                                }
                            }
                        }

                        &.add-tag-group {
                            .tag-item {
                                color: #000000;
                                background: rgba(241, 241, 241, 0.12);
                                border: 1px solid #EBEBEB;
                                cursor: pointer;

                                &.self {
                                    border: 1px solid #2199F8;
                                    background: #E8F5FF;
                                    color: #2199F8;
                                    &::after {
                                        content: "";
                                        position: absolute;
                                        z-index: 9;
                                        bottom: -1px;
                                        right: 0;
                                        width: 18px;
                                        height: 13px;
                                        background: url("@/assets/img/home/checked-bg.png") no-repeat bottom right / 18px 13px;
                                    }
                                }

                                &.selected {
                                    border: 1px solid #2199F8;
                                    background: #E8F5FF;
                                    color: #2199F8;
                                }

                                &.last-add {
                                    // background: #F7F7F7;
                                    // color: #343434;
                                    // border: none;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: pointer;

                                    .add-icon {
                                        font-size: 14px;
                                        font-weight: bold;
                                        margin-right: 3px;
                                    }
                                }
                            }
                        }
                    }

                    ::v-deep {

                        .el-radio-button,
                        .el-checkbox-button {
                            margin: 10px 0 0 7px;

                            .el-radio-button__inner,
                            .el-checkbox-button__inner {
                                border: none;
                                border-radius: 6px;
                                // padding: 13px 21px;
                                height: 40px;
                                width: 107px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border: 1px solid #EBEBEB;
                                color: #000000;
                                background: rgba(241, 241, 241, 0.12);
                                font-weight: 400;
                            }

                            &.is-active,
                            &.is-checked {
                                &::after {
                                    content: "";
                                    position: absolute;
                                    z-index: 9;
                                    bottom: -0.5px;
                                    right: 0;
                                    width: 18px;
                                    height: 13px;
                                    background: url("@/assets/img/home/checked-bg.png") no-repeat bottom right / 18px 13px;
                                }

                                .el-radio-button__inner,
                                .el-checkbox-button__inner {
                                    background: rgba(33, 153, 248, 0.1) !important;
                                    color: #2199f8 !important;
                                    border: 1px solid #2199f8 !important;
                                    box-shadow: none;
                                }
                            }

                            &.is-active {
                                .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
                                    background: rgba(33, 153, 248, 0.1) !important;
                                    color: #2199f8 !important;
                                    border: 1px solid #2199f8 !important;
                                    box-shadow: none;
                                    font-weight: 500;
                                }
                            }

                            &.is-checked {
                                .el-checkbox-button__original-checkbox:not(:disabled)+.el-checkbox-button__inner {
                                    background: rgba(33, 153, 248, 0.1) !important;
                                    color: #2199f8 !important;
                                    border: 1px solid #2199f8 !important;
                                    box-shadow: none;
                                    font-weight: 500;
                                }
                            }
                        }

                        .el-radio-button:nth-child(3n-2) {
                            margin-left: 0;
                        }
                    }
                }
            }
        }

        /* 农场规模（与农场情况同一卡片内） */
        .farm-scale-header {
            margin-top: 16px;

            .farm-scale-title {
                font-size: 15px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.9);
            }

            .farm-scale-desc {
                font-size: 13px;
                color: rgba(0, 0, 0, 0.4);
            }
        }

        .farm-scale-form {
            margin-top: 10px;
            border: 0.5px solid rgba(33, 153, 248, 0.5);
            border-radius: 8px;
            padding: 10px;

            .farm-scale-item {
                display: flex;
                align-items: center;
                margin-bottom: 14px;

                &:last-child {
                    margin-bottom: 0;
                }

                .farm-scale-label {
                    flex-shrink: 0;
                    width: 116px;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.9);
                    // text-align: right;
                    margin-right: 10px;
                    .sub-label {
                        font-size: 10px;
                        color: rgba(0, 0, 0, 0.4);
                        line-height: 15px;
                    }
                }

                .farm-scale-input {
                    flex: 1;

                    ::v-deep .el-input-group__append {
                        padding: 0 12px;
                        background: #f5f7fa;
                        color: rgba(0, 0, 0, 0.65);
                        border-color: #dcdfe6;
                        border-radius: 0 4px 4px 0;
                    }

                    ::v-deep .el-input__inner {
                        border-radius: 4px 0 0 4px;
                    }
                }
            }
        }
    }

    .disaster-desc-box {
        padding: 10px;
        display: flex;
        align-items: center;

        span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.9);
            width: 80px;
        }
    }
}


.add-tag-popup {
    width: 90%;
    padding: 24px 16px 20px 16px;
    background: linear-gradient(360deg, #FFFFFF 74.2%, #D1EBFF 100%);

    .popup-title {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 12px;
        color: #000000;
        .name-text{
            font-weight: 500;
            color: #2199F8;
            padding: 0 2px;
        }
    }

    .ml-2 {
        margin-left: 3px;
    }

    .popup-input {
        margin-bottom: 24px;
    }

    .popup-button {
        display: flex;

        div {
            flex: 1;
            font-size: 16px;
            padding: 9px;
            border-radius: 20px;
            background: #2199F8;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .cancel {
            margin-right: 13px;
            color: #000;
            background: #fff;
            border: 1px solid #999999;
        }
        .delete {
            margin-right: 13px;
            color: #FF3D3D;
            background: #fff;
            border: 1px solid rgba(255, 61, 61, 0.4);
        }
    }
}
.period-popup {
    width: 90%;
    padding: 24px 16px 20px 16px;
    background: linear-gradient(360deg, #FFFFFF 74.2%, #D1EBFF 100%);
    
    .period-header {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 16px;
        color: #121212;
        line-height: 22px;
    }
    
    .period-content {
        margin-bottom: 16px;
        
        .period-item {
            background: rgba(33, 153, 248, 0.05);
            border: 1px solid rgba(33, 153, 248, 0.2);
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 16px;
            position: relative;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .period-item-name {
                background: rgba(33, 153, 248, 0.1);
                font-size: 12px;
                color: #2199F8;
                padding: 2px 10px;
                border-radius: 2px;
                font-weight: 400;
                width: fit-content;
            }
            
            .period-item-label {
                margin-top: 10px;
                
                .label-item-group {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12px;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    .label-item {
                        font-size: 14px;
                        color: #1D2129;
                        min-width: 100px;
                        flex-shrink: 0;
                        padding-right: 10px;
                    }
                    
                    .label-item-value {
                        border-radius: 2px;
                        flex: 1;
                        font-size: 14px;
                        color: #1D2129;
                        min-height: 31px;
                        line-height: 31px;
                        display: flex;
                        align-items: center;
                        &.period-display {
                            background: #FFFFFF;
                            border: 0.5px solid rgba(0, 0, 0, 0.2);
                            padding: 0 8px;
                        }
                    }
                }
            }
        }
    }
    
    .period-footer {
        .period-footer-btn {
            width: 100%;
            background: #2199F8;
            color: #ffffff;
            font-size: 16px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            
            &:active {
                opacity: 0.8;
            }
        }
    }
}
.expert-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 36px;
    .expert-img {
        // width: 26px;
        // height: 26px;
        // border-radius: 50%;
        // object-fit: cover;
        margin-right: 5px;
    }
}

// 优化按钮点击体验，解决移动端点击无响应问题
.custom-bottom-fixed-btns {
    z-index: 99 !important; // 提高 z-index，确保不被其他元素遮挡
    pointer-events: auto; // 确保可以接收点击事件
    
    .bottom-btn {
        cursor: pointer;
        user-select: none; // 防止文本选择
        touch-action: manipulation; // 优化移动端触摸响应
        -webkit-tap-highlight-color: transparent; // 移除移动端点击高亮
        position: relative; // 确保点击区域正确
        z-index: 1;
        
        // 添加点击反馈效果
        &:active {
            opacity: 0.8;
            transform: scale(0.98);
        }
        
        &.primary-btn {
            // 确保按钮可点击
            pointer-events: auto;
        }
    }
}
</style>

<style lang="scss">
.el-message--warning .el-message__content {
    line-height: 20px;
}
</style>