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

<template>
    <div class="work-detail">
        <custom-header name="农事详情" v-if="!miniJson?.hideDraw" :showClose="false" isGoBack @goback="handleBack" />

        <div class="work-detail-content">
            <!-- 顶部状态 -->
            <div class="content-status" :class="['status-' + detail?.flowStatus, 'audit-' + getAuditStatusPriority(detail?.executeEvidenceAuditStatus)]">
                <div class="status-l">
                    <div class="status-title">{{ detail?.farmWorkName }}</div>
                    <div class="status-sub" v-if="triggerDateText && (detail?.flowStatus == -1 || detail?.flowStatus == -2)">
                        执行时间已经过去 {{ Math.abs(daysDiff) }} 天了
                    </div>
                    <div class="status-sub" v-if="detail?.flowStatus === 3 && getAuditStatusPriority(detail?.executeEvidenceAuditStatus) !== 2">
                        04/19 执行最佳
                    </div>
                    <div class="status-sub" v-if="!detail?.flowStatus || detail?.flowStatus === 0">
                        预计{{ detail?.executeDate || "--" }}执行，执行时间需巡园校准
                    </div>
                </div>
            </div>

            <div class="work-wrap has-bottom warning-info-show" :class="{ 'warning-info-show': detail?.flowStatus === 1 }">
                <!-- 农事组信息 -->
                <div class="box-wrap group-info group-box" v-if="(detail?.executionLimitDays || detail?.executionLimitDays === 0) && detail?.flowStatus !== 5">
                    <div class="group-name">
                        <!-- 该农事为 <span class="light-text">标准防治溯源农事</span> ，最佳执行时间为 <span class="light-text">{{detail?.executionLimitDays}}天</span>, 
                        请及时完成溯源认证上传 -->
                        农事原因农事原因农事原因农事原因农事原因农事原因农事原因
                    </div>
                </div>

                <!-- 每一段农事 -->
                <!-- <div v-for="(prescription, index) in stageList" :key="index" class="box-wrap stage-card">
                    <div class="work-info">
                        <div class="stage-header">
                            <div class="stage-title">{{ detail.farmWorkName }}</div>
                        </div>

                        <div class="stage-info">
                            <div class="form-item">
                                <div class="item-name">农事目的</div>
                                <div class="item-text">
                                    {{ prescription.purpose || prescription.purposeName || "--" }}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="item-name">农事时间</div>
                                <div class="item-text">
                                    {{ detail.executeDate || "--" }}
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="item-name">执行区域</div>
                                <div class="item-text light-text area-text">
                                    {{ detail?.executionRegion?.regionName }}种植区域
                                    <div class="area-btn" v-if="detail?.executionRegion?.regionRange" @click="handleViewArea">查看区域</div>
                                    <div class="area-btn area-btn-right" @click="toDraw" v-if="!detail?.executionRegion?.regionRange && !miniJson?.hideDraw">建议勾选<el-icon><ArrowRight /></el-icon></div>
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="item-name">注意事项</div>
                                <div class="item-text">
                                    {{ detail.remark || "--" }}
                                </div>
                            </div>
                            <div class="form-item" v-if="hasAnyAvailableExecutionMethod(prescription)">
                                <div class="item-name">药肥处方</div>
                            </div>
                        </div>

                        <div class="stage-tabs" v-if="hasAnyAvailableExecutionMethod(prescription)">
                            <div v-for="tab in getAvailableExecutionTabs(prescription)" :key="tab.value" class="tab-pill"
                                :class="{ active: getStageExecutionMethod(index) === tab.value }"
                                @click="changeExecutionMethod(index, tab.value)">
                                {{ tab.label }}
                            </div>
                        </div>

                        <div class="prescription-wrap"
                            v-if="prescription.pesticideList && prescription.pesticideList.length && hasAnyAvailableExecutionMethod(prescription)">
                            <div class="prescription-table">
                                <div class="table-header">
                                    <div class="col col-type">使用功效</div>
                                    <div class="col col-name">药肥名称</div>
                                    <div class="col col-ratio">药肥配比</div>
                                </div>

                                <div v-for="(item, i) in prescription.pesticideList" :key="i" class="table-row">
                                    <div class="col col-type">
                                        {{ item.typeName || "--" }}
                                    </div>
                                    <div class="col col-name">
                                        {{ item.name || item.pesticideFertilizerName || "--" }}
                                    </div>
                                    <div class="col col-ratio">
                                        {{ getPesticideParam(item, index)?.ratio || "--" }}倍
                                    </div>
                                </div>
                            </div>

                            <div v-if="hasRemark(prescription, index)" class="prescription-remark">
                                <span v-for="(item, idx) in [prescription.pesticideList[0]]" :key="idx">
                                    <template v-if="getParamRemark(item, index)">
                                        {{ getParamRemark(item, index) }}
                                        <br />
                                    </template>
                                </span>
                            </div>
                        </div>
                    </div>


                    <div class="work-info photo-box" v-if="prescription.cropAlbum && prescription.cropAlbum.length">
                        <div class="photo-title">农事凭证</div>
                        <div class="tips-text" v-if="detail?.imageAuditRejectReason">{{ detail?.imageAuditRejectReason }}</div>
                        <div class="photo-sub-title" v-if="info?.appType === 1">来自于 {{ detail?.executorOrganizationName || "--" }}</div>
                        <div class="photo-img-wrap">
                            <photo-provider :photo-closable="true">
                                <photo-consumer v-for="(src, index) in prescription.cropAlbum" intro="农事凭证" :key="index"
                                    :src="base_img_url2 + src.filename">
                                    <div class="photo-img">
                                        <img :src="base_img_url2 + src.filename" />
                                        <div class="fail-icon" v-if="failIndex(index) === 2">
                                            <el-icon size="24" color="#FF953D"><WarningFilled /></el-icon>
                                            <div class="fail-icon-text">审核失败</div>
                                        </div>
                                    </div>
                                </photo-consumer>
                            </photo-provider>
                        </div>
                    </div>
                </div> -->

                
                <div class="box-wrap stage-card">
                    <div class="work-info">
                        <div class="map-box">
                            <div class="map-title">执行区域</div>
                            <div class="map-container" ref="mapContainer"></div>
                        </div>
                        <div class="area-list">
                            <div class="area-item" v-for="item in 2" :key="item">
                                <div class="area-l">
                                    分区名称1：具体时间
                                    <span class="area-tag">未激活</span>
                                </div>
                                <div class="area-r">我已完成</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-wrap stage-card">
                    <div class="work-info">
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>农事目的</div>
                            <div class="info-value">农事目的农事目的农事目的农事目的农事目的农事目的农事目的</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>注意事项</div>
                            <div class="info-value">注意事项注意事项注意事项注意事项注意事项注意事项注意事项</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>药物处方</div>
                            <div class="info-value"><span class="blod-text">机械：</span>药肥处方药肥处方药肥处方药肥处方药肥处方药肥</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>执行方式</div>
                            <div class="info-value"><span class="blod-text">机械：</span>执行方式执行方式执行方式执行方式执行方式执行方式</div>
                        </div>
                    </div>
                </div>

                <div class="warning-info">
                    <div class="warning-l">
                        <div class="warning-title">
                            <el-icon size="16" color="#FF953D"><WarningFilled /></el-icon>
                            存在继发危害需巡园
                        </div>
                        <div class="warning-text">文案文案文案文案文案</div>
                    </div>
                    <div class="warning-r">异常记录</div>
                </div>

                <!-- 底部按钮 -->
                <div class="fixed-btn-wrap center-btn" v-if="info?.appType === 2">
                    <div class="fixed-btn" @click="handleConvert">
                        转发农事
                    </div>
                </div>

                <div class="fixed-btn-wrap execute-action">
                    <div class="action-item second" v-if="!miniJson?.hideDraw" @click="handleConvert">转发给执行人员</div>
                    <!-- <div class="action-item primary" @click="handleExecute">溯源认证</div> -->
                </div>
            </div>
        </div>
        <ExecutePopup ref="executePopupRef" @executeSuccess="getDetail" />

        <upload-tips v-model:show="showUploadTipsPopup" />
    </div>
    <!-- 执行区域地图弹窗 -->
    <popup v-model:show="showMapPopup" closeable class="map-popup">
        <map-info :rangeWkt="detail?.executionRegion?.regionRange" />
    </popup>
