feiniao-farm-h5/src/views/old_mini/modify_work/addWork.vue

<template>
    <div class="new-farming-page" ref="pageRef">
        <custom-header name="新增农事"></custom-header>
        <div class="new-farming-content">
            <el-form
                ref="formRef"
                style="max-width: 600px"
                label-position="left"
                :rules="rules"
                :model="dynamicValidateForm"
                class="demo-dynamic"
            >
                <div class="farm-card">
                    <div class="card-title between">
                        基本信息
                        <div>
                            <el-select size="small" v-model="tagName" placeholder="标记为" style="width: 94px">
                                <el-option
                                v-for="item in tagList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="info-content">
                        <el-form-item label-width="82px" class="form-item name-item" prop="name" label="农事名称"> 
                            <el-input
                                v-model="dynamicValidateForm.name"
                                style="width: 100%"
                                placeholder="请输入农事名称"
                            />
                        </el-form-item>
                        <el-form-item label-width="82px" class="form-item" prop="executeDate" label="执行时间">
                            <el-date-picker
                                v-model="dynamicValidateForm.executeDate"
                                value-format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择执行时间"
                                style="width: 100%"
                                :editable="false"
                            />
                        </el-form-item>
                    </div>
                </div>

                <div class="farm-card">
                    <!-- 农情互动 -->
                    <div class="card-title border-bottom between">
                        <div>农情互动</div>
                        <!-- <span class="del-tag">删除互动</span> -->
                    </div>
                    <div class="interact-form">
                        <div class="interact-form-item" data-interact-field="phenologyId">
                            <div class="form-label">互动阶段</div>
                            <div class="form-input-wrapper two-select">
                                <div class="select-item">
                                    <el-select
                                        style="width: 100%"
                                        v-model="interactFormData.phenologyId"
                                        placeholder="请选择物候期"
                                        @change="handlePhenologyChange"
                                        :editable="false">
                                        <el-option
                                            v-for="item in phenologyList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                        ></el-option>
                                    </el-select>
                                </div>
                                <div class="select-item">
                                    <el-select style="width: 100%" v-model="interactFormData.reproductiveId" placeholder="请选择物候期" :editable="false">
                                        <el-option
                                            v-for="item in reproductiveList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="interact-form-item" data-interact-field="interactionTime">
                            <div class="form-label">互动日期</div>
                            <div class="form-input-wrapper">
                                <el-date-picker
                                    v-model="interactFormData.interactionTime"
                                    style="width: 100%"
                                    type="date"
                                    placeholder="请选择日期"
                                    :editable="false"
                                />
                            </div>
                        </div> -->
                        <div class="interact-form-item" data-interact-field="interactionQuestion">
                            <div class="form-label">互动问题</div>
                            <el-input
                                v-model="interactFormData.interactionQuestion"
                                type="textarea"
                                :rows="4"
                                placeholder="请设置互动问题"
                                class="question-textarea"
                            />
                        </div>
                    </div>
                </div>

                <div class="farm-card prescription-content common-inputs">
                    <div class="card-title pb-12 between">
                        药物处方
                        <div class="add-tag" @click="addDomain()">
                            <el-icon color="#2199F8"><Plus /></el-icon>新增药物
                        </div>
                    </div>
                    <el-form-item label-width="82px" class="form-item" prop="usageMode" label="施用方式">
                        <el-select
                            v-model="dynamicValidateForm.usageMode"
                            placeholder="请选择施用方式"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(usage, uId) in allUsageModeList"
                                :key="uId"
                                :label="usage"
                                :value="usage"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="dynamicValidateForm.usageMode === '叶面施'"
                        label-width="82px"
                        class="form-item"
                        prop="executeStyle"
                        label="执行方式"
                    >
                        <el-select
                            class="select-item"
                            v-model="dynamicValidateForm.executeStyle"
                            placeholder="执行方式"
                            @change="handleExecutionMethodChange"
                        >
                            <el-option
                                v-for="(item, index) in modeList"
                                :key="index"
                                :label="item.name"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item
                        v-if="dynamicValidateForm.usageMode === '根部施'"
                        label-width="82px"
                        class="form-item"
                        prop="executeStyle"
                        label="执行方式"
                    >
                        <div class="info-text">人工</div>
                    </el-form-item>

                    <div v-if="dynamicValidateForm.usageMode !== '人工农事'">
                        <el-form-item
                            v-for="(domain, index) in dynamicValidateForm.prescription.pesticideFertilizerList"
                            :key="index"
                            :prop="'prescription.pesticideFertilizerList.' + index + '.value'"
                            class="prescription-item"
                        >
                            <div class="recipe-item">
                                <div class="recipe-form">
                                    <div class="form-box">
                                        <div class="form-index">药肥{{ index + 1 }}</div>
                                        <div class="box-item" v-if="domain.typeName">
                                            <div class="form-l">药肥类型</div>
                                            <div class="form-r r-text">
                                                {{ domain.typeName }}
                                            </div>
                                        </div>
                                        <div class="box-item">
                                            <div class="form-l">药肥名称</div>
                                            <div class="form-r">
                                                <el-select
                                                    filterable
                                                    @change="handlePesticideFertilizerChange(index)"
                                                    v-model="domain.code"
                                                    placeholder="请选择"
                                                    style="width: 150px"
                                                >
                                                    <el-option
                                                        v-for="item in pesticideFertilizersOptions"
                                                        :key="item.pesticideFertilizerCode"
                                                        :label="item.defaultName || item.name"
                                                        :value="item.pesticideFertilizerCode"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>

                                        <div class="mt-8">
                                            <div class="box-item sub-item" :data-ratio-index="index">
                                                <div class="form-l has-sub">
                                                    <div class="main-name">药肥配比</div>
                                                </div>
                                                <div class="form-r input-box text-center input-unit">
                                                    <el-input
                                                        v-model="domain.ratio"
                                                        type="number"
                                                        step="0.01"
                                                        style="width: 150px"
                                                        placeholder="请输入"
                                                    >
                                                        <template #append>倍</template>
                                                    </el-input>
                                                </div>
                                            </div>
                                            <div class="box-item sub-item" :data-dosage-index="index">
                                                <div class="form-l has-sub">
                                                    <div class="main-name">单亩用量</div>
                                                </div>
                                                <div class="form-r input-box text-center">
                                                    <el-input
                                                        v-model="domain.dosage"
                                                        type="number"
                                                        step="0.01"
                                                        style="width: 150px"
                                                        placeholder="请输入"
                                                    >
                                                        <template #append>{{ domain.unit }}</template>
                                                    </el-input>
                                                </div>
                                            </div>

                                            
                                            <div class="box-item">
                                                        <div class="form-l">药肥品牌</div>
                                                        <div class="form-r">
                                                            <el-input
                                                                v-model="domain.brand"
                                                                placeholder="药肥品牌"
                                                                style="width: 150px"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div class="box-item">
                                                        <div class="form-l">药肥单价</div>
                                                        <div class="form-r">
                                                            <el-input
                                                                style="width: 150px"
                                                                v-model="domain.price"
                                                                type="number"
                                                                step="0.01"
                                                                placeholder="单价"
                                                            >
                                                                <template #append>元/{{ domain.unit }}</template>
                                                            </el-input>
                                                        </div>
                                                    </div>
                                        </div>
                                        <div class="input-box mark-box">
                                            <el-input
                                                v-model="domain.remark"
                                                style="width: 100%"
                                                placeholder="备注：用药注意事项"
                                            />
                                        </div>
                                        <div class="action-btn">
                                            <el-button
                                                class="btn delete-btn"
                                                @click.prevent="removeDomain(prescriptionI, domain)"
                                            >
                                                删除
                                            </el-button>
                                            <el-button
                                                type="default"
                                                class="btn"
                                                @click.prevent="resetItemForm(prescriptionI, index)"
                                            >
                                                重置
                                            </el-button>
                                        </div>
                                    </div>
                                    <!-- </el-form-item> -->
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </div>

                <div
                    class="farm-card prescription-content common-inputs"
                >
                    <div class="medicine-wrap">
                        <div class="medicine-box">
                            <div class="form-index">服务报价</div>
                            <div class="box-wrap">
                                <div class="medicine-item mt-8">
                                    <div class="item-name">单亩价格</div>
                                    <div class="item-val">
                                        <el-input
                                            style="width: 150px"
                                            v-model="servicePricePerMu"
                                            type="number"
                                            step="0.01"
                                            placeholder="服务单价"
                                        >
                                            <template #append>元/亩</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="submit-btn">
                    <div class="btn second" @click.prevent="cancelEdit">取消</div>
                    <div class="btn" @click.prevent="submitForm(formRef)">保存</div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { onActivated, ref, reactive, onDeactivated, onBeforeUnmount, computed, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import customHeader from "@/components/customHeader.vue";
import { useStore } from "vuex";
import { formatArea } from "@/common/commonFun";
import interactPopup from "@/components/popup/interactPopup.vue";

import dayjs from "dayjs";
const store = useStore();
const pageRef = ref(null);
const router = useRouter();
const route = useRoute();

const tagList = ref([
    { label: "托管农事", value: 2 },
    { label: "特别关注", value: 1 },
]);

const tagName = ref("");

// 互动表单数据
const interactFormData = ref({
    phenologyId: "",
    reproductiveId: "",
    // interactionTime: "",
    interactionQuestion: "",
});
const phenologyList = ref([]);
const reproductiveList = ref([]);
const handlePhenologyChange = async (val) => {
    interactFormData.value.reproductiveId = "";
    const { data } = await VE_API.farm.listByPhenologyId({ phenologyId: val });
    if (!data || !Array.isArray(data)) return;
    reproductiveList.value = data;
};

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

const statusMap = ref({
    0: "取消关注",
    1: "特别关注",
    2: "托管农事",
});
const detailData = ref({});

const getPriceList = async (schemeId, pesticideFertilizerCodes) => {
    const { data } = await VE_API.farm.getPriceList({ schemeId, pesticideFertilizerCodes });
    if (!data || !Array.isArray(data)) return;

    dynamicValidateForm.prescription.pesticideFertilizerList.forEach((item) => {
        const priceInfo = data.find((p) => p.pesticideFertilizerCode === item.code);
        if (!priceInfo) return;
        item.price = priceInfo.price ?? item.price;
        item.brand = priceInfo.brand ?? item.brand;
    });

    quotationData.value = { ...detailData.value, ...dynamicValidateForm };
};

const quotationData = ref({});

// 计算单个药肥的总计：单价 * 单亩用量 * 亩数
const getPesticideTotal = (pesticide) => {
    const price = Number(pesticide.price || 0);
    const dosage = Number(pesticide.dosage || 0); // 单亩用量
    const area = Number(detailData.value.farm?.mianji || 0); // 农场面积
    if (!price || !dosage || !area) return "--";
    const total = (price * dosage * area).toFixed(2);
    return total;
};

function getServiceCost(cost, area) {
    if (!cost || !area) return "--";
    return (parseFloat(cost) * parseFloat(area)).toFixed(2);
}

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};

