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

<template>
    <div class="completed-work">
        <custom-header name="农事详情" :showClose="false" isGoBack @goback="handleClose"></custom-header>
        <div class="work-content">
            <div
                class="content-status"
            >
                <div class="status-l">
                    <div class="stauts-text">待触发</div>
                    <div class="stauts-sub-text" v-if="arrangeDetail?.interactionTime">
                        <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">
                <div class="box-wrap executor-info">
                    <!-- <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">{{ detailData?.agriculturalName || "--" }}</span>
                                    <span class="rating">{{
                                        detailData.score ? detailData.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" v-if="detailData?.prescription?.pesticideFertilizerList?.length">
                                <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="detailData?.prescription" :area="detailData?.farm?.mianji">
                                    <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 class="info-l">
                                                    执行方式<span class="main-text">{{
                                                        detailData?.executionMethodName || "人工"
                                                    }}</span>
                                                </div>
                                                <div class="info-c">
                                                    亩单价<span class="main-text">{{
                                                        detailData?.serviceMuPrice
                                                            ? detailData?.serviceMuPrice + "元/亩"
                                                            : "--"
                                                    }}</span>
                                                </div>
                                                <div class="info-r">
                                                    亩数<span class="main-text">{{
                                                        detailData?.farm?.mianji
                                                            ? formatArea(detailData?.farm?.mianji) + "亩"
                                                            : "--"
                                                    }}</span>
                                                </div> -->
                                            </div>
                                            <div class="price-bottom-action">
                                                <div class="price-total">
                                                    报价合计：<span class="main-val">
                                                        {{ totalCost ? formatArea(totalCost) : "--" }}</span
                                                    >元
                                                </div>
                                                <div class="show-price-btn" v-if="curRole == 2" @click="showPriceSheetPopup">生成报价单</div>
                                            </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" :class="{ 'info-wrap': curRole == 2 }">

                <div class="box-wrap farm-data">
                    <div class="card-title">
                        <div>{{ detailData?.name }}<span class="type-tag">标准农事</span></div>
                        <!-- <div class="point-wrap">
                            <div class="point"></div>
                            <span>2区</span>
                        </div> -->
                        <div class="tag-text" v-if="arrangeDetail?.isFollow !== undefined">{{ statusMap[arrangeDetail?.isFollow] }}</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?.farm?.mianji ? formatArea(detailData?.farm?.mianji) + "亩" : "--" }}
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="item-name">服务区域</div>
                            <div class="item-text">{{ detailData?.farm?.district }}</div>
                        </div>
                        <!-- <div class="form-item">
                            <div class="item-name">触发条件</div>
                            <div class="item-text">{{ detailData?.condition }}</div>
                        </div> -->
                        <div class="form-item">
                            <div class="item-name">执行日期</div>
                            <div class="item-text">{{ detailData?.executeDate || detailData?.expectedExecuteDate || detailData?.executeDate }}</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?.prescription?.usageMode || '其他' }}</div>
                        </div>
                        <div class="form-item">
                            <div class="item-name">执行方式</div>
                            <div class="item-text">{{ detailData?.prescription?.pesticideFertilizerList[0]?.executeStyle === 1 ? '无人机' : detailData?.prescription?.pesticideFertilizerList[0]?.executeStyle === 3 ? '无人机+人工' : '人工' }}</div>
                        </div>
                    </div>
                    <div class="new-wrap" v-if="detailData?.prescription?.pesticideFertilizerList?.length">
                        <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"
                        >
                            <div
                                class="new-prescription"
                                v-for="(subP, subI) in detailData?.prescription?.pesticideFertilizerList"
                                :key="subI"
                            >
                                <div class="new-table">
                                    <div class="line-l">
                                        <div class="line-1 title-1">{{ subP.typeName || '--' }}</div>
                                        <div class="line-2">{{ subP.name }}</div>
                                    </div>
                                    <div class="line-r">
                                        <div class="line-3">
                                            <div class="sub-line title-4">{{ subP.ratio }}倍</div>
                                            <div class="sub-line title-5">{{ subP.dosage }}{{ 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" v-if="curRole == 2">
                <div class="fixed-btn second" @click="editPrice">编辑报价</div>
                <div class="fixed-btn" @click="handleTimelineAction">转入农事任务</div>
            </div>
        </div>
    </div>
    <!-- 报价弹窗 -->
    <!-- <offer-popup :showPopup="showPopup" :executionData="executionData"></offer-popup> -->
    <!-- 服务报价单 -->
    <price-sheet-popup ref="priceSheetPopupRef"></price-sheet-popup>
 
    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref, computed, onActivated, onDeactivated, onMounted } 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 { 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

// 0：执行， 1： 复核
const status = ref(0);
const uploadExecuteRef = ref(null);

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: query.value.id, 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: query.value.id, goBack: true }),
                    },
                });
            }, 500)
        }
    });
};


const priceSheetPopupRef = ref(null);
const showPriceSheetPopup = () => {
    priceSheetPopupRef.value.handleShowPopup({ id: detailData.value.id, farmId: query.value.farmId });
};

