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

<template>
    <div class="new-farming-page">
        <custom-header :name="isAdd ? '新增农事' : isEdit ? '编辑方案' : '农事详情'"></custom-header>
        <div class="new-farming-content">
            <div v-if="!isAdd && !isEdit">
                <div class="step-wrap">
                    <farm-steps :currentStep="0" />
                </div>
                <div class="box-wrap farm-info">
                    <div class="info-title">
                        <div class="card-title">农场现状</div>
                        <!-- <div class="info-more">
                            点击查看更多
                            <el-icon><ArrowRight /></el-icon>
                        </div> -->
                    </div>
                    <div class="info-content">
                        {{ farmStatusText }}
                    </div>
                </div>
                <div class="box-wrap farm-photo" v-if="triggerImg.length">
                    <div class="photo-list">
                        <photo-provider :photo-closable="true">
                                <photo-consumer v-for="src in triggerImg" intro="触发照片" :key="src" :src="base_img_url2 + src.cloudFilename">
                                    <div class="img-item">
                                        <img :src="base_img_url2 + src.cloudFilename" class="view-box">
                                    </div>
                                </photo-consumer>
                        </photo-provider>
                    </div>
                    <!-- <div class="list-text">点击查看更多</div> -->
                </div>
            </div>
            <el-form
                ref="formRef"
                style="max-width: 600px"
                label-position="left"
                :rules="rules"
                :model="dynamicValidateForm"
                class="demo-dynamic"
            >
                <div class="farm-card" v-if="!isAdd">
                    <div class="card-title">{{ detailData?.farmWorkName }}<span class="type-tag">标准农事</span></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 label-width="70px" class="form-item" prop="conditionRate" label="触发条件">
                            <div class="condition-wrap">
                                {{ detailData?.condition }}
                            </div>
                        </el-form-item> -->
                        <el-form-item 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>
                    </div>
                </div>
                <template v-else>
                    <div class="farm-card progress">
                        <span class="progress-title">农事进度</span>
                        <el-radio-group v-model="farmProgress">
                            <el-radio :value="0">已做</el-radio>
                            <el-radio :value="1">未做</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="farm-card" v-if="farmProgress === 0">
                        <div class="card-title">基本信息</div>
                        <div class="info-content">
                                <el-form-item label-width="82px" class="form-item" prop="farmWorkName" label="农事名称">
                                    <el-select v-model="dynamicValidateForm.farmWorkName" placeholder="请选择农事名称" style="width: 100%">
                                        <el-option v-for="(item, index) in farmWorkNameList" :key="index" :value="item" :label="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label-width="82px" class="form-item" prop="name" label="农事目的">
                                    <el-input
                                        v-model="dynamicValidateForm.purpose"
                                        style="width: 100%"
                                        :rows="2"
                                        type="textarea"
                                        placeholder="请输入农事目的"
                                    />
                                </el-form-item>
                                <el-form-item label-width="82px" class="form-item" prop="conditionRate" label="执行时间">
                                    <el-date-picker
                                        v-model="dynamicValidateForm.checkDay"
                                        value-format="YYYY-MM-DD"
                                        type="date"
                                        placeholder="请选择执行时间"
                                        style="width: 100%"
                                        :editable="false"
                                    />
                                </el-form-item>
                        </div>
                    </div>
                </template>
                <div class="farm-card prescription-content" v-if="farmProgress === 0">
                    <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">{{ formatIndex(index) }}</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: 100%"
                                                    >
                                                        <el-option
                                                            v-for="item in pesticideFertilizersOptions"
                                                            :key="item.id"
                                                            :label="item.defaultName || item.name"
                                                            :value="item.id"
                                                        />
                                                    </el-select>
                                                </div>
                                            </div>
                                            <div class="form-title">人工方式</div>
                                            <div class="box-item sub-item">
                                                <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"
                                                        style="width: 100%"
                                                        placeholder="请输入"
                                                    /> -->

                                                    <el-input v-model="domain.ratio" type="number" step="0.01" placeholder="请输入">
                                                        <template #append>倍</template>
                                                    </el-input>
                                                </div>
                                            </div>
                                            <!-- <div class="box-item sub-item">
                                                <div class="form-l">施用方式</div>
                                                <div class="form-r">
                                                    <el-select
                                                        v-model="domain.usageMode"
                                                        placeholder="请选择"
                                                        style="width: 100%"
                                                    >
                                                        <el-option
                                                            v-for="(usage, uId) in domain.usageModeList"
                                                            :key="uId"
                                                            :label="usage"
                                                            :value="usage"
                                                        />
                                                    </el-select>
                                                </div>
                                            </div> -->
                                            <div class="box-item sub-item">
                                                <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.muUsage"
                                                        style="width: 100%"
                                                        placeholder="请输入"
                                                    /> -->
                                                    <el-input v-model="domain.muUsage" type="number" step="0.01" placeholder="请输入">
                                                        <template #append>{{ domain.unit }}</template>
                                                    </el-input>
                                                </div>
                                            </div>
                                            <div v-if="dynamicValidateForm.usageMode === '叶面施'">
                                                <div class="form-title">无人机</div>
                                                <div class="box-item sub-item">
                                                    <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.ratio2"
                                                            style="width: 100%"
                                                            placeholder="请输入"
                                                        /> -->
                                                        <el-input v-model="domain.ratio2" type="number" step="0.01" placeholder="请输入">
                                                            <template #append>倍</template>
                                                        </el-input>
                                                    </div>
                                                </div>
                                                <div class="box-item sub-item">
                                                    <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.muUsage2"
                                                            style="width: 100%"
                                                            placeholder="请输入"
                                                        /> -->
                                                        <el-input v-model="domain.muUsage2" 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 progress" v-else>
                    <div class="situation-description">
                        <div class="description-title">状况描述</div>
                        <div class="description-content">
                            <el-input
                                v-model="situationDescription"
                                type="textarea"
                                :rows="3"
                                placeholder="请输入目前农场状况"
                                class="description-textarea"
                            />
                            <div class="upload-section">
                                <el-button class="upload-btn" @click="handleUploadImage">
                                    <el-icon><Upload /></el-icon>
                                    上传图片
                                </el-button>
                                <div class="upload-tip">上传图片,专家诊断更清晰</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="farm-card map-content" v-if="false">
                <!-- <div class="farm-card map-content" v-if="!(curRole==1 && isAdd)"> -->
                    <div class="card-title">执行农事区域</div>
                    <div class="info-content">
                        <div class="area-select">
                            执行分区：
                            <span class="block"></span>
                            <el-select
                                popper-class="v-select-popper-ns"
                                v-model="regionId"
                                placeholder="请选择分区"
                                style="width: 160px"
                                @change="changeRegion"
                            >
                                <el-option
                                    v-for="(area, index) in areaList"
                                    :key="index"
                                    :label="area.name"
                                    :value="area.id"
                                >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="area-select">
                            服务亩数：
                            <span class="block"></span>{{ serveArea }}
                        </div>
                        <div class="bottom-map" ref="areaRef"></div>
                        <div>
                            <div class="check-btn">
                                <el-checkbox v-model="checkedArea" @change="handleArea" label="全选" size="large" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="submit-btn" v-if="isEdit">
                    <div class="btn second" @click.prevent="cancelEdit">取消编辑</div>
                    <div class="btn" @click.prevent="submitForm(formRef)">保存方案</div>
                </div>
                <div class="submit-btn" v-if="!isAdd && !isEdit">
                    <div class="btn second" @click="handleIgnore">忽略</div>
                    <div class="btn" @click.prevent="submitForm(formRef)">确认并报价</div>
                </div>
                <div class="submit-btn" v-if="isAdd && farmProgress === 0">
                    <div class="btn second">取消</div>
                    <div class="btn" @click.prevent="submitForm(formRef)">确定新增</div>
                </div>
                <div v-if="isAdd && farmProgress === 1">
                    <div class="expert-diagnosis-btn" @click="handleExpertDiagnosis">邀请专家诊断</div>
                </div>
            </el-form>
        </div>
    </div>

    <popup v-model:show="showTaskPopup" round class="task-tips-popup">
        <template v-if="taskPopupType === 'warning'">
            <img  class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
            <div class="create-farm-text">
                <div>您确认忽略 <span class="main-text">{{ detailData?.farmName }}</span> 的 <span class="main-text">{{ detailData?.farmWorkName }}</span> 农事吗</div>
            </div>
        </template>
        <template v-else>
            <img class="farm-check-icon" src="@/assets/img/home/right.png" alt="">
            <div class="create-farm-text success-text">农事已下发成功</div>
        </template>
        <div class="create-farm-btn" @click="handlePopupBtn">{{ taskPopupType === 'warning' ? '确认忽略' : '我知道了' }}</div>
    </popup>

    
    <!-- 服务报价单 -->
    <price-sheet-popup ref="priceSheetPopupRef"></price-sheet-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 NewFarmMap from "./newFarmMap";