// 清空所有数据
const clearData = () => {
    // 清空表单
    resetForm(formRef.value);

    // 清空详情数据
    detailData.value = {};

    // 清空表单数据
    dynamicValidateForm.name = "";
    dynamicValidateForm.purpose = "";
    dynamicValidateForm.executeDate = dayjs().format("YYYY-MM-DD");
    dynamicValidateForm.usageMode = "";
    dynamicValidateForm.prescription = {
        id: "",
        usageMode: "",
        farmWorkLibCode: "",
        expertId: "",
        phenology: "",
        soil: "",
        speed: null,
        pesticideFertilizerList: [
            {
                code: "",
                name: "",
                dosage: "",
                ratio: "",
                typeName: "",
                muPrice: 0,
                executeStyle: 1,
                unit: "",
            },
        ],
    };
};

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

onBeforeUnmount(() => {
    clearData();
});

const cancelEdit = () => {
    router.back();
};

const modeList = ref([
    { name: "无人机", value: 1 },
    { name: "人工", value: 2 },
]);

const handleExecutionMethodChange = (index, val) => {
    // if (val == 1) {
    //     servicePricePerMu.value = detailData.value.uavServicePrice;
    // } else {
    //     servicePricePerMu.value = detailData.value.manualServicePrice;
    // }
};