const userInfoStr = localStorage.getItem("localUserInfo");
const userInfo = userInfoStr ? JSON.parse(userInfoStr) : {};

const executorList = ref([])

// 检查是否有"转入农事"权限
const hasPlanPermission = computed(() => {
    try {
        const userInfoStr = localStorage.getItem("localUserInfo");
        if (!userInfoStr) return false;
        const userInfo = JSON.parse(userInfoStr);
        const permissions = userInfo.agriculturalPermissions || [];
        return permissions.includes("转入农事");
    } catch (error) {
        console.error("解析用户信息失败:", error);
        return false;
    }
});

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

// 查询当前农资店的成员列表（只保留有"任务接单"权限的成员）
const getManagerList = async () => {
    const { data } = await VE_API.mine.listManagerList({ onlyExecutor: true });
    if (data && data.length > 0) {
        // 过滤 permissionList 中包含"任务接单"的成员，并过滤掉超管（role为1）
        executorList.value = data.filter((item) => item.role !== 1);
    }
};

const activeUploadPopupRef = ref(null);
const handleTimelineAction = (item) => {
    if (hasPlanPermission.value) {
        activeUploadPopupRef.value.showPopup({
            gardenIdVal: query.value.farmId,
            needExecutorVal: true,
            problemTitleVal: "请选择 " + detailData.value.name + " 执行截止时间",
            imgDescVal: "请上传凭证(转入农事任务凭证）",
            arrangeIdVal: query.value.arrangeId,
            executorListVal: executorList.value,
            farmWorkIdVal: query.value.id,
            schemeIdVal: detailData.value.schemeId,
        });
    } else {
        ElMessage.warning("您暂无权限操作");
    }
};

const editPrice = () => {
    if (!hasPlanPermission.value) {
        ElMessage.warning("您暂无权限操作");
        return;
    }
    router.push({
        path: "/modify",
        query: {
            isEdit: true,
            onlyPrice: true,
            farmId: query.value.farmId,
            arrangeId: query.value.arrangeId,
            farmWorkId: query.value.id,
        },
    });
};

const handleUploadSuccess = () => {
    router.back();
};
// 地图
// const areaRef = ref(null);
// let newFarmMap = new NewFarmMap();
const quotationData = ref({});
const parmasPage = ref({});
const toList = (val) => {
    if (!val) return [];
    return JSON.parse(val);
};

const speciesList = computed(() => toList(detailData.value?.agricultural?.serviceSpecies));
const equipmentList = computed(() => toList(detailData.value?.agricultural?.serviceEquipment));
onActivated(async () => {
    query.value = useRoute().query?.miniJson ? JSON.parse(useRoute().query?.miniJson) : {};
    if (query.value?.paramsPage) {
        const data = JSON.parse(query.value.paramsPage);
        query.value.id = data.id;
        query.value.farmId = data.farmId;
        query.value.arrangeId = data.arrangeId;
        query.value.goBack = true;
    }
    const id = query.value?.id;
    if (id) {
        await getDetail();
    }
});

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

const detailData = ref({});

// 计算距离执行时间的天数差
const daysDiff = computed(() => {
    if (!arrangeDetail.value?.interactionTime) {
        return 0;
    }
    
    const executeDate = new Date(arrangeDetail.value.interactionTime);
    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 pesticideCostTotal = computed(() => {
    const list = detailData.value?.prescription?.pesticideFertilizerList || [];
    const area = Number(detailData.value?.farm?.mianji || 0);
    if (!list.length || !area) return 0;

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

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


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

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


const getDetail = async () => {
    const { data } = await VE_API.farm.getFarmWorkLib({ id: query.value.id, farmId: query.value.farmId, agriculturalId: userInfo?.agriculturalId });
    if (data) {
        detailData.value = data;
        const pesticideFertilizerCodes = data?.prescription?.pesticideFertilizerList?.map(item => item.code);
        getPriceList(data.schemeId, pesticideFertilizerCodes);
        getArrangeDetail(query.value.arrangeId);
    }
};
const statusMap = ref({
    0: "取消关注",
    1: "特别关注",
    2: "托管农事",
});

const arrangeDetail = ref({});
const getArrangeDetail = async (id) => {
    const { data } = await VE_API.container_farm_work_arrange.getArrangeDetail({ id });
    if (data) {
        arrangeDetail.value = data;
    }
};


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

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

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

</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;
                &.expert {
                    width: 180px;
                }
                &.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;
                }
            }
        }
        .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-bottom-action {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 8px;
                    .show-price-btn {
                        flex: none;
                        width: 96px;
                        height: 40px;
                        line-height: 38px;
                        line-height: 38px;
                        border-radius: 4px;
                        background: #2199f8;
                        color: #fff;
                        font-size: 14px;
                        text-align: center;
                    }
                }
                .price-total {
                    flex: 1;
                    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: 2px 6px;
                font-size: 12px;
                .table-name {
                    width: 24px;
                    font-size: 12px;
                    margin: 0 auto;
                }
            }

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