</template>

<script setup>
import { ElMessage } from "element-plus";
import wx from "weixin-js-sdk";
import customHeader from "@/components/customHeader.vue";
import { ref, computed, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import { formatDate } from "@/common/commonFun";
import ExecutePopup from "./components/executePopup.vue";
import { base_img_url2 } from "@/api/config";
import UploadTips from "@/components/popup/uploadTips.vue";
import { Popup } from "vant";
import MapInfo from "./components/mapInfo.vue";
import { useRoute } from "vue-router";
import AreaMap from "./components/areaMap.js";

const route = useRoute();
const showUploadTipsPopup = ref(false);

const router = useRouter();
// const info = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
const info = { appType: 1 };

/** 接口根级与 detail 合并后的详情（pesticideList、prescriptionList） */
const detail = ref({
    farmId: null,
    farmWorkLibId: null,
    farmWorkName: "",
    flowStatus: null,
    purpose: "",
    speciesId: null,
    speciesName: "",
    executeDate: null,
    intervelTime: null,
    remark: "",
    pesticideList: [],
    prescriptionList: [],
    confirmPicture: [],
    executeEvidence: [],
    expertName: "",
    expertPrescription: "",
    id: null,
    postId: null,
    post: null,
    expertNameFromFarmBasicInfo: "",
    rangeWkt: null,
});

/** 凭证图片统一为 { filename } */
const normalizeCropAlbum = (album) => {
    if (!album || !Array.isArray(album)) return [];
    return album
        .map((x) => {
            if (!x) return null;
            if (typeof x === "string") return { filename: x };
            if (x.filename) return x;
            return null;
        })
        .filter(Boolean);
};


const maybeShowUploadTips = () => {
    if (detail.value?.flowStatus !== 1) return;
    const shown = localStorage.getItem('upload_tips');
    if (shown === "1") return;

    localStorage.setItem('upload_tips', "1");
    showUploadTipsPopup.value = true;
};

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

const miniJson = ref(null);
onActivated(() => {
    if (route.query?.miniJson) {
        const miniJsonObj = JSON.parse(route.query.miniJson);
        miniJson.value = JSON.parse(miniJsonObj.paramsPage);
    } else {
        miniJson.value = null;
    }
    getDetail();
});

const getDetail = () => {
    if (!miniJson.value) return;
    const { farmWorkLibId, farmId, recordId ,reproductiveId} = miniJson.value;
    VE_API.z_farm_work_record
        .getDetailById({ farmWorkLibId, farmId, farmWorkRecordId: recordId, reproductiveId })
        .then(({ data }) => {
            const inner =
                data?.detail && typeof data.detail === "object"
                    ? { ...data.detail }
                    : {};
            detail.value = {
                ...inner,
                post: data?.post ?? null,
                executionRegion: data?.executionRegion ?? null,
                expertNameFromFarmBasicInfo:
                    data?.expertNameFromFarmBasicInfo ?? "",
                rangeWkt: data?.rangeWkt ?? null,
            };

            // 地图
            areaMap.initMap("POINT(113.1093017627431 22.57454083668)", mapContainer.value);
        });
};


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

    const executeDate = new Date(detail.value.executeDate);
    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;
});

