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

<template>
    <div class="new-farming-page">
        <custom-header :name="isEdit ? '编辑方案' : '查看详情'"></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>{{ detailData?.name }}<span class="type-tag">标准农事</span></div>
                        <el-popover
                            title=""
                            v-if="isEdit"
                            :popper-style="'min-width: 110px;'"
                            :width="110"
                            placement="left-start"
                            trigger="click"
                        >
                            <div class="tag-list">
                                <div class="tag-item">托管农事</div>
                                <div class="tag-item active">特别关注</div>
                            </div>
                            <template #reference>
                                <div class="title-tag add-tag">标记为</div>
                            </template>
                        </el-popover>
                        <div class="edit-tag tag-text" v-else>托管农事</div>
                        <!-- <el-tooltip
                            effect="dark"
                            placement="left"
                        >
                            <template #content>
                                <div class="tag-item">全托管</div>
                                <div class="tag-item">飞防托管</div>
                                <div class="tag-item">营养托管</div>
                            </template>
                            <div class="title-tag add-tag">托管用户</div>
                        </el-tooltip> -->
                    </div>
                    <div class="info-content">
                        <el-form-item label-width="70px" class="form-item text-item" label="农事编号">
                            <div class="info-text">
                                {{ detailData?.code }}
                            </div>
                        </el-form-item>
                        <el-form-item label-width="70px" class="form-item text-item" label="服务亩数">
                            <div class="info-text">
                                {{ detailData?.area ? formatArea(detailData?.area) + "亩" : "--" }}
                            </div>
                        </el-form-item>
                        <el-form-item label-width="70px" class="form-item text-item" label="服务区域">
                            <div class="info-text">
                                {{ detailData?.serviceRegion }}
                            </div>
                        </el-form-item>
                        <el-form-item
                            v-if="isEdit"
                            label-width="70px"
                            class="form-item"
                            prop="executeDate"
                            label="执行时间"
                        >
                            <el-date-picker
                                class="item-input"
                                style="width: 100%"
                                value-format="YYYY-MM-DD"
                                v-model="dynamicValidateForm.executeDate"
                                type="date"
                                :clearable="false"
                                placeholder="选择日期"
                                :editable="false"
                            />
                        </el-form-item>
                        <el-form-item v-else label-width="70px" class="form-item text-item" label="执行时间">
                            <div class="info-text">
                                {{ detailData?.executeDate }}
                            </div>
                        </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-content">
                        {{ detailData?.warmReminder }}
                        <span class="edit-tag" @click="handleEditInteract(detailData)">点击编辑</span>
                    </div>
                </div>

                <template v-if="isEdit">
                    <div class="farm-card prescription-content common-inputs">
                        <div class="card-title pb-12">药物处方</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>
                        <div v-if="dynamicValidateForm.usageMode !== '人工农事'">
                            <el-form-item
                                v-for="(prescriptionItem, prescriptionI) in dynamicValidateForm.prescriptionList"
                                :key="prescriptionI"
                                :prop="'prescriptions.' + prescriptionI + '.value'"
                                class="prescription-item"
                            >
                                <div class="recipe-item">
                                    <div class="sub-title">
                                        <div>{{ prescriptionItem.name }}处方</div>
                                        <div class="add-tag" @click="addDomain(prescriptionI)">
                                            <el-icon color="#2199F8"><Plus /></el-icon>新增药物
                                        </div>
                                    </div>
                                    <div class="recipe-form">
                                        <el-form-item
                                            v-for="(domain, index) in prescriptionItem.pesticideFertilizerList"
                                            :key="domain.key"
                                            :prop="'pesticideFertilizerList.' + index + '.value'"
                                        >
                                            <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 }}
                                                        <!-- <el-select
                                                        v-model="domain.typeName"
                                                        placeholder="请选择"
                                                        style="width: 100%"
                                                        >
                                                            <el-option :label="domain.typeName" :value="domain.typeName" />
                                                    </el-select> -->
                                                    </div>
                                                </div>
                                                <div class="box-item">
                                                    <div class="form-l">药肥名称</div>
                                                    <div class="form-r">
                                                        <el-select
                                                            filterable
                                                            @change="
                                                                handlePesticideFertilizerChange(prescriptionI, index)
                                                            "
                                                            v-model="domain.pesticideFertilizerId"
                                                            placeholder="请选择"
                                                            style="width: 150px"
                                                        >
                                                            <el-option
                                                                v-for="item in pesticideFertilizersOptions"
                                                                :key="item.id"
                                                                :label="item.defaultName || item.name"
                                                                :value="item.id"
                                                            />
                                                        </el-select>
                                                    </div>
                                                </div>
                                                <div class="box-item">
                                                    <div class="form-l">执行方式</div>
                                                    <div
                                                        class="form-r item-val"
                                                        v-if="dynamicValidateForm.usageMode === '叶面施'"
                                                    >
                                                        <el-select
                                                            class="select-item"
                                                            v-model="domain.executionMethod"
                                                            placeholder="执行方式"
                                                            style="width: 150px"
                                                            @change="
                                                                (val) =>
                                                                    handleExecutionMethodChange(
                                                                        prescriptionI,
                                                                        index,
                                                                        val
                                                                    )
                                                            "
                                                        >
                                                            <el-option
                                                                v-for="(item, index) in modeList"
                                                                :key="index"
                                                                :label="item.name"
                                                                :value="item.value"
                                                            />
                                                        </el-select>
                                                    </div>
                                                    <div class="form-r r-text" v-else>人工</div>
                                                </div>

                                                <div class="mt-8" v-if="domain.executionMethod === 1">
                                                    <div class="box-item sub-item">
                                                        <div class="form-l has-sub">
                                                            <div class="main-name">亩兑水量</div>
                                                            <div class="sub-name">(药剂:兑水量)</div>
                                                        </div>
                                                        <div class="form-r input-box text-center">
                                                            <!-- <el-input
                                                                v-model="domain.ratio2"
                                                                style="width: 100%"
                                                                placeholder="请输入"
                                                            /> -->
                                                            <el-input
                                                                v-model="domain.ratio2"
                                                                type="number"
                                                                step="0.01"
                                                                style="width: 150px"
                                                                placeholder="请输入"
                                                            >
                                                                <template #append>{{ domain.unit }}</template>
                                                            </el-input>
                                                        </div>
                                                    </div>
                                                    <div class="box-item sub-item">
                                                        <div class="form-l has-sub">
                                                            <div class="main-name">单亩用量</div>
                                                            <div class="sub-name">(亩数:药剂)</div>
                                                        </div>
                                                        <div class="form-r input-box text-center">
                                                            <el-input
                                                                v-model="domain.muUsage2"
                                                                type="number"
                                                                step="0.01"
                                                                style="width: 150px"
                                                                placeholder="请输入"
                                                            >
                                                                <template #append>{{ domain.unit }}</template>
                                                            </el-input>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mt-8" v-else>
                                                    <div class="box-item sub-item">
                                                        <div class="form-l has-sub">
                                                            <div class="main-name">亩兑水量</div>
                                                            <div class="sub-name">(药剂:兑水量)</div>
                                                        </div>
                                                        <div class="form-r input-box text-center input-unit">
                                                            <!-- <el-input
                                                            v-model="domain.ratio"
                                                            style="width: 100%"
                                                            placeholder="请输入"
                                                        /> -->

                                                            <el-input
                                                                v-model="domain.ratio"
                                                                type="number"
                                                                step="0.01"
                                                                style="width: 150px"
                                                                placeholder="请输入"
                                                            >
                                                                <template #append>{{ domain.unit }}</template>
                                                            </el-input>
                                                        </div>
                                                    </div>
                                                    <div class="box-item sub-item">
                                                        <div class="form-l has-sub">
                                                            <div class="main-name">单亩用量</div>
                                                            <div class="sub-name">(亩数:药剂)</div>
                                                        </div>
                                                        <div class="form-r input-box text-center">
                                                            <!-- <el-input
                                                            v-model="domain.muUsage"
                                                            style="width: 100%"
                                                            placeholder="请输入"
                                                        /> -->
                                                            <el-input
                                                                v-model="domain.muUsage"
                                                                type="number"
                                                                step="0.01"
                                                                style="width: 150px"
                                                                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
                        v-if="dynamicValidateForm.usageMode !== '人工农事'"
                        class="farm-card prescription-content common-inputs"
                    >
                        <div class="card-title">处方报价</div>
                        <div class="medicine-wrap">
                            <template
                                v-for="(prescription, pIndex) in dynamicValidateForm.prescriptionList"
                                :key="pIndex"
                            >
                                <div
                                    class="medicine-box"
                                    v-for="(pesticide, mIndex) in prescription.pesticideFertilizerList"
                                    :key="mIndex"
                                >
                                    <div class="form-index">药肥{{ mIndex + 1 }}</div>
                                    <div class="box-wrap">
                                        <div class="medicine-item">
                                            <div class="item-name">药肥名称</div>
                                            <div class="item-val">{{ pesticide.pesticideFertilizerName }}</div>
                                        </div>
                                        <div class="medicine-item">
                                            <div class="item-name">药肥品牌</div>
                                            <div class="item-val">
                                                <el-input
                                                    v-model="pesticide.brand"
                                                    placeholder="药肥品牌"
                                                    style="width: 150px"
                                                />
                                            </div>
                                        </div>
                                        <div class="medicine-item mt-8">
                                            <div class="item-name">药肥单价</div>
                                            <div class="item-val">
                                                <el-input
                                                    style="width: 150px"
                                                    v-model="pesticide.price"
                                                    type="number"
                                                    step="0.01"
                                                    placeholder="单价"
                                                >
                                                    <template #append>元/{{ pesticide.unit }}</template>
                                                </el-input>
                                            </div>
                                        </div>
                                        <div class="medicine-item">
                                            <div class="item-name">单亩用量</div>
                                            <div class="item-val">{{ getMuUsage(pesticide) }}{{ pesticide.unit }}</div>
                                        </div>
                                        <div class="medicine-item">
                                            <div class="item-name">服务亩数</div>
                                            <div class="item-val">{{ formatArea(detailData?.area) }}亩</div>
                                        </div>
                                        <div class="medicine-item">
                                            <div class="item-total">总计：</div>
                                            <div class="item-price">
                                                {{ getPesticideTotal(pesticide) }}<span class="item-unit">元</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <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 class="medicine-item">
                                        <div class="item-name">服务亩数</div>
                                        <div class="item-val">{{ formatArea(detailData?.area) }}亩</div>
                                    </div>
                                    <div class="medicine-item">
                                        <div class="item-total">总计：</div>
                                        <div class="item-price">
                                            {{ getServiceTotal() }}<span class="item-unit">元</span>
                                        </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>
                </template>

                <template v-else>
                    <div class="farm-card prescription-content">
                        <div class="card-title">药物处方</div>
                        <div class="table-item">
                            <div class="form-item">
                                <div class="item-name">施用方式</div>
                                <div class="item-text">{{ detailData?.usageMode }}</div>
                            </div>
                        </div>
                        <div class="new-wrap">
                            <div class="new-title">
                                <div class="title-1"><div class="table-name">药肥类型</div></div>
                                <div class="title-2"><div class="table-name">肥药名称</div></div>
                                <div class="title-3"><div class="table-name">执行方式</div></div>
                                <div class="title-4"><div class="table-name">亩兑水量</div></div>
                                <div class="title-5"><div class="table-name">单亩用量</div></div>
                            </div>
                            <div
                                class="new-table-wrap"
                                v-for="(subP, prescriptionI) in detailData?.prescriptionList"
                                :key="prescriptionI"
                            >
                                <!-- <div
                                    class="new-prescription"
                                    v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList"
                                    :key="subI"
                                > -->
                                    <div class="new-table">
                                        <div class="line-l">
                                            <div class="line-1 title-1">{{ subP.typeName }}</div>
                                            <div class="line-2">
                                                {{ subP.name || subP.pesticideFertilizerName }}
                                            </div>
                                        </div>
                                        <div class="line-r">
                                            <div class="line-3">
                                                <div class="sub-line title-3">人工</div>
                                                <div class="sub-line title-4">{{ subP.ratio }}ML</div>
                                                <div class="sub-line title-5">{{ subP.muUsage }}{{ subP.unit }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
                                <!-- </div> -->
                            </div>
                        </div>
                    </div>

                    <div class="farm-card prescription-content">
                        <div class="card-title">处方报价</div>

                        <div class="price-bottom pb-8">
                            <div class="info-title-wrap">
                                <div class="sub-title font-bold">药肥费用</div>
                                <div class="info-more">
                                    {{ quotationData?.pesticideFertilizerCost ? formatArea(quotationData.pesticideFertilizerCost) : "--" }}<span class="unit-text">元</span>
                                </div>
                            </div>
                        </div>
                        <div class="info-content-wrap">
                            <price-table :prescriptionData="quotationData.prescriptionList">
                                <template #bottomContent>
                                    <div class="price-bottom">
                                        <div class="info-title-wrap">
                                            <div class="sub-title font-bold">服务费用</div>
                                            <div class="info-more">
                                                {{
                                                    quotationData?.farmWorkServiceCost
                                                        ? getServiceCost(
                                                              quotationData.farmWorkServiceCost,
                                                              quotationData.area
                                                          )
                                                        : "--"
                                                }}<span class="unit-text">元</span>
                                            </div>
                                        </div>
                                        <div class="price-info">
                                            <div class="info-l">
                                                执行方式<span class="main-text">{{
                                                    quotationData.executionMethodName || "人工"
                                                }}</span>
                                            </div>
                                            <div class="info-c">
                                                亩单价<span class="main-text">{{
                                                    quotationData.farmWorkServiceCost ||
                                                    quotationData.manualServicePrice
                                                        ? (quotationData.farmWorkServiceCost ||
                                                              quotationData.manualServicePrice) + "元/亩"
                                                        : "--"
                                                }}</span>
                                            </div>
                                            <div class="info-r">
                                                亩数<span class="main-text">{{
                                                    quotationData.area ? formatArea(quotationData.area) + "亩" : "--"
                                                }}</span>
                                            </div>
                                        </div>
                                        <div class="price-total">
                                            报价合计：<span class="main-val">{{
                                                quotationData?.totalCost ? formatArea(quotationData.totalCost) : "--"
                                            }}</span
                                            >元
                                        </div>
                                    </div>
                                </template>
                            </price-table>
                        </div>
                    </div>
                    
                    <div class="submit-btn center-btn">
                        <div class="btn" @click.prevent="toEditPrescription">编辑处方</div>
                    </div>
                </template>
            </el-form>
        </div>
    </div>

    <!-- 服务报价单 -->
    <price-sheet-popup ref="priceSheetPopupRef"></price-sheet-popup>

    <!-- 互动设置弹窗 -->
    <interact-popup
        ref="interactPopupRef"
        @handleSaveSuccess="handleSaveInteractSuccess"
        @handleDeleteInteract="handleDeleteInteract"
    ></interact-popup>
</template>

<script setup>
import { onActivated, ref, reactive, onDeactivated, onBeforeUnmount, computed, onMounted } 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 priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
import interactPopup from "@/components/popup/interactPopup.vue";
import priceTable from "../agri_work/components/priceTable.vue";

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

const actionType = ref([]);

const isEdit = ref(false);

onActivated(() => {
    const id = route.query.id;
    isEdit.value = route.query.isEdit ? true : false;
    // if (id) {
    //     getDetail(id);
    // }
    if (route.query.farmWorkId) {
        // getFarmWorkDetail(route.query.farmWorkId);
        getDetail(route.query.farmWorkId);
    }
    window.scrollTo(0, 0);
    if (route.query.data) {
        actionType.value = JSON.parse(route.query.data);
    } else {
        actionType.value = ["生长异常"];
    }
    dynamicValidateForm.prescriptionList = actionType.value.map((name) => ({
        name,
        pesticideFertilizerList: [
            {
                key: 1,
                typeName: "",
                muUsage: "",
                muUsage2: "",
                ratio: "",
                ratio2: "",
                remark: "",
            },
        ],
    }));
});

const farmWorkDetail = ref({});
// 获取农事详情
const getFarmWorkDetail = async (farmWorkId) => {
    const { data, code } = await VE_API.farm.getFarmWorkLib({ id: farmWorkId });
    if (code === 0) {
        detailData.value = data || {};
    }
};

const priceSheetPopupRef = ref(null);
const showPriceSheetPopup = () => {
    priceSheetPopupRef.value.handleShowPopup(detailData.value);
};

const detailData = ref({});
const getDetail = async (id) => {
    // const { data } = await VE_API.z_farm_work_record.getDetail({ id });
    const { data, code } = await VE_API.farm.getFarmWorkLib({ id });
    if(code === 0) {
        detailData.value = data;
        dynamicValidateForm.executeDate = data.executeDate;
        dynamicValidateForm.usageMode = data.usageMode;
        data.prescriptionList = data.prescription?.pesticideFertilizerList || [];
    
        // data.prescription?.pesticideFertilizerList.forEach((item) => {
        //     // item.pesticideFertilizerList.forEach((pesticide) => {
        //         item.executionMethod = item.executionMethod || 2; // 默认人工
        //     // });
        // });
    
        dynamicValidateForm.prescriptionList = data.prescriptionList;
        servicePricePerMu.value = detailData.value.farmWorkServiceCost || null;
    
        getQuotationData();
    }
};

const toEditPrescription = () => {
    isEdit.value = true;
};

const quotationData = ref({});

const getQuotationData = async () => {
    let priceDataObj = {};
    const { data } = await VE_API.z_farm_work_record_cost.getByRecordId({ farmWorkRecordId: detailData.value.id });
    priceDataObj = data;
    if (priceDataObj && Object.keys(priceDataObj).length > 0) {
        // 合并外层字段
        quotationData.value = {
            ...detailData.value,
            ...priceDataObj,
            agriculturalId: priceDataObj.agriculturalId,
        };

        // 根据 itemsList 的 pesticideFertilizerId 匹配并赋值品牌和价格
        if (priceDataObj.itemsList && Array.isArray(priceDataObj.itemsList) && detailData.value.prescriptionList) {
            // 创建价格映射表
            const priceMap = new Map();
            priceDataObj.itemsList.forEach((item) => {
                priceMap.set(String(item.pesticideFertilizerId), {
                    brand: item.brand || "",
                    price: item.price || 0,
                    totalPrice: item.totalPrice || null,
                });
            });

            // 遍历处方列表，赋值品牌和价格，并计算格式化字段供 price-table 使用
            quotationData.value.prescriptionList = detailData.value.prescriptionList.map((prescription) => {
                return {
                    ...prescription,
                    pesticideFertilizerList: prescription.pesticideFertilizerList.map((pesticide) => {
                        const pesticideId = String(pesticide.pesticideFertilizerId || "");
                        const priceInfo = priceMap.get(pesticideId);

                        if (priceInfo) {
                            const price = priceInfo.price || 0;
                            const muUsage = pesticide.muUsage || 0;
                            const unit = pesticide.unit || "";
                            const area = detailData.value.area || 0;

                            // 计算总价：优先使用 totalPrice，否则计算 price * muUsage * area
                            const total = priceInfo.totalPrice ? priceInfo.totalPrice : price * muUsage * area;

                            return {
                                ...pesticide,
                                brand: priceInfo.brand || "--",
                                totalPrice: priceInfo.totalPrice,
                                // 格式化字段供 price-table 组件使用
                                price: price > 0 ? `${price}元/${unit}` : "--", // 格式化单价显示
                                dosage: muUsage > 0 ? `${muUsage}${unit}` : "--", // 格式化用量显示
                                total: total > 0 ? total.toFixed(2) : "--", // 格式化总价显示
                            };
                        }
                        return pesticide;
                    }),
                };
            });
        }
    }
};

// 根据执行方式获取单亩用量：1=无人机用muUsage2，2=人工用muUsage
const getMuUsage = (pesticide) => {
    if (!pesticide) return 0;
    // 如果是叶面施且有执行方式选择，根据执行方式判断
    if (
        detailData.value?.usageMode === "叶面施" &&
        dynamicValidateForm.executionMethod !== null &&
        dynamicValidateForm.executionMethod !== undefined
    ) {
        // 1 = 无人机，使用 muUsage2
        if (dynamicValidateForm.executionMethod == 1) {
            return pesticide.muUsage2 || pesticide.muUsage || 0;
        }
        // 2 = 人工，使用 muUsage
        if (dynamicValidateForm.executionMethod == 2) {
            return pesticide.muUsage || 0;
        }
    }
    // 默认使用 muUsage（非叶面施的情况）
    return pesticide.muUsage || 0;
};

// 计算单个药肥的总计：单价 * 单亩用量 * 亩数
const getPesticideTotal = (pesticide) => {
    const muUsage = getMuUsage(pesticide);
    if (!pesticide.price || !muUsage || !detailData.value.area) return "--";
    const total = (pesticide.price * muUsage * detailData.value.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.farmWorkName = "";
    dynamicValidateForm.conditionRate = "";
    dynamicValidateForm.purpose = "";
    dynamicValidateForm.executeDate = dayjs().format("YYYY-MM-DD");
    dynamicValidateForm.checkDay = "";
    dynamicValidateForm.usageMode = "";
    dynamicValidateForm.prescriptionList = [
        {
            name: "",
            pesticideFertilizerList: [
                {
                    key: 1,
                    typeName: "",
                    muUsage: "",
                    muUsage2: "",
                    ratio: "",
                    ratio2: "",
                    remark: "",
                },
            ],
        },
    ];

    // 清空其他数据
    actionType.value = [];
};

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

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

const cancelEdit = () => {
    ElMessageBox.confirm("确认要取消编辑吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            isEdit.value = false;
        })
        .catch(() => {
            console.log("取消编辑");
        });
};

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

const handleExecutionMethodChange = (parentIndex, index, val) => {
    const domain = dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index];
    if (val == 1) {
        domain.muUsage = domain.muUsage2;
        domain.ratio = domain.ratio2;
        servicePricePerMu.value = detailData.value.uavServicePrice;
    } else {
        servicePricePerMu.value = detailData.value.manualServicePrice;
    }
};