import { useStore } from "vuex";
import { Popup } from "vant";
import farmSteps from "@/components/farmSteps.vue";
import { base_img_url2 } from "@/api/config";
import { formatArea } from "@/common/commonFun";
import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
import dayjs from "dayjs";
const store = useStore();
const router = useRouter();
const route = useRoute();

// 角色
// const curRole = store.state.app.curRole
const curRole = 0

const gardenId = ref(null);
const actionType = ref([]);
const isAdd = ref(false)

const showTaskPopup = ref(false);
const taskPopupType = ref('warning');

const isEdit = ref(false)
isAdd.value = route.query.isAdd ? true : false
isEdit.value = route.query.isEdit ? true : false
onActivated(() => {
    const id = route.query.id;
    if (id) {
        getDetail(id);
        getTriggerImg(id);
    }
    window.scrollTo(0, 0);
    getFarmWorkNameList();
    getFarmWorkIndexNameList();
    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: "",
            },
        ],
    }));
    if (!(curRole==1 && isAdd.value)) {
        const point = store.state.home.miniUserLocationPoint;
        // newFarmMap.initMap(point, areaRef.value);
        // eventBus.on("editNsMap:areaVal", getArea);
        gardenId.value = route.query.gardenId;
        // getAreaList(() => {
        //     newFarmMap.initArea(areaList.value);
        // });
    }

    getWarningMsg();
});