// 执行方式 Tab 配置
const executionTabs = [
    { label: "植保机", value: 1 },
    { label: "人工手持", value: 2 },
    { label: "地面机械", value: 3 }
];
// 每一段农事的当前执行方式（索引 -> 执行方式），默认 1：植保机
const stageExecutionMethods = ref({});
const executePopupRef = ref(null);

const hasTextValue = (val) => {
    if (val === null || val === undefined) return false;
    return String(val).trim() !== "";
};

const hasValidParamForMethod = (item, methodValue) => {
    if (!item?.params || !Array.isArray(item.params)) return false;
    const methodParam = item.params.find(
        (param) => Number(param.executionMethod) === Number(methodValue)
    );
    if (!methodParam) return false;
    return hasTextValue(methodParam.ratio) || hasTextValue(methodParam.remark);
};

const getAvailableExecutionTabs = (prescription) => {
    const list = prescription?.pesticideList;
    if (!Array.isArray(list) || !list.length) return [];
    return executionTabs.filter((tab) =>
        list.some((item) => hasValidParamForMethod(item, tab.value))
    );
};

const hasAnyAvailableExecutionMethod = (prescription) => {
    return getAvailableExecutionTabs(prescription).length > 0;
};


const triggerDateText = computed(() => {
    if (!detail.value.executeDate) return "";
    const d = formatDate(detail.value.executeDate);
    return d.replace(/-/g, ".");
});