// 表单
const formRef = ref();
const dynamicValidateForm = reactive({
    name: "",
    executeDate: dayjs().format("YYYY-MM-DD"),
    usageMode: "",
    executeStyle: 2,
    executionMethod: 2,
    prescription: {
        id: "",
        usageMode: "",
        farmWorkLibCode: "",
        expertId: "",
        phenology: "",
        soil: "",
        speed: null,
        pesticideFertilizerList: [
            {
                code: "",
                id: "",
                name: "",
                dosage: "",
                ratio: "",
                typeName: "",
                muPrice: 0,
                executeStyle: 1,
                unit: "",
            },
        ],
    },
});

const rules = {
    name: [
        {
            required: true,
            message: "请输入农事名称",
            trigger: "blur",
        },
    ],
    executeDate: [
        {
            required: false,
            message: "请选择执行时间",
            trigger: "blur",
        },
    ],
};

const addDomain = () => {
    if (!dynamicValidateForm.prescription.pesticideFertilizerList) {
        dynamicValidateForm.prescription.pesticideFertilizerList = [];
    }
    dynamicValidateForm.prescription.pesticideFertilizerList.unshift({
        code: "",
        name: "",
        dosage: "",
        ratio: "",
        typeName: "",
        muPrice: 0,
        id: "",
        executeStyle: 1,
        unit: "",
    });
};

let pesticideFertilizersOptions = ref([]);
VE_API.z_farm_work_order.pesticideFertilizersList().then(({ data }) => {
    pesticideFertilizersOptions.value = data;
});

const allUsageModeList = ["叶面施", "根部施", "人工农事"];

/**
 * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
 * @param index
 */
const handlePesticideFertilizerChange = (index) => {
    const currentItem = dynamicValidateForm.prescription.pesticideFertilizerList[index];
    let obj = pesticideFertilizersOptions.value.filter((item) => currentItem.code === item.pesticideFertilizerCode)[0];
    if (obj) {
        dynamicValidateForm.prescription.pesticideFertilizerList[index] = {
            ...currentItem,
            code: obj.pesticideFertilizerCode,
            id: obj.id,
            name: obj.name || obj.defaultName,
            typeName: obj.typeName,
            unit: obj.unit,
            ratio: "", // 清空亩兑水量
            dosage: "", // 清空单亩用量
            executeStyle: obj.executionMethod || 1,
        };
    }
};

const removeDomain = (index) => {
    if (index !== -1 && dynamicValidateForm.prescription.pesticideFertilizerList) {
        dynamicValidateForm.prescription.pesticideFertilizerList.splice(index, 1);
    }
};

const resetItemForm = (index) => {
    if (dynamicValidateForm.prescription.pesticideFertilizerList) {
        dynamicValidateForm.prescription.pesticideFertilizerList[index] = {
            code: "",
            id: "",
            name: "",
            dosage: "",
            ratio: "",
            typeName: "",
            muPrice: 0,
            executeStyle: 1,
            unit: "",
        };
    }
};

const servicePricePerMu = ref(null);

// 服务费用总计（数值）：亩单价 * 亩数
const serviceCostTotal = computed(() => {
    const price = Number(servicePricePerMu.value || 0);
    const area = Number(detailData.value?.farm?.mianji || detailData.value?.area || 0);
    if (!price || !area) return 0;
    return Number((price * area).toFixed(2));
});

// 显示用的服务费用（字符串或 "--"）
const getServiceTotal = () => {
    const total = serviceCostTotal.value;
    return total ? total.toFixed(2) : "--";
};

// 药肥费用总计：∑(单价 * 单亩用量 * 亩数)
const pesticideCostTotal = computed(() => {
    const list = dynamicValidateForm.prescription?.pesticideFertilizerList || [];
    const area = Number(detailData.value?.farm?.mianji || detailData.value?.area || 0);
    if (!list.length || !area) return 0;

    const sum = list.reduce((acc, item) => {
        const price = Number(item?.price || 0);
        const dosage = Number(item?.dosage || 0);
        if (!price || !dosage) return acc;
        return acc + price * dosage * area;
    }, 0);

    return Number(sum.toFixed(2));
});