// 表单
const formRef = ref();
const dynamicValidateForm = reactive({
    farmWorkName: "",
    conditionRate: "",
    purpose: "",
    executeDate: dayjs().format("YYYY-MM-DD"),
    checkDay: "",
    usageMode: "",
    executionMethod: 2,
    prescriptionList: [
        {
            name: "",
            pesticideFertilizerList: [
                {
                    key: 1,
                    typeName: "",
                    muUsage: "",
                    muUsage2: "",
                    ratio: "",
                    ratio2: "",
                    remark: "",
                },
            ],
        },
    ],
});

const rules = {
    farmWorkName: [
        {
            required: true,
            message: "请输入农事名称",
            trigger: "blur",
        },
    ],
    conditionRate: [
        {
            required: false,
            message: "请输入触发条件",
            trigger: "blur",
        },
    ],
    executeDate: [
        {
            required: false,
            message: "请选择执行时间",
            trigger: "blur",
        },
    ],
    checkDay: [
        {
            required: true,
            message: "请选择复核时间",
            trigger: "blur",
        },
    ],
};

const addDomain = (parentIndex) => {
    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.unshift({
        key: Date.now(),
        muUsage: "",
        muUsage2: "",
        ratio: "",
        ratio2: "",
        remark: "",
        executionMethod: 2, // 默认人工
    });
};

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

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