/**
 * 展示用「分段」列表：detail.pesticideList 或 prescriptionList 推导
 */
const stageList = computed(() => {
    const d = detail.value;
    if (!d) return [];

    // if (Array.isArray(d.pesticideList) && d.pesticideList.length) {
        return [
            {
                ...d,
                pesticideList: d.pesticideList,
                cropAlbum: normalizeCropAlbum(
                    d.confirmPicture?.length
                        ? d.confirmPicture
                        : d.executeEvidence
                ),
            },
        ];
    // }

    // return [];
});


const hasRemark = (prescription, stageIndex) => {
    if (!prescription?.pesticideList || !Array.isArray(prescription.pesticideList)) return false;
    const currentMethod = getStageExecutionMethod(stageIndex);
    return prescription.pesticideList.some((item) => {
        if (!item.params || !Array.isArray(item.params)) return false;
        const p = item.params.find((param) => param.executionMethod === currentMethod);
        return !!(p && p.remark);
    });
};

const handleTagType = (tagType) => {
    if (tagType == 0) return "待触发";
    if (tagType == -1) return "已过期";
    if (tagType == -2) return "已过期";
    if (tagType == 3) {
        const status = getAuditStatusPriority(detail.value?.executeEvidenceAuditStatus);
        if (status === 2) {
            return "审核失败";
        }
        return "待认证"
    }
    if (tagType == 5) {
        const status = getAuditStatusPriority(detail.value?.executeEvidenceAuditStatus);
        if (status === 2) {
            return "审核失败";
        }
        if (status === 0) {
            return "审核中";
        }
        return "已认证";
    }
    return "待触发"
}

// 审核状态优先级：2 > 0 > 1
const getAuditStatusPriority = (auditStatusList) => {
    if (!Array.isArray(auditStatusList) || !auditStatusList.length) return 1;
    const normalized = auditStatusList.map((x) => Number(x)).filter((x) => [0, 1, 2].includes(x));
    if (!normalized.length) return 1;
    if (normalized.includes(0)) return 0;
    if (normalized.includes(2)) return 2;
    return 1;
};

// 审核是否失败
const failIndex = (index) => {
    return detail.value?.executeEvidenceAuditStatus[index]
}