const triggerImg = ref([]);
const getTriggerImg = async (id) => {
    const { data } = await VE_API.z_farm_work_record.getTriggerImg({ farmWorkRecordId: id });
    triggerImg.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 res = data[0];
        detailData.value = res;
        dynamicValidateForm.executeDate = res.executeDate;
        dynamicValidateForm.usageMode = res.usageMode;

        res.prescriptionList.forEach(item => {
            item.pesticideFertilizerList.forEach(pesticide => {
                pesticide.typeName = item.name;
            });
        });

        dynamicValidateForm.prescriptionList = res.prescriptionList;

        getFarmWorkArrangeDetail(res.farmWorkArrangeId);
};


// 获取农场现状
const farmStatusText = ref('');
const getFarmWorkArrangeDetail = (id) => {
    VE_API.farm.getFarmWorkArrangeDetail({ id }).then(({ data }) => {
        farmStatusText.value = data.farmStatus;
    });
};

function handleIgnore() {
    taskPopupType.value = 'warning';
    showTaskPopup.value = true;
}

function handlePopupBtn() {
    showTaskPopup.value = false;
    if (taskPopupType.value === 'warning') {
        // 确认忽略
        VE_API.z_farm_work_record.ignoreFarmWorkRecord({ farmWorkRecordId: route.query.id }).then((res) => {
            if (res.code === 0) {
                ElMessage.success("操作成功");
                router.back();
            }
        });
    } else {
        router.replace({
            path: "/completed_work",
            query: {
                miniJson: JSON.stringify({ id: route.query.id }),
            },
        });
    }
}

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    serveArea.value = null;
    regionId.value = null;
};

// 清空所有数据
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: "",
        }],
    }];
    
    // 清空其他数据
    serveArea.value = null;
    regionId.value = null;
    areaList.value = [];
    farmProgress.value = 0;
    situationDescription.value = '';
    checkedArea.value = false;
    actionType.value = [];
    gardenId.value = null;
    showTaskPopup.value = false;
    taskPopupType.value = 'warning';
};

onDeactivated(() => {
    // areaRef.value && newFarmMap.destroyMap();
    clearData();
});

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

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

