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

<template>
    <div class="completed-work">
        <custom-header name="农事详情" isGoBack @goback="handleClose"></custom-header>
        <div class="work-content">
            <!-- <div class="step-wrap" v-show="query.status !== 'warning'">
                <farm-steps :currentStep="currentStep" />
            </div> -->
            <div class="content-status">
                <div class="status-l">
                    <div class="stauts-text">待完成</div>
                    <div class="stauts-sub-text" v-if="detailData?.executeDeadlineDate && !detailData?.expectedExecuteDate">
                        截止到 <span class="time-text">{{ detailData?.executeDeadlineDate }}</span>
                    </div>
                    <div class="stauts-sub-text" v-if="detailData?.expectedExecuteDate">
                        <template v-if="daysDiff > 0">
                            距离执行时间还剩 <span class="time-text">{{ daysDiff }} 天</span>
                        </template>
                        <template v-else-if="daysDiff === 0">
                            执行时间为今天
                        </template>
                        <template v-else>
                            执行时间已过
                        </template>
                    </div>
                </div>
                <!-- <template v-if="query.status !== 'warning'">
                    <div class="status-r" v-if="curRole == 0">{{ status === 0 ? "设置提醒" : "去评价" }}</div>
                    <div class="status-r" v-if="curRole == 1">{{ status === 0 ? "提醒执行" : "提醒复核" }}</div>
                    <div class="status-r" v-if="curRole == 2">{{ status === 0 ? "提醒执行" : "提醒复核" }}</div>
                </template> -->
            </div>
            <div class="work-wrap" v-if="query?.farmWorkOrderId || detailData?.flowStatus === 4">
                <div class="box-wrap executor-info" v-if="query.status === 'warning' || curRole == 0 || curRole == 2">
                    <!-- <div class="executor-title">执行人</div> -->
                    <div class="executor-content">
                        <div class="executor-info mt-0">
                            <div class="executor-avatar">
                                <img
                                    src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg?x-oss-process=image/resize,w_500"
                                    alt="执行人"
                                />
                            </div>
                            <div class="executor-details">
                                <div class="org-name">
                                    <span class="name">{{ quotationData.agriculturalStoreName || "--" }}</span>
                                    <span class="rating">{{
                                        quotationData.score ? quotationData.score + "分" : ""
                                    }}</span>
                                </div>
                                <div class="service-info">
                                    <div class="service-item">
                                        服务品种:
                                        <span v-if="speciesList.length">
                                            <span v-for="(sp, sIdx) in speciesList" :key="sIdx">
                                                {{ sp }}<template v-if="sIdx < speciesList.length - 1">、</template>
                                            </span>
                                        </span>
                                        <span v-else>--</span>
                                    </div>
                                    <div class="service-item">
                                        服务设备:
                                        <span v-if="equipmentList.length">
                                            <span v-for="(eq, eIdx) in equipmentList" :key="eIdx">
                                                {{ eq }}<template v-if="eIdx < equipmentList.length - 1">、</template>
                                            </span>
                                        </span>
                                        <span v-else>--</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="farm-info">
                            <div class="info-title-wrap">
                                <div class="sub-title">药肥费用</div>
                                <div class="info-more">
                                    {{ pesticideCostTotal ? formatArea(pesticideCostTotal) : "--"
                                    }}<span class="unit-text">元</span>
                                </div>
                            </div>
                            <div class="info-content-wrap">
                                <price-table
                                    :prescriptionData="quotationData.prescriptionList"
                                    :area="detailData?.area"
                                    :isArrList="true"
                                >
                                    <template #bottomContent>
                                        <div class="price-bottom">
                                            <div class="info-title-wrap">
                                                <div class="sub-title">服务费用</div>
                                                <div class="info-more">
                                                    {{ detailData?.serviceMuPrice ? serviceCostTotal : "--" }}
                                                    <span class="unit-text">元</span>
                                                </div>
                                            </div>
                                            <div class="price-info">
                                                <div class="info-l">
                                                    单亩价格<span class="main-text">{{
                                                        detailData?.serviceMuPrice
                                                            ? detailData?.serviceMuPrice + "元/亩"
                                                            : "--"
                                                    }}</span>
                                                </div>
                                            </div>
                                            <div class="price-total">
                                                报价合计：<span class="main-val">
                                                    {{ totalCost ? formatArea(totalCost) : "--" }} </span
                                                >元
                                            </div>
                                        </div>
                                    </template>
                                </price-table>
                            </div>
                        </div>
                        <!-- <div class="contact-buttons">
                            <button class="contact-btn">电话联系</button>
                            <button class="contact-btn">在线联系</button>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="work-wrap info-wrap">
                <div class="box-wrap farm-data">
                    <div class="card-title">
                        <div>{{ detailData?.farmWorkName }}<span class="type-tag">标准农事</span></div>
                        <!-- <div class="point-wrap">
                            <div class="point"></div>
                            <span>2区</span>
                        </div> -->
                        <div class="tag-text">托管农事</div>
                    </div>
                    <div class="data-content">
                        <div class="form-item">
                            <div class="item-name">农事编号</div>
                            <div class="item-text">{{ detailData?.code }}</div>
                        </div>
                        <div class="form-item">
                            <div class="item-name">服务亩数</div>
                            <div class="item-text">
                                {{ detailData?.area ? formatArea(detailData?.area) + "亩" : "--" }}
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="item-name">服务区域</div>
                            <div class="item-text">{{ detailData?.serviceRegion }}</div>
                        </div>
                        <!-- <div class="form-item">
                            <div class="item-name">触发条件</div>
                            <div class="item-text">{{ detailData?.condition }}</div>
                        </div> -->
                        <div class="form-item" v-if="detailData?.expectedExecuteDate">
                            <div class="item-name">执行时间</div>
                            <div class="item-text">
                                {{detailData?.expectedExecuteDate}}
                            </div>
                        </div>
                        <div class="form-item" v-else-if="detailData?.executeDeadlineDate">
                            <div class="item-name">截止日期</div>
                            <div class="item-text">
                                {{detailData?.executeDeadlineDate}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-wrap farm-table">
                    <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 class="form-item">
                            <div class="item-name">执行方式</div>
                            <div class="item-text">
                                {{ quotationData?.executionMethodName }}
                            </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-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="(prescriptionItem, 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.defaultName || subP.pesticideFertilizerName }}</div>
                                    </div>
                                    <div class="line-r">
                                        <div class="line-3">
                                            <div class="sub-line title-4">{{ quotationData.executionMethod === 1 ? subP.ratio2 : subP.ratio }}倍</div>
                                            <div class="sub-line title-5">{{ quotationData.executionMethod === 1 ? subP.muUsage2 : 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="work-map">
                    <div class="card-title">执行农事区域</div>
                    <div class="map-content">
                        <div class="map-dom" ref="areaRef"></div>
                    </div>
                </div> -->
            </div>

            <!-- 农资，步骤：农资已执行，请求确认 -->
            <div class="fixed-btn-wrap" :class="{'center': !getButtonText()}" v-if="curRole == 2 && !detailData?.expectedExecuteDate">
                <div class="fixed-btn orange primary-text" @click="handleRemindExecuteTime" v-if="getButtonText()">提醒确认执行时间</div>
                <div class="fixed-btn orange" @click="selectExecuteTime">确认执行时间</div>
            </div>
            <div class="fixed-btn-wrap" :class="{'center': !getButtonText()}" v-if="curRole == 2 && detailData?.expectedExecuteDate">
                <div class="fixed-btn primary primary-text width-120" @click="handleExecute" v-if="getButtonText()">提醒执行</div>
                <div class="fixed-btn primary" @click="showOfferPopup(detailData)">上传照片</div>
            </div>

            <!-- 农资，步骤：农事已确认 -->
            <!-- <div class="fixed-btn-wrap" v-if="curRole == 2 && detailData?.expectedExecuteDate">
                <div class="fixed-btn second" @click="showPriceSheetPopup">生成报价单</div>
                <div class="fixed-btn" @click="handleTimelineAction(detailData)">转入农事任务</div>
            </div> -->
        </div>
    </div>
    <!-- 报价弹窗 -->
    <!-- <offer-popup :showPopup="showPopup" :executionData="executionData"></offer-popup> -->
    <!-- 服务报价单 -->
    <price-sheet-popup ref="priceSheetPopupRef"></price-sheet-popup>
    <!-- 需求发送成功 -->
    <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>您确认取消已发起的农事需求吗</div>
            </div>
        </template>
        <template v-else-if="taskPopupType === 'warningIgnore'">
            <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">{{ successText }}</div>
        </template>
        <div class="create-farm-btn" @click="handlePopupBtn">
            {{ taskPopupType === "warning" ? "确认" : taskPopupType === "warningIgnore" ? "确认忽略" : "我知道了" }}
        </div>
    </popup>

    <!-- 确认执行时间 -->
    <calendar v-model:show="showCalendar" @confirm="onConfirmExecuteTime" :min-date="minDate" :max-date="maxDate" />

    <!-- 上传照片弹窗 -->
    <review-upload-popup :key="10" v-model="showUpload" :record-id="sectionId" @success="handleSelfDone" />

    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>

    <offer-popup ref="offerPopupRef" @uploadSuccess="handleUploadSuccess"></offer-popup>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref, computed, onActivated, onDeactivated } from "vue";
// import NewFarmMap from "./newFarmMap";
import { useStore } from "vuex";
import { Popup, Calendar } from "vant";
import offerPopup from "@/components/popup/offerPopup.vue";
import { useRouter, useRoute } from "vue-router";
import farmSteps from "@/components/farmSteps.vue";
import priceTable from "../agri_work/components/priceTable.vue";
import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
import uploadExecute from "@/views/old_mini/task_condition/components/uploadExecute.vue";
import { base_img_url2 } from "@/api/config";
import { ElMessage } from "element-plus";
import { formatArea, formatDate } from "@/common/commonFun";
import wx from "weixin-js-sdk";
import reviewUploadPopup from "@/components/popup/reviewUploadPopup.vue";
import FnShareSheet from "@/components/pageComponents/FnShareSheet.vue";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
import eventBus from "@/api/eventBus";

const router = useRouter();
const store = useStore();
const query = ref({});
// 角色
// const curRole = store.state.app.curRole
const curRole = ref(localStorage.getItem("SET_USER_CUR_ROLE"));
// const curRole = 2;

// 农资待生成报价单--currentStep：1；curRole：2
// 农资已执行，有执行照片，请求确认--currentStep：2；curRole：2

const showUpload = ref(false);
const sectionId = ref(null);
// 上传照片处理函数
const handleUploadPhoto = ({ id }) => {
    showUpload.value = true;
    sectionId.value = id;
};

onDeactivated(() => {
    showUpload.value = false;
    sectionId.value = null;
});

const handleSelfDone = () => {
    VE_API.z_farm_work_record.updateFlowStatus({ id: queryRecordId.value, targetFlowStatus: 5 }).then((res) => {
        if (res.code === 0) {
            showUpload.value = false;
            sectionId.value = null;
            setTimeout(() => {
                router.replace({
                    path: "/review_work",
                    query: {
                        miniJson: JSON.stringify({ id: queryRecordId.value, goBack: true }),
                    },
                });
            }, 500);
        }
    });
};

const successText = ref("");
const taskPopupActionType = ref(0);
const showTaskPopup = ref(false);
const taskPopupType = ref("");
const handlePopupBtn = () => {
    showTaskPopup.value = false;
    if (taskPopupType.value === "warning") {
        // 取消发起
        VE_API.z_farm_work_record.updatePublicStatus({ recordId: queryRecordId.value, isPublic: 0 }).then((res) => {
            if (res.code === 0) {
                getDetail(queryRecordId.value);
            }
        });
    } else if (taskPopupType.value === "warningIgnore") {
        // 确认忽略
        VE_API.z_farm_work_record.ignoreFarmWorkRecord({ farmWorkRecordId: queryRecordId.value }).then((res) => {
            if (res.code === 0) {
                ElMessage.success("操作成功");
                router.back();
            }
        });
    } else {
        if (taskPopupActionType.value === 0) {
            getDetail(queryRecordId.value);
        } else {
            showUpload.value = false;
            sectionId.value = null;
            setTimeout(() => {
                router.replace({
                    path: "/review_work",
                    query: {
                        miniJson: JSON.stringify({ id: queryRecordId.value, goBack: true }),
                    },
                });
            }, 500);
        }
    }
};

const cancelDemand = () => {
    taskPopupType.value = "warning";
    showTaskPopup.value = true;
};

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

const getButtonText = () => {
    return agriculturalRole.value === 1 || (agriculturalRole.value === 2 && detailData.value.executorUserId != userId.value);
};

const offerPopupRef = ref(null);
const isGoBack = ref(false);
const showOfferPopup = (item) => {
    isGoBack.value = true;
    offerPopupRef.value.openPopup(item);
};

const handleExecute = () => {
    const query = {
        askInfo: { title: "农事提醒", content: "是否分享该农事提醒给好友" },
        shareText: '向您分享了一条农事执行提醒，请您尽快执行',
        targetUrl: `completed_work`,
        paramsPage: JSON.stringify({id: detailData.value.id}),
        imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/invite_bg.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

const showCalendar = ref(false);
const maxDate = ref(new Date());
// 最小日期设置为今天，今天可以选择
const minDate = new Date();
const selectExecuteTime = () => {
    maxDate.value = new Date(detailData.value.executeDeadlineDate);
    showCalendar.value = true;
};

const handleRemindExecuteTime = () => {
    const query = {
        askInfo: { title: "农事提醒", content: "是否分享该农事提醒给好友" },
        shareText: '向您分享了一条农事提醒，请您尽快确认执行时间',
        targetUrl: `completed_work`,
        paramsPage: JSON.stringify({id: detailData.value.id}),
        imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/invite_bg.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

const onConfirmExecuteTime = (date) => {
    showCalendar.value = false;
    VE_API.z_farm_work_record
        .updateExpectedExecuteDate({ recordId: queryRecordId.value, expectedExecuteDate: formatDate(date) })
        .then((res) => {
            if (res.code === 0) {
                ElMessage.success("操作成功");
                getDetail(queryRecordId.value);
            }
        });
};

const handleUploadSuccess = () => {
    if (isGoBack.value) {
        isGoBack.value = false;
        router.back();
    } else {
        getDetail(queryRecordId.value);
    }
};

const quotationData = ref({});
const toList = (val) => {
    if (!val) return [];
    return JSON.parse(val);
};

const handleClose = () => {
    if(showBack.value){
        router.replace({
            path: "/task_condition",
        });
    }else{
        router.back();
    }
};

const speciesList = computed(() => toList(quotationData.value.serviceSpecies));
const equipmentList = computed(() => toList(quotationData.value.serviceEquipment));
const agriculturalRole = ref(null);
const userId = ref(null);
const showBack = ref(false);
const queryRecordId = ref(null);
onActivated(async () => {
    //
    const userInfo = JSON.parse(localStorage.getItem("localUserInfo"));
    agriculturalRole.value = userInfo.agriculturalRole;
    userId.value = userInfo.id;
    //
    query.value = useRoute().query?.miniJson ? JSON.parse(useRoute().query?.miniJson) : {};
    let id = null;
    if(query.value?.id){
        id = query.value?.id;
        showBack.value = false;
    }else{
        const data = JSON.parse(query.value?.paramsPage);
        id = data?.id;
        showBack.value = true;
    }
    queryRecordId.value = id;
    if (id) {
        await getDetail(id);

        //查询农场状态信息
        getFarmWorkArrangeDetail(detailData.value.farmWorkArrangeId);
    }
});

const farmStatusText = ref("");
const getFarmWorkArrangeDetail = (id) => {
    VE_API.farm.getFarmWorkArrangeDetail({ id }).then(({ data }) => {
        farmStatusText.value = data.farmStatus;
    });
};

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

    const sum = list.reduce((acc, item) => {
        const price = Number(item?.muPrice || 0);
        const dosage = Number(quotationData.value.executionMethod === 1 ? item?.muUsage2 : item?.muUsage || 0);
        if (!price || !dosage) return acc;
        return acc + price * dosage * area;
    }, 0);
    return Number(sum.toFixed(2));
});

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

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

const settingData = () => {
    return flattenDomains(quotationData.value.prescriptionList);
};
function flattenDomains(data) {
    if (!data || !Array.isArray(data)) return [];
    // 将所有 prescriptionList 中的 pesticideFertilizerList 合并成一个数组
    return data.reduce((acc, item) => {
        const list = item?.pesticideFertilizerList || [];
        return acc.concat(list);
    }, []);
}

const detailData = ref({});

// 计算距离执行时间的天数差
const daysDiff = computed(() => {
    if (!detailData.value?.expectedExecuteDate) {
        return 0;
    }

    const executeDate = new Date(detailData.value.expectedExecuteDate);
    const today = new Date();

    // 将时间设置为 00:00:00，只比较日期
    executeDate.setHours(0, 0, 0, 0);
    today.setHours(0, 0, 0, 0);

    // 计算天数差（毫秒转天数）
    const diffTime = executeDate.getTime() - today.getTime();
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

    return diffDays;
});

const getDetail = async (id) => {
    const { data } = await VE_API.z_farm_work_record.getDetail({ id });
    if (data && data.length > 0) {
        detailData.value = data[0];
        // 报价信息
        handlePriceInfo();
    }
};

const handlePriceInfo = async () => {
    let priceDataObj = {};
    const { data } = await VE_API.z_farm_work_record_cost.getByRecordId({ farmWorkRecordId: detailData.value.id });
    priceDataObj = data;
    // 执行方式为1：无人机，则使用无人机价格，否则使用人工价格
    detailData.value.serviceMuPrice = data?.farmWorkServiceCost;
    if (priceDataObj && Object.keys(priceDataObj).length > 0) {
        // 合并外层字段
        quotationData.value = {
            ...detailData.value,
            ...priceDataObj,
        };

        // 根据 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,
                });
            });

            // 遍历处方列表，赋值品牌和价格，并计算格式化字段供 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 = price * muUsage * area;

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

<style lang="scss" scoped>
.completed-work {
    height: 100vh;
    position: relative;
    overflow: auto;
    font-size: 14px;
    background: #f2f3f5;
    .work-content {
        height: calc(100% - 40px);
        overflow: auto;
        box-sizing: border-box;
        &.hasBottom {
            padding-bottom: 60px;
        }
        .info-wrap {
            margin-bottom: 80px;
        }
        .work-wrap {
            position: relative;
            z-index: 3;
            padding: 0 12px;
            top: -16px;
        }
        .pt-10 {
            padding-top: 10px;
        }
        .fixed-btn-wrap {
            position: fixed;
            z-index: 10;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px 12px 25px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
            &.center {
                justify-content: center;
            }
            .fixed-btn {
                width: 120px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                background: linear-gradient(180deg, #70bffe, #2199f8);
                border-radius: 25px;
                color: #fff;
                font-size: 14px;
                box-sizing: border-box;
                &.orange {
                    color: #ff953d;
                    border: 1px solid #ff953d;
                    background: rgba(255, 149, 61, 0.1);
                }
                &.excute {
                    background: linear-gradient(180deg, #ffd887, #ed9e1e);
                }
                &.second {
                    background: #ffffff;
                    border: 1px solid rgba(153, 153, 153, 0.5);
                    color: #666666;
                }
                &.primary-text {
                    width: 160px;
                    background: rgba(33, 153, 248, 0.1);
                    color: #2199f8;
                    border: 1px solid #2199f8;
                }
                &.width-120 {
                    width: 120px;
                }
            }
        }
        .card-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tag-text {
                color: #2199f8;
                font-size: 12px;
                font-weight: normal;
            }
            .point-wrap {
                display: flex;
                align-items: center;
                color: #393939;
                font-size: 12px;
                font-weight: normal;
                .point {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #393939;
                    margin-right: 4px;
                }
            }
            .type-tag {
                margin-left: 5px;
                font-size: 12px;
                color: #000000;
                padding: 4px 10px;
                background: rgba(119, 119, 119, 0.1);
                border-radius: 20px;
                font-weight: normal;
                height: 26px;
                line-height: 26px;
            }
        }
        .box-wrap {
            background: #fff;
            padding: 10px;
            border-radius: 8px;
        }

        .step-wrap {
            padding: 18px 0;
        }

        .content-status {
            position: relative;
            padding: 26px 12px 20px 12px;
            color: #fff;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &::after {
                content: "";
                z-index: -1;
                position: absolute;
                left: 0;
                top: 0;
                height: 136px;
                background: #2199f8;
                width: 100%;
            }
            .status-l {
                .stauts-text {
                    font-size: 22px;
                    display: flex;
                    align-items: center;
                    .status-icon {
                        width: 24px;
                        height: 24px;
                        background: #ffffff;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                }
                .stauts-sub-text {
                    // color: rgba(255, 255, 255, 0.51);
                    font-size: 14px;
                }
                .time-text {
                    color: #ffff;
                }
            }
            &.warning {
                &::after {
                    background: #ff953d;
                }
                .stauts-sub-text {
                    color: #fff;
                }
            }
            .status-r {
                height: 32px;
                line-height: 32px;
                padding: 0 16px;
                color: #2199f8;
                font-size: 16px;
                background: #fff;
                border-radius: 20px;
            }
        }

        .info-content {
            padding: 10px 0;
            position: relative;
        }
        .info-title-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #000;
            .info-more {
                font-size: 18px;
            }
            .unit-text {
                font-size: 12px;
            }
        }
        .info-content-wrap {
            .price-bottom {
                padding-top: 8px;
                .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: 20px;
                        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;
                    }
                }
            }
        }
        .executor-info {
            margin-top: 14px;
            &.mt-0 {
                margin-top: 0;
            }
            .executor-title {
                font-size: 18px;
                font-weight: bold;
                color: #000;
                margin-bottom: 12px;
            }
            .executor-content {
                .executor-info {
                    display: flex;
                    align-items: flex-start;
                    gap: 12px;
                }
                .executor-avatar {
                    flex-shrink: 0;
                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 8px;
                        object-fit: cover;
                    }
                }
                .executor-details {
                    flex: 1;
                    .org-name {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        margin-bottom: 3px;
                        .name {
                            font-size: 16px;
                            font-weight: bold;
                            color: #000;
                        }
                        .rating {
                            font-size: 16px;
                            color: #ff953d;
                            font-weight: bold;
                        }
                    }
                    .service-info {
                        .service-item {
                            font-size: 12px;
                            color: #b6b6b6;
                            line-height: 1.3;
                            margin-bottom: 2px;
                            span {
                                color: #666666;
                            }
                        }
                    }
                }
            }
            .contact-buttons {
                display: flex;
                justify-content: flex-end;
                gap: 8px;
                margin-top: 16px;
                .contact-btn {
                    width: 88px;
                    height: 32px;
                    border-radius: 20px;
                    color: rgba(0, 0, 0, 0.5);
                    background: #fff;
                    border: 1px solid rgba(0, 0, 0, 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;
                    }
                }

                .view-box {
                    width: 92px;
                    height: 92px;
                    border-radius: 8px;
                    object-fit: cover;
                }
            }
            .list-text {
                text-align: center;
                color: rgba(0, 0, 0, 0.5);
                padding-top: 2px;
            }
        }

        .farm-data {
            margin-top: 10px;
            .data-content {
                margin-top: 8px;
                border-top: 1px solid #f5f5f5;
                padding: 8px 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);
            }
        }
        .form-item + .form-item {
            padding-top: 2px;
        }

        .farm-table {
            margin-top: 10px;
            .table-item {
                padding: 10px 0 12px 0;
            }
        }

        .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 {
                .new-prescription {
                    .new-table {
                        height: 45px;
                        display: flex;
                        align-items: center;
                        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 {
                    .new-table {
                        border-top: 1px solid rgba(0, 0, 0, 0.08);
                    }
                }
            }
        }

        .work-map {
            padding: 10px 0;
            .map-content {
                padding-top: 8px;
                .map-dom {
                    height: 166px;
                    width: 100%;
                    clip-path: inset(0px round 8px);
                }
            }
        }
    }
}

.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: 23px;
            font-weight: 400;
        }
    }
    .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>