const handleExecute = () => {
    // const today = new Date();
    // const executeDate = new Date(detail.value.executeDate);
    // if (executeDate.getTime() > today.getTime()) {
    //     ElMessage.warning('未到农事执行时间，无法溯源认证');
    //     return;
    // }
    const evidenceList = normalizeCropAlbum(
        detail.value?.confirmPicture?.length
            ? detail.value.confirmPicture
            : detail.value.executeEvidence
    ).map((item) => item.filename);
    const auditStatusList = Array.isArray(detail.value?.executeEvidenceAuditStatus)
        ? detail.value.executeEvidenceAuditStatus
        : [];

    let imgs = []
    evidenceList.forEach((item, index) => {
        imgs.push({
            url: base_img_url2 + item,
            filePath: item,
            status: auditStatusList[index] === 2 ? 'failed' : 'success',
            message: auditStatusList[index] === 2 ? '审核失败' : '审核成功',
        });
    });
    console.log("evideimgsnceList", imgs);
    const isEdit = evidenceList?.length > 0 ? true : false;
    executePopupRef.value.openPopup(miniJson.value.recordId, {
        evidenceList: imgs,
        isEdit: isEdit,
        executeDate: detail.value.executeDate,
        executorOrganizationName: detail.value.executorOrganizationName,
    });
};


const showMapPopup = ref(false);

const handleViewArea = () => {
    showMapPopup.value = true;
}

const toDraw = () => {
    router.push({
        path: "/draw_area",
        query: {
            subjectId: localStorage.getItem('selectedFarmId'),
            varietyId: miniJson.value.typeId,
        },
    });
}

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

const handleConvert = () => {
    const query = {
        askInfo: { title: "农事执行", content: "是否分享该农事给好友" },
        shareText: `${detail.value.farmWorkName}农事 已触发，请在最佳农时内执行`,
        targetUrl: `work_detail`,
        paramsPage: JSON.stringify({...miniJson.value, hideDraw: true}),
        imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/work_img.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

// 获取当前段的执行方式
const getStageExecutionMethod = (stageIndex) => {
    const stage = stageList.value?.[stageIndex];
    const availableTabs = getAvailableExecutionTabs(stage);
    if (!availableTabs.length) return 1;

    const val = stageExecutionMethods.value[stageIndex];
    const isValidSelected = availableTabs.some(
        (tab) => Number(tab.value) === Number(val)
    );
    return isValidSelected ? val : availableTabs[0].value;
};

// 根据当前执行方式，获取对应的参数（配比、单亩用量、备注）
const getPesticideParam = (item, stageIndex) => {
    if (!item?.params || !Array.isArray(item.params)) return null;
    const currentMethod = getStageExecutionMethod(stageIndex);
    return (
        item.params.find((param) => param.executionMethod === currentMethod) || null
    );
};

const getParamRemark = (item, stageIndex) => {
    const param = getPesticideParam(item, stageIndex);
    return param?.remark || item.remark || "";
};

const changeExecutionMethod = (stageIndex, value) => {
    const stage = stageList.value?.[stageIndex];
    const availableTabs = getAvailableExecutionTabs(stage);
    const isAllowed = availableTabs.some(
        (tab) => Number(tab.value) === Number(value)
    );
    if (!isAllowed) return;

    stageExecutionMethods.value = {
        ...stageExecutionMethods.value,
        [stageIndex]: value
    };
};

// 地图

const mapContainer = ref(null);
const areaMap = new AreaMap();
</script>

<style scoped lang="scss">
.work-detail {
    height: 100vh;
    background: #f2f3f5;
    display: flex;
    flex-direction: column;

    .work-detail-content {
        flex: 1;
        overflow: auto;
    }
}

.content-status {
    position: relative;
    padding: 16px 12px 0 12px;
    color: #fff;
    z-index: 1;
    height: 92px;
    box-sizing: border-box;

    &::after {
        content: "";
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        height: 140px;
        background: #C7C7C7;
        // background: #FF953D;
        width: 100%;
    }

    &.status-0 {
        &::after {
            background: #C7C7C7;
        }
    }

    &.status-5 {
        padding-top: 30px;

        &::after {
            background: #2199F8;
        }
    }

    &.status-3, &.audit-2, &.audit-0 {
        &::after {
            background: #FF953D;
        }
    }

    &.audit-2 {
        padding-top: 30px;
    }

    &.status--1 {
        &::after {
            background: #FF4F4F;
        }
    }
    &.status--2 {
        &::after {
            background: #C7C7C7;
        }
    }

    .status-l {
        .status-title {
            font-size: 22px;
        }

        .status-sub {
            margin-top: 10px;
            font-size: 12px;
            padding: 0 8px;
            background: #fff;
            color: rgba(62, 61, 61, 0.8);
            width: fit-content;
            height: 26px;
            line-height: 26px;
            border-radius: 2px;
        }
    }
}

.work-wrap {
    position: relative;
    top: 0;
    padding: 0 12px 12px;
    z-index: 2;
    &.has-bottom {
        margin-bottom: 88px;
    }
    &.warning-info-show {
        margin-bottom: 168px;
    }
}

.box-wrap {

    // background: #ffffff;
    // border-radius: 8px;
    // padding: 14px 10px 10px 10px;
    // box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
    .work-info {
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 10px;
        box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
    }

    .photo-box {
        margin-top: 10px;
        padding: 11px 10px;
        font-size: 14px;

        .tips-text {
            color: #FA7406;
            padding: 5px 10px;
            border: 1px solid #FF953D;
            border-radius: 5px;
            margin-bottom: 10px;
            background: #fff;
        }

        .photo-title {
            color: #000;
            padding-bottom: 9px;
        }

        .photo-sub-title {
            padding-bottom: 9px;
            color: #767676;
        }
    }
}


.group-info {
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 8px;
    padding: 14px 10px 10px 10px;
    box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);

    &.group-box {
        padding: 10px;

        .group-name {
            font-size: 14px;
            color: #767676;

            .group-name-text {
                color: #000;
            }
        }
    }

    .group-name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.2);

        .group-name-text {
            color: #767676;
        }
    }

    .group-sub {
        margin-top: 6px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 1.5;
    }
}