// 报价合计 = 药肥费用 + 服务费用
const totalCost = computed(() => {
    const pesticide = Number(pesticideCostTotal.value || 0);
    const service = Number(serviceCostTotal.value || 0);
    if (!pesticide && !service) return '--';
    return Number((pesticide + service).toFixed(2));
});

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (valid) {
            // 校验标记是否已选择
            if (!validateTagName()) return;
            // 校验农情互动,不通过，直接返回失败
            if (!validateInteractForm()) return false;

            // 校验药肥的亩兑水量和单亩用量是否填写
            if (!validatePesticideDosage()) return;

            // 保存报价信息前先校验是否填写完整
            if (!validatePriceInfos()) return;

            // 检验服务报价是否填写
            if (!validateServicePrice()) return;
            submit();
        } else {
            console.log("error submit!");
        }
    });
};

// 检验服务报价是否填写
const validateServicePrice = () => {
    if (!servicePricePerMu.value) {
        ElMessage.warning("请完善服务报价信息");
        return false;
    }
    return true;
};

// 校验药肥的亩兑水量和单亩用量是否填写
const validatePesticideDosage = () => {
    const list = dynamicValidateForm.prescription?.pesticideFertilizerList || [];
    if (!list.length) return true; // 没有药肥就不校验

    // 找到第一个未填写完整的药肥
    for (let i = 0; i < list.length; i++) {
        const item = list[i];
        // 如果选择了药肥（有 code），就必须填写亩兑水量和单亩用量
        if (item.code) {
            const hasRatio = item.ratio !== undefined && item.ratio !== null && item.ratio !== "";
            const hasDosage = item.dosage !== undefined && item.dosage !== null && item.dosage !== "";

            if (!hasRatio || !hasDosage) {
                ElMessage.warning("请完善药物处方信息");
                return false;
            }
        }
    }
    return true;
};

// 校验报价信息是否填写完整
const validatePriceInfos = () => {
    const list = dynamicValidateForm.prescription?.pesticideFertilizerList || [];
    if (!list.length) return true; // 没有药肥就不校验

    // 找到第一个未填写完整的药肥
    const invalidIndex = list.findIndex((item) => {
        // 只要选择了药肥（有 id），就必须填写单价和品牌
        if (!item.id) return false; // 没选择药肥不校验
        const hasPrice = item.price !== undefined && item.price !== null && item.price !== "";
        const hasBrand = !!item.brand;
        return !hasPrice || !hasBrand;
    });

    if (invalidIndex !== -1) {
        ElMessage.warning("请先完善报价信息");
        return false;
    }
    return true;
};

const submit = async () => {
    const params = {
        ...dynamicValidateForm,
        serviceMuPrice: servicePricePerMu.value,
        prescription: dynamicValidateForm.prescription,
    };
    const { data, code } = await VE_API.monitor.saveFarmWorkLib(params);

    if (code === 0) {
        handleSaveInteract(data.id);
    } else {
        ElMessage.error(data.message || "保存失败");
    }

    // 保存报价信息
    const priceList = {
        schemeId: route.query.schemeId,
        pesticideFertilizerInfos: dynamicValidateForm.prescription.pesticideFertilizerList.map((item) => {
            return {
                pesticideFertilizerId: item.id,
                price: item.price,
                brand: item.brand,
            };
        }),
    };
    VE_API.farm.updateBatchByScheme(priceList).then(async (res) => {
        if (res.code === 0) {
            ElMessage.success("保存成功");
            router.back();
        }
    });

    // 切换标记
    // VE_API.container_farm_work_arrange.toggleFollow({ id: data.id, isFollow: tagName.value });
};

// 获取物候期列表
const getPhenologyList = async () => {
    const containerSpaceTimeId = route.query.containerSpaceTimeId;
    if (!containerSpaceTimeId) {
        phenologyList.value = [];
        return;
    }
    const res = await VE_API.monitor.listPhenology({ containerSpaceTimeId });
    if (res.code === 0) {
        phenologyList.value = res.data || [];
    }
};

// 获取互动设置详情
const getFarmWorkArrangeDetail = async (id) => {
    if (!id) return;
    const { data, code } = await VE_API.farm.getFarmWorkArrangeDetail({ id });
    if (code === 0) {
        tagName.value = data.isFollow;
        interactFormData.value = {
            phenologyId: data.phenologyId || "",
            reproductiveId: data.reproductiveId || "",
            // interactionTime: data.interactionTime || "",
            interactionQuestion: data.interactionQuestion || "",
        };
    }
};

// 格式化日期
const formatInteractDate = (date) => {
    // 如果已经是字符串格式 YYYY-MM-DD，直接返回
    if (typeof date === "string" && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
        return date;
    }
    // 如果是 Date 对象，进行转换
    if (date instanceof Date) {
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, "0");
        let day = String(date.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
    }
    // 其他情况返回原值
    return date;
};

// 校验标记是否已选择
const validateTagName = () => {
    if (tagName.value !== 1 && tagName.value !== 2) {
        ElMessage.warning("请选择标记类型");
        return false;
    }
    return true;
};