// 表单
const formRef = ref();
const dynamicValidateForm = reactive({
    farmWorkName: "",
    conditionRate: "",
    purpose: "",
    executeDate: dayjs().format("YYYY-MM-DD"),
    checkDay: "",
    usageMode: "",
    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 formatIndex = (index) => {
    return String(index + 1).padStart(2, "0");
};

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

let pesticideFertilizersOptions = ref([
    // {
    //     id: 'null',
    //     name: "芸苔素内酯 15000倍",
    //     typeName: "30",
    //     defaultRatio: null,
    //     defaultDroneRatio: null,
    //     unit: 0,
    //     defaultName: "调节",
    // },
    {
        brand: "天润美满",
        capacity: 1000,
        count: null,
        defaultDroneRatio: null,
        defaultName: "生物活性酶",
        defaultRatio: null,
        ftl: "",
        id: "185",
        name: "生物活性酶",
        pesticideFertilizerCode: "1185",
        price: 220.0,
        processUnit: "",
        typeId: 1,
        typeName: "调节",
        unit: "ml",
        unitUsage: null,
        unitWaterAmount: null,
        usageModeList: ["叶面施"],
    },
    {
        brand: "",
        capacity: null,
        count: null,
        defaultDroneRatio: null,
        defaultName: "矮壮素",
        defaultRatio: null,
        ftl: "",
        id: "145",
        name: "矮壮素",
        pesticideFertilizerCode: "1145",
        price: null,
        processUnit: "",
        typeId: 1,
        typeName: "调节",
        unit: "ml",
        unitUsage: null,
        unitWaterAmount: null,
        usageModeList: ["叶面施"],
    },
]);
VE_API.z_farm_work_order.pesticideFertilizersList().then(({ data }) => {
    pesticideFertilizersOptions.value = data;
});

const allUsageMode = ref(null);
const allUsageModeList = ["叶面施", "根部施", "人工农事"];

// 农事名称列表
const farmWorkIndexNameList = ref([
        "片区拔节率",
        "园区花蕾率",
        "单树花蕾率",
        "片区雄穗抽出率",
        "园区花量大率",
        "单树花量大率",
        "片区分蘖率",
    ]);
function getFarmWorkIndexNameList() {
    farmWorkIndexNameList.value = [
        "片区拔节率",
        "园区花蕾率",
        "单树花蕾率",
        "片区雄穗抽出率",
        "园区花量大率",
        "单树花量大率",
        "片区分蘖率",
    ];
    // VE_API.farm.fetchFarmWorkIndexNameList().then(({data}) => {
    //     farmWorkIndexNameList.value = data
    // })
}
// 触发指标列表
const farmWorkNameList = ref([]);
function getFarmWorkNameList() {
    // VE_API.farm.fetchFarmWorkNameList().then(({data}) => {
    //     farmWorkNameList.value = data
    // })
}

// 预警文字信息
const warningMsg = ref("");

const getWarningMsg = () => {
    // VE_API.farm.getFarmWorkWarningMsg({farmId: gardenId.value}).then(({data}) => {
    //     warningMsg.value = data
    // })
};

/**
 * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
 * @param index
 */
const handlePesticideFertilizerChange = (parentIndex, index) => {
    let obj = pesticideFertilizersOptions.value.filter(
        (item) =>
            dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index].pesticideFertilizerId ===
            item.id
    )[0];
    console.log('obj', obj)
    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
        ...dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index],
        typeName: obj.typeName,
        unit: obj.unit,
        defaultRatio: obj.defaultRatio,
        usageModeList: obj.usageModeList,
        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: "",
    };
};

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 = () => {
    // let executeBlueZones = null
    // if (!(curRole==1 && isAdd.value)) {
    //     executeBlueZones = newFarmMap.getSelectedBlueRegion();
    // }
    // if (!executeBlueZones || !executeBlueZones.length) {
    //     ElMessage({
    //         message: "请选择执行区域",
    //         type: "warning",
    //     });
    //     return false
    // }

    // 检查药物所有项是否都包含特定的字段
    // const hasRequiredFields = dynamicValidateForm.prescriptionList.every(item => {
    //     return item.pesticideFertilizerList.every(domain  => {
    //         const hasPesticideFertilizerCode  = 'pesticideFertilizerCode' in domain
    //         const hasMuUsage = 'muUsage' in domain;
    //         const hasRatio = 'ratio' in domain;

    //         const isMuUsageValid = domain.muUsage !== '';
    //         const isRatioValid = domain.ratio ? true : false;

    //         return hasPesticideFertilizerCode && hasMuUsage && hasRatio && isMuUsageValid && isRatioValid
    //     });
    // })
    // if (!hasRequiredFields) {
    //     ElMessage({
    //         message: "请完善药物信息",
    //         type: "warning",
    //     });
    //     return false
    // }

    // const flattenedDomains = flattenDomains(dynamicValidateForm.prescription)
    const data = {
        id: route.query.id,
        ...dynamicValidateForm,
    };
    VE_API.z_farm_work_record.issueFarmWorkRecord(data).then(async (res) => {
        if (res.code === 0) {
            // taskPopupType.value = 'success';
            // showTaskPopup.value = true;
            await getDetail(route.query.id);
            showPriceSheetPopup()
        }
    })
    // 新增农事
    // VE_API.farm.saveFarmWork(data).then(({ code }) => {
    //     if (code === 0) {
    //         ElMessage({
    //             message: "保存成功",
    //             type: "success",
    //         });
    //         setTimeout(() => {
    //             // router.go(-1);
    //             router.replace("/expert_album?reload=true");
    //         }, 500);
    //     }
    // });
    // const data = {
    //     orderId: props.prescriptioData.orderId,
    //     orderStatus: 1,
    //     pesticideFertilizers: dynamicValidateForm.domains,
    // };
    // VE_API.order.confirm(data).then(({ code }) => {
    //     if (code == 0) {
    //         console.log('专家下发处方成功');
    //         eventBus.emit('discover:submitForm')
    //         window.location.reload()
    //     }
    // });
};