.stage-card+.stage-card {
    margin-top: 10px;
}

.info-item + .info-item {
    margin-top: 10px;
}

.info-item {
    .info-title {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #2199F8;
        font-weight: 500;
        .title-block {
            width: 6px;
            height: 6px;
            background: #2199F8;
            border-radius: 1px;
            transform: rotate(45deg);
        }
    }

    .info-value {
        padding-top: 4px;
        color: #ACACAC;
        line-height: 21px;
    }

    .blod-text {
        font-weight: 500;
    }
}
.map-box {
    position: relative;
    .map-title {
        z-index: 12;
        position: absolute;
        border-radius: 5px 0 0 5px;
        top: 0;
        left: 0;
        height: 25px;
        padding: 0 18px;
        line-height: 25px;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
    }
    
    .map-container {
        height: 140px;
        width: 100%;
        clip-path: inset(0px round 5px);
    }
}


.area-list {
    margin-top: 10px;
    .area-item + .area-item {
        margin-top: 6px;
    }
    .area-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        .area-l {
            color: #000000;
            font-weight: 500;
            .area-tag {
                background: rgba(98, 98, 98, 0.1);
                color: #626262;
                height: 22px;
                line-height: 22px;
                padding: 0 5px;
                border-radius: 2px;
                font-size: 12px;
                margin-left: 5px;
                display: inline-block;
            }
        }
        .area-r {
            background: #2199F8;
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            height: 28px;
            line-height: 28px;
            padding: 0 10px;
            border-radius: 20px;
        }
    }
}

.stage-card {

    .stage-header {
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 5px;

        .stage-title {
            font-size: 16px;
            color: #000;
        }

        .title-tag {
            width: fit-content;
            font-size: 12px;
            height: 26px;
            line-height: 26px;
            color: #2199F8;
            background: rgba(33, 153, 248, 0.1);
            border-radius: 20px;
            padding: 0 8px;
        }

        .tag-0 {
            color: #FF953D;
            background: rgba(255, 149, 61, 0.1);
        }
    }

    .stage-info {
        padding: 8px 0 2px;
        border-top: 1px solid #f5f5f5;
    }
}