// 验证互动表单
const validateInteractForm = () => {
    if (!interactFormData.value.phenologyId) {
        ElMessage.warning("请选择互动阶段");
        return false;
    }
    if (!interactFormData.value.reproductiveId) {
        ElMessage.warning("请选择互动阶段");
        return false;
    }
    // if (!interactFormData.value.interactionTime) {
    //     ElMessage.warning("请选择互动时间");
    //     return false;
    // }
    if (!interactFormData.value.interactionQuestion?.trim()) {
        ElMessage.warning("请设置互动问题");
        return false;
    }
    return true;
};

// 保存互动设置
const handleSaveInteract = async (id) => {
    const paramsObj = {
        farmWorkId: id,
        schemeId: route.query.schemeId,
        ...interactFormData.value,
        // interactionTime: formatInteractDate(interactFormData.value.interactionTime),
    };

    try {
        const res = await VE_API.monitor.updateFarmWorkArrange(paramsObj);
        if (res.code !== 0) {
            ElMessage.error(res.message || "保存农情互动信息失败");
            return false;
        }
        return true;
    } catch (error) {
        console.error("保存互动设置失败:", error);
        ElMessage.error("保存失败，请重试");
        return false;
    }
};

// 删除互动设置
const handleDeleteInteract = () => {
    ElMessageBox.confirm("确定要删除该互动设置吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            if (!detailData.value.id) return;
            const res = await VE_API.monitor.deleteFarmWorkArrange({ id: detailData.value.id });
            if (res.code === 0) {
                ElMessage.success("删除成功");
                // 清空表单数据
                interactFormData.value = {
                    phenologyId: "",
                    reproductiveId: "",
                    // interactionTime: "",
                    interactionQuestion: "",
                };
            } else {
                ElMessage.error(res.message || "删除失败");
            }
        })
        .catch(() => {
            // 用户取消，不做任何操作
        });
};
</script>