/**
 * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
 * @param index
 */
const handlePesticideFertilizerChange = (parentIndex, index) => {
    let obj = pesticideFertilizersOptions.value.filter(
        (item) =>
            dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index].pesticideFertilizerId ===
            item.id
    )[0];
    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
        ...dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index],
        typeName: obj.typeName,
        unit: obj.unit,
        defaultRatio: obj.defaultRatio,
        usageModeList: obj.usageModeList,
        executionMethod: obj.executionMethod || 2, // 默认人工
        ratio: obj.defaultRatio,
        defaultName: obj.defaultName,
        pesticideFertilizerName: obj.name,
        pesticideFertilizerCode: obj.pesticideFertilizerCode,
    };
};

const removeDomain = (parentIndex, item) => {
    const index = dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.indexOf(item);
    if (index !== -1) {
        dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.splice(index, 1);
    }
};

const resetItemForm = (parentIndex, index) => {
    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
        typeName: "",
        muUsage: "",
        muUsage2: "",
        ratio: "",
        ratio2: "",
        remark: "",
        executionMethod: 2, // 默认人工
    };
};

const servicePricePerMu = ref(null);

// 计算服务费用总计：亩单价 * 亩数
const getServiceTotal = () => {
    if (!servicePricePerMu.value || !detailData.value.area) return "--";
    const total = (servicePricePerMu.value * detailData.value.area).toFixed(2);
    return total;
};

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            // router.push({
            //     path: "/completed_work",
            //     query: {
            //         id: 1,
            //         status: 1,
            //     },
            // });
            submit();
        } else {
            console.log("error submit!");
        }
    });
};