.form-item {
    display: flex;
    font-size: 14px;
    color: #767676;
    margin-top: 4px;

    .area-btn {
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0 10px;
        color: #767676;
    }

    .area-btn-right {
        padding-right: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .item-name {
        padding-right: 26px;
        color: rgba(0, 0, 0, 0.2);
    }

    .item-text {
        flex: 1;
        line-height: 21px;

        &.light-text {
            color: #2199F8;
        }
    }
    .area-text {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
}

.light-text {
    color: #2199F8;
}

.stage-tabs {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;

    .tab-pill {
        padding: 0 8px;
        font-size: 14px;
        text-align: center;
        border-radius: 2px;
        height: 28px;
        line-height: 28px;
        color: #767676;
        background: rgba(171, 171, 171, 0.1);

        &.active {
            background: rgba(33, 153, 248, 0.1);
            color: #2199F8;
        }
    }
}

.prescription-wrap {
    margin-top: 10px;
    overflow: hidden;

    .prescription-title {
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 500;
        border-bottom: 1px solid rgba(225, 225, 225, 0.6);
    }
}

.prescription-table {
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid rgba(225, 225, 225, 0.6);

    .table-header {
        display: flex;
        background: rgba(171, 171, 171, 0.1);
        padding: 9px 6px;
        color: #767676;
    }

    .table-row {
        display: flex;
        padding: 12px 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: rgba(0, 0, 0, 0.76);

        &:last-child {
            border-bottom: none;
        }
    }

    .col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2px;
    }

    .col-type {
        width: 56px;
    }

    .col-name {
        flex: 1;
    }

    .col-ratio {
        width: 64px;
    }

    .col-dose {
        width: 64px;
    }
}

.prescription-remark {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #767676;
    background: rgba(171, 171, 171, 0.1);
    line-height: 21px;
}


.photo-img-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    ::v-deep {
        .PhotoConsumer {
            width: 31%;
            height: 92px;
        }
    }

    .photo-img {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        border: 2px solid transparent;
        border-radius: 8px;
        overflow: hidden;

        .fail-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 4px;
            .fail-icon-text {
                color: #FF943D;
                font-size: 12px;
            }
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: cover;
        }
    }
}

.execute-action {
    display: flex;
    align-items: center;
    justify-content: center;
    // justify-content: space-between;
    gap: 16px;

    .action-item {
        padding: 0 26px;
        height: 40px;
        line-height: 40px;
        border-radius: 26px;
        box-sizing: border-box;
        font-size: 14px;

        &.second {
            background: #ffffff;
            border: 0.5px solid rgba(153, 153, 153, 0.5);
            color: #999999;
        }

        &.primary {
            background: linear-gradient(180deg, #8ACBFF 0%, #2199F8 100%);
            color: #ffffff;
        }
    }
    &.no-share {
        justify-content: center;
    }
}

.warning-info {
    position: fixed;
    bottom: 100px;
    left: 10px;
    width: calc(100% - 20px);
    background: linear-gradient(180deg, #FFDFC5 -13%, #FFFFFF 39%);
    border-radius: 8px;
    padding: 14px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 4px 0px #0000001A;
    .warning-l {
        .warning-title {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 16px;
            color: #FF953D;
        }
        .warning-text {
            color: rgba(0, 0, 0, 0.4);
            font-size: 12px;
            // margin-top: 4px;
        }
    }

    .warning-r {
        background: #FF953D;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
        padding: 0 7px;
        height: 32px;
        line-height: 32px;
        border-radius: 20px;
    }
}

.fixed-btn-wrap {
    display: flex;
    justify-content: center;
    // justify-content: space-between;

    &.center-btn {
        justify-content: center;
    }

    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 12px 36px 12px;
    box-sizing: border-box;
    // box-shadow: 0 -2px 8px rgba(15, 35, 52, 0.06);
    box-shadow: 2px 2px 4.5px 0px #00000066;

    .fixed-btn {
        min-width: 110px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        background: linear-gradient(180deg, #70bffe, #2199f8);
        color: #ffffff;
        font-size: 14px;
    }
}

.map-popup {
    width: 92%;
    // max-width: 420px;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}
</style>