<style lang="scss" scoped>
.new-farming-page {
    height: 100vh;
    position: relative;
    overflow: auto;
    font-size: 14px;
    background: #f2f3f5;
    ::v-deep {
        .custom-header {
            position: fixed;
            top: 0;
            padding-bottom: 1px;
        }
    }
    .step-wrap {
        padding: 12px 0;
    }
    .box-wrap {
        background: #fff;
        padding: 20px 10px 10px;
        border-radius: 6px;
    }
    .new-farming-content {
        margin: 41px 0 62px 0;
        padding: 4px 12px 8px 12px;
        width: 100%;
        box-sizing: border-box;
        &.no-permission {
            margin-bottom: 12px;
        }

        // ::v-deep {
        //     .el-select__input {
        //         color: #2199F8;
        //     }
        //     .el-select__wrapper {
        //         color: #2199F8;
        //         min-height: 30px;
        //         line-height: 28px;
        //         box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
        //     }
        //     .el-select__caret {
        //         color: #2199F8;
        //     }
        //     .el-select__placeholder {
        //         color: #2199F8;
        //     }
        //     .el-radio {
        //         margin-right: 16px;
        //     }
        //     .el-input__wrapper {
        //         box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
        //     }
        //     .el-input__prefix {
        //         color: #2199F8;
        //     }
        //     .el-input__inner {
        //         color: #2199F8;
        //         --el-input-placeholder-color: rgba(33, 153, 248, 0.43);
        //     }
        //     .el-tag.el-tag--info {
        //         --el-tag-text-color: #2199F8;
        //         --el-tag-bg-color: rgba(33, 153, 248, 0.1);
        //     }
        // }
        .farm-info {
            color: rgba(0, 0, 0, 0.6);
            font-size: 14px;
            margin-top: 14px;
            .info-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: rgba(41, 41, 41, 0.3);
                .info-more {
                    display: flex;
                    align-items: center;
                }
            }
        }
        .farm-photo {
            margin-top: 10px;
            .photo-list {
                display: flex;
                align-items: center;
                width: 100%;
                overflow: auto;
                padding-bottom: 10px;
                .photo-item {
                    width: 92px;
                    height: 92px;
                    border-radius: 8px;
                    object-fit: cover;
                }
                .img-item {
                    img {
                        width: 92px;
                        height: 92px;
                        border-radius: 8px;
                        object-fit: cover;
                        margin-right: 12px;
                    }
                }
            }
            .list-text {
                text-align: center;
                color: rgba(0, 0, 0, 0.5);
                padding-top: 2px;
            }
        }
        .submit-btn {
            z-index: 10;
            position: fixed;
            bottom: 0px;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: #fff;
            box-sizing: border-box;
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            &.center-btn {
                justify-content: center;
            }
            .btn {
                height: 40px;
                border-radius: 25px;
                line-height: 40px;
                width: 110px;
                text-align: center;
                background: linear-gradient(180deg, #70bffe, #2199f8);
                color: #ffffff;
                font-size: 14px;
                &.second {
                    background: #ffffff;
                    border: 1px solid rgba(153, 153, 153, 0.5);
                    color: #666666;
                }
            }
            .btn + .btn {
                margin-left: 12px;
            }
        }
    }
    .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        display: flex;
        align-items: center;
        &.between {
            justify-content: space-between;
            .del-tag {
                color: #e04c4c;
                border: 1px solid #e04c4c;
                border-radius: 5px;
                padding: 4px 14px;
                font-size: 12px;
                font-weight: normal;
            }
            .title-tag {
                padding: 2px 10px;
                height: 26px;
                line-height: 26px;
            }
        }
        // justify-content: space-between;
        .add-tag {
            font-size: 12px;
            color: #2199f8;
            padding: 0px 11px;
            border: 1px solid #2199f8;
            border-radius: 5px;
            font-weight: normal;
            height: 28px;
            line-height: 28px;
        }
        .type-tag {
            margin-left: 5px;
            font-size: 12px;
            color: #000000;
            padding: 0 10px;
            background: rgba(119, 119, 119, 0.1);
            border-radius: 20px;
            font-weight: normal;
            height: 26px;
            line-height: 26px;
            display: inline-block;
        }
    }
    .pb-12 {
        padding-bottom: 12px;
    }
    .farm-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 12px 12px 0 12px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
        color: rgba(0, 0, 0, 0.4);
        &.progress {
            display: flex;
            align-items: center;
            padding: 12px;
            .progress-title {
                margin-right: 12px;
            }
            ::v-deep {
                .el-radio {
                    margin-right: 10px;
                }
            }
        }
        &.map-content {
            margin-top: 12px;
        }
        &.prescription-content {
            padding: 12px;
        }
        .border-bottom {
            padding-bottom: 7px;
            border-bottom: 1px solid rgba(245, 245, 245, 0.99);
        }
    }

    .table-item {
        padding: 6px 0 10px 0;
        .form-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #767676;
            height: 24px;
            .item-name {
                width: 80px;
                color: rgba(0, 0, 0, 0.2);
            }
        }
    }

    .new-wrap {
        border-radius: 5px;
        text-align: center;
        border: 1px solid rgba(225, 225, 225, 0.5);
        .new-title {
            background: rgba(241, 241, 241, 0.4);
            border-radius: 5px 5px 0 0;
            border-bottom: 1px solid rgba(225, 225, 225, 0.5);
            display: flex;
            color: #767676;
            // justify-content: space-around;
            padding: 5px 6px;
            font-size: 12px;
            .table-name {
                width: 24px;
                font-size: 12px;
                margin: 0 auto;
            }
        }

        .title-1 {
            width: 46px;
        }
        .title-2 {
            flex: 1;
        }
        .title-3 {
            width: 52px;
        }
        .title-4 {
            width: 56px;
        }
        .title-5 {
            width: 52px;
        }
        .new-table-wrap {
            padding: 5px 0;
            .new-prescription + .new-prescription {
                border-top: 1px solid rgba(225, 225, 225, 0.8);
            }
            // .new-prescription {
            .new-table {
                display: flex;
                align-items: center;
                // border: 1px solid rgba(225, 225, 225, 0.8);
                background: #fff;
                border-radius: 5px;
                color: rgba(0, 0, 0, 0.6);
                font-size: 11px;
                .line-l {
                    display: flex;
                    flex: 1;
                    .line-2 {
                        flex: 1;
                        padding: 0 2px;
                    }
                }
                .line-r {
                    &.has-border {
                        border-left: 1px solid rgba(225, 225, 225, 0.8);
                    }
                    .line-3 {
                        display: flex;
                        align-items: center;
                    }
                    .sub-line {
                        padding: 10px 0;
                    }
                    .line-4 {
                        display: flex;
                        align-items: center;
                        border-top: 1px solid rgba(225, 225, 225, 0.8);
                    }
                    .execute-line {
                        border-right: 1px solid rgba(225, 225, 225, 0.8);
                    }
                }
            }
            .note-text {
                margin: 8px 0 4px 0;
                color: rgba(0, 0, 0, 0.4);
                background: #fff;
                padding: 6px 8px;
                border-radius: 5px;
                text-align: left;
                font-size: 11px;
            }
            // }
            // .new-prescription + .new-prescription {
            //     padding-top: 8px;
            // }
        }
    }

    .info-content-wrap {
        ::v-deep {
            .new-table-wrap {
                padding: 5px 0;
                .new-prescription + .new-prescription {
                    border-top: 1px solid rgba(225, 225, 225, 0.8);
                }
            }
        }
    }
    .price-bottom {
        padding-top: 8px;

        .info-title-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #000;
            .info-more {
                font-size: 18px;
            }
            .unit-text {
                font-size: 12px;
            }
        }
        .price-info {
            padding: 8px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(0, 0, 0, 0.2);
            .main-text {
                padding-left: 6px;
                color: rgba(0, 0, 0, 0.8);
            }
            .info-c {
                flex: 1;
                text-align: center;
            }
        }
        .price-total {
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(33, 153, 248, 0.5);
            background: rgba(33, 153, 248, 0.1);
            color: #000000;
            border-radius: 4px;
            .main-val {
                font-size: 20px;
                font-weight: bold;
                color: #2199f8;
                padding-right: 2px;
            }
        }
    }
    .pb-8 {
        padding-bottom: 8px;
    }

    .common-inputs {
        ::v-deep {
            .el-input__wrapper {
                box-shadow: none;
            }
            .el-input-group__append {
                padding: 0 10px;
                background: none;
                box-shadow: none;
            }
            .el-input-group__append {
                color: rgba(33, 153, 248, 0.5);
            }
            .el-input {
                border: 1px solid rgba(33, 153, 248, 0.3);
                border-radius: 5px;
                height: 30px;
                box-sizing: border-box;
            }
            .el-input__wrapper {
                padding: 0 2px 0 10px;
                height: 28px;
                line-height: 28px;
                min-height: 28px;
            }
            .el-input__inner {
                --el-input-inner-height: 28px;
                height: 28px;
                line-height: 28px;
                min-height: 28px;
                color: #2199f8;
                --el-input-placeholder-color: rgba(33, 153, 248, 0.43);
            }

            .el-select__wrapper {
                box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
            }
            .el-select__placeholder,
            .el-select__caret {
                color: #2199f8;
            }
        }
    }

    .medicine-box {
        // padding-top: 10px;
        border: 1px solid rgba(33, 153, 248, 0.8);
        position: relative;
        border-radius: 6px;
        .item-title {
            padding-left: 5px;
            font-size: 16px;
            color: #000000;
            font-weight: 500;
            padding-bottom: 10px;
        }
        .medicine-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 32px;
            .item-name {
                color: rgba(0, 0, 0, 0.4);
            }
            .item-val {
                min-width: 142px;
                text-align: center;
                color: #302f2f;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                .price-unit {
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.4);
                    white-space: nowrap;
                }
            }
            .item-total {
                font-size: 16px;
                color: #000;
            }
            .item-price {
                color: #2199f8;
                font-size: 20px;
                font-weight: bold;
                .item-unit {
                    font-size: 14px;
                    font-weight: normal;
                    padding-left: 2px;
                    color: #474747;
                }
            }
        }
        .medicine-item + .medicine-item {
            padding-top: 2px;
        }
        .mt-8 {
            margin-top: 8px;
        }
    }

    .usage-mode-wrap {
        padding: 0 12px;
        margin-top: 12px;
        .info-content {
            padding-top: 14px;
            padding-bottom: 1px;
        }

        .el-form-item--default {
            margin-bottom: 0;
        }
    }

    ::v-deep {
        .el-form-item__label {
            height: 30px;
            line-height: 30px;
            color: rgba(0, 0, 0, 0.4);
        }
        .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before {
            display: none;
        }
    }
    .interact-content {
        padding: 10px 0;
        line-height: 20px;
        color: #919191;
        font-size: 14px;
    }
    .interact-form {
        padding: 8px 0 20px 0px;

        .interact-form-item {
            display: flex;
            align-items: baseline;
            margin-bottom: 12px;

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

            .form-label {
                width: 70px;
                color: rgba(0, 0, 0, 0.4);
                font-weight: normal;
                margin-right: 10px;
                font-size: 14px;
                flex: none;
            }

            .form-input-wrapper {
                position: relative;
                width: calc(100% - 70px);
                &.two-select {
                    display: flex;
                    gap: 10px;
                    .select-item {
                        flex: 1;
                    }
                }
                ::v-deep {
                    .el-input__inner {
                        caret-color: transparent;
                        padding-right: 40px;
                    }

                    .el-input__suffix {
                        display: none;
                    }
                }
            }

            .question-textarea {
                ::v-deep {
                    .el-textarea__inner {
                        resize: none;
                        line-height: 1.5;
                        min-height: 80px;
                    }
                }
            }
        }

        .interact-buttons {
            display: flex;
            gap: 12px;
            padding-top: 16px;

            .btn-delete,
            .btn-save {
                flex: 1;
                padding: 8px;
                border-radius: 25px;
                font-size: 16px;
                text-align: center;
                cursor: pointer;
                transition: all 0.3s;
                user-select: none;
            }

            .btn-delete {
                background: #ffffff;
                border: 1px solid #ff4d4f;
                color: #ff4d4f;

                &:hover {
                    background: #fff5f5;
                }

                &:active {
                    opacity: 0.8;
                    transform: scale(0.98);
                }
            }

            .btn-save {
                background: #2199f8;
                color: #fff;
                border: none;

                &:hover:not(.disabled) {
                    background: #1a8ae6;
                }

                &:active:not(.disabled) {
                    opacity: 0.9;
                    transform: scale(0.98);
                }

                &.disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                    pointer-events: none;
                }
            }
        }
    }
    .edit-tag {
        padding-left: 4px;
        color: #2199f8;
    }
    .tag-text {
        font-size: 12px;
        font-weight: normal;
    }
    .info-content {
        padding: 10px 0;
        position: relative;

        .condition-wrap {
            display: flex;
            align-items: center;
            width: 100%;
            .symbol {
                width: 10px;
                // text-align: center;
                // padding: 0 4px;
            }
        }
        .item-input {
            // width: 60%;
            min-width: 140px;
            max-width: 240px;
        }
        .recheck-text {
            padding-left: 6px;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .info-item + .info-item {
            margin-top: 12px;
        }

        .bottom-map {
            width: 100%;
            height: 250px;
            clip-path: inset(0px round 8px);
        }
        .check-btn {
            position: absolute;
            bottom: 16px;
            right: 6px;
            background: rgba(0, 0, 0, 0.6);
            padding: 0 8px;
            border-radius: 8px;

            ::v-deep {
                .el-checkbox {
                    color: #fff;
                }
            }
        }
        .area-select {
            padding-bottom: 12px;
            .block {
                width: 12px;
                display: inline-block;
            }
        }
    }

    ::v-deep {
        .el-form-item--default {
            margin-bottom: 8px;
            
            &.name-item {
                margin-bottom: 14px;
            }
            &.text-item {
                margin-bottom: 2px;
                .el-form-item__content {
                    line-height: 24px;
                }
                .el-form-item__label {
                    height: 24px;
                    line-height: 24px;
                }
            }
        }
    }
    .sub-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(0, 0, 0, 0.6);
        font-size: 14px;
        .add-tag {
            font-size: 12px;
            color: #2199f8;
            padding: 0 8px;
            border: 1px solid #2199f8;
            border-radius: 5px;
            font-weight: normal;
            height: 28px;
            line-height: 28px;
        }
    }
    .font-bold {
        font-weight: 500;
        color: #000000;
    }
    .form-index {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 6px;
        background: #2199f8;
        border-radius: 5px 0 4px 0;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        color: #fff;
    }
    .recipe-item {
        width: 100%;
        .recipe-form {
            padding-top: 8px;
            ::v-deep {
                .el-form-item {
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }

        .mt-8 {
            margin-top: 8px;
        }

        .box-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(0, 0, 0, 0.4);
            .r-text {
                color: #302f2f;
                width: 150px;
                text-align: center;
            }
            .form-r {
                width: 150px;
                min-width: 140px;
                max-width: 240px;
            }
        }
        .form-box {
            border: 1px solid rgba(33, 153, 248, 0.8);
            border-radius: 6px;
            padding: 20px 10px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            // background: rgb(209, 235, 255, 0.3);
            // margin-bottom: 12px;
            .input-box {
                &.mark-box {
                    padding: 8px 0 12px 0;
                }
            }

            // .input-unit {
            //     ::v-deep {
            //         .el-input {
            //             border: 1px solid #dcdfe6;
            //             border-radius: 5px;
            //             height: 32px;
            //             box-sizing: border-box;
            //         }
            //         .el-input__wrapper {
            //             padding: 0 2px 0 10px;
            //             height: 30px;
            //             line-height: 30px;
            //             min-height: 30px;
            //             box-shadow: none;
            //         }
            //         .el-input__inner {
            //             --el-input-inner-height: 30px;
            //             height: 30px;
            //             line-height: 30px;
            //             min-height: 30px;
            //             color: #606266;
            //             --el-input-placeholder-color: #a8abb2;
            //         }
            //         .el-input-group__append {
            //             box-shadow: none;
            //             border: none;
            //             background: none;
            //         }
            //     }
            // }
            // .text-center {
            //     ::v-deep {
            //         .el-input__inner {
            //             text-align: center;
            //         }
            //     }
            // }
            .action-btn {
                display: flex;
                justify-content: flex-end;
                .btn {
                    color: #8f8f8f;
                    border-radius: 25px;
                    padding: 5px 30px;
                }
                .delete-btn {
                    color: rgba(255, 89, 89, 0.9);
                    background: #fff;
                    border: 1px solid rgba(255, 89, 89, 0.9);
                }
            }
            .btn-group {
                padding-top: 12px;
            }
            .sub-item {
                // padding-left: 10px;
                .has-sub {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .main-name {
                        line-height: 20px;
                    }
                    .sub-name {
                        font-size: 10px;
                        color: rgba(129, 129, 129, 0.5);
                        line-height: 14px;
                    }
                }
                .colunm-sub {
                    display: flex;
                    align-items: center;
                    .sub-name {
                        font-size: 10px;
                        color: rgba(129, 129, 129, 0.5);
                    }
                }
                .r-text {
                    width: 132px;
                    text-align: center;
                    font-size: 14px;
                    color: #474747;
                }
                .price {
                    ::v-deep {
                        .el-input__wrapper {
                            box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
                        }
                        .el-input__inner {
                            color: #2199f8;
                        }
                    }
                }
            }
            .form-title {
                font-size: 14px;
                padding-top: 6px;
                color: #000;
                font-weight: 600;
            }
            .box-item + .box-item {
                margin-top: 8px;
            }
        }
        .form-box + .form-box {
            margin-top: 8px;
        }
        .usageMode-wrap {
            padding-top: 8px;
        }
    }

    // 状况描述样式
    .situation-description {
        width: 100%;
        .description-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            margin-bottom: 12px;
        }

        .description-content {
            .description-textarea {
                margin-bottom: 10px;
                width: 100%;
            }

            .upload-section {
                .upload-btn {
                    width: 112px;
                    height: 32px;
                    border-radius: 3px;
                    border: 1px solid #e0e0e0;
                    background: #fff;
                    color: #000;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 8px;

                    .el-icon {
                        margin-right: 6px;
                    }
                }

                .upload-tip {
                    font-size: 12px;
                    color: #999;
                    line-height: 1.4;
                }
            }
        }
    }

    // 专家诊断按钮样式
    .expert-diagnosis-btn {
        width: 180px;
        height: 40px;
        border-radius: 24px;
        background: linear-gradient(180deg, #70bffe 0%, #2199f8 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px auto 0;
    }
}

.tag-list {
    font-size: 14px;
    .tag-item + .tag-item {
        margin-top: 6px;
    }
    .tag-item {
        padding: 2px 8px;
        text-align: center;
        &.active {
            color: #2199f8;
            background: rgba(33, 153, 248, 0.16);
            border-radius: 4px;
        }
    }
}
.task-tips-popup {
    width: 75%;
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .create-farm-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    .farm-check-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 12px;
    }
    .create-farm-text {
        font-size: 20px;
        font-weight: 500;
        line-height: 40px;
        margin-bottom: 32px;
        text-align: center;
        &.success-text {
            font-size: 24px;
            font-weight: 500;
        }
    }
    .main-text {
        color: #2199f8;
    }
    .create-farm-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 25px;
        font-size: 16px;
        background: #2199f8;
        color: #fff;
        text-align: center;
    }
}
</style>