const submit = () => {
    const data = {
        id: route.query.id,
        ...dynamicValidateForm,
    };
    VE_API.z_farm_work_record.issueFarmWorkRecord(data).then(async (res) => {
        if (res.code === 0) {
            await getDetail(route.query.id);
            showPriceSheetPopup();
        }
    });
};

const handleSaveInteractSuccess = () => {
    // getDetail(route.query.id);
};

const handleDeleteInteract = () => {
    // getDetail(route.query.id);
};

const interactPopupRef = ref(null);
const handleEditInteract = (item) => {
    if (interactPopupRef.value) {
        interactPopupRef.value.showPopup({
            arrangeIdVal: item.id,
            interactTitleVal: item.farmWorkName || "梢期杀虫", // 使用农事名称作为标题
            interactTimeVal: item.interactTime || "", // 如果有已保存的互动时间
            forceTriggerTimeVal: item.forceTriggerTime || "", // 如果有已保存的强制触发时间
            interactQuestionVal: item.interactQuestion, // 如果有已保存的互动问题
        });
    }
};
</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;

        // ::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: 4px 8px;
            background: rgba(33, 153, 248, 0.16);
            border-radius: 20px;
            font-weight: normal;
            height: 25px;
            line-height: 25px;
        }
        .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 {
        margin-top: 12px;
        // 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: 12px;
    }
    .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;
            &.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%;
            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>