const farmWorkTypeVal = computed(() => {
    const valueMap = {
        生长异常: 1,
        病虫异常: 3,
        营养农事: 2,
    };

    if (actionType.value.length === 1) {
        return valueMap[actionType.value[0]] || null; // 如果只有一个元素，返回对应的值，否则返回 null
    } else {
        return 1;
    }
});

function flattenDomains(data) {
    return data.reduce((acc, item) => {
        return acc.concat(item.pesticideFertilizerList);
    }, []);
}

// 地图
const areaRef = ref(null);
let newFarmMap = new NewFarmMap();

const serveArea = ref(null);
// 农场分区列表
const areaList = ref([]);
const regionId = ref(null);

const farmProgress = ref(0)

// 状况描述相关数据
const situationDescription = ref('')

// 切换分区
const changeRegion = (e) => {
    checkedArea.value = false;
    newFarmMap.getBlueRegion({ gardenId: gardenId.value, regionId: e }, () => {
        // newFarmMap.setBlueRegion([{id: "ws0y1me7h94u"}, {id: "ws0y1me545tg"}])
        // serveArea.value = "3.72亩"
    });
};

// 所选蓝色分区的面积
const getArea = (val) => {
    serveArea.value = val.toFixed(2) + "亩";
};

const checkedArea = ref(false);
const handleArea = (e) => {
    newFarmMap.toggleAllArea(e);
};

// 处理上传图片
const handleUploadImage = () => {
    // 这里可以添加上传图片的逻辑
    console.log('上传图片');
};

// 处理邀请专家诊断
const handleExpertDiagnosis = () => {
    // 这里可以添加邀请专家诊断的逻辑
    console.log('邀请专家诊断');
};
</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: 10px;
        border-radius: 8px;
    }
    .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);
            .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;
        // 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;
        }
    }
    .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;
        }
    }

    .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;
        }
    }
    .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;
        }
    }
    .recipe-item {
        width: 100%;
        .recipe-form {
            padding-top: 8px;
            ::v-deep {
                .el-form-item {
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }

        .box-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(0, 0, 0, 0.4);
            .r-text {
                width: 140px;
                text-align: center;
            }
            .form-r {
                width: 60%;
                min-width: 140px;
                max-width: 240px;
            }
        }
        .form-box {
            border: 1px solid rgba(33, 153, 248, 0.8);
            border-radius: 8px;
            padding: 20px 10px;
            width: 100%;
            position: relative;
            // background: rgb(209, 235, 255, 0.3);
            // margin-bottom: 12px;
            .form-index {
                position: absolute;
                left: 0;
                top: 0;
                padding: 0 6px;
                background: #2199F8;
                border-radius: 4px 0 4px 0;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
                color: #fff;
            }
            .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;
    }
}
.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>