feiniao-farm-h5/src/views/old_mini/task_condition/components/interact.vue

<template>
    <div class="task-page" :style="{ height: `calc(100vh - ${tabBarHeight}px - 50px)` }">
        <div class="task-top">
            <div class="map-container" ref="mapContainer"></div>
        </div>
        <div class="task-list">
            <!-- <div class="list-filter">
                <div class="filter-item" :class="{ active: activeIndex === 0 }" @click="handleActiveFilter(0)">
                    待确认({{ taskCounts[0] || 0 }})
                </div>
                <div class="filter-item" :class="{ active: activeIndex === 2 }" @click="handleActiveFilter(2)">
                    已确认({{ taskCounts[2] || 0 }})
                </div>
                <div class="filter-item" :class="{ active: activeIndex === 3 }" @click="handleActiveFilter(3)">
                    待提醒({{ taskCounts[3] || 0 }})
                </div>
            </div> -->
            <div class="select-group">
                <el-select
                    class="select-item"
                    v-model="selectParma.farmWorkTypeId"
                    placeholder="用户类型"
                    @change="getSimpleList"
                >
                    <el-option v-for="item in farmWorkTypeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select
                    class="select-item"
                    v-model="selectParma.districtCode"
                    placeholder="切换作物"
                    @change="getSimpleList"
                >
                    <el-option v-for="item in districtList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
            </div>
            <!-- <div class="task-content-loading" v-if="loading && noData" v-loading="loading">
            </div> -->
            <div class="task-content" v-loading="loading">
                <div class="task-item" v-for="(item, index) in taskList" :key="index">
                    <div class="img-text-wrap" @click.stop="toDetail(item)">
                        <div class="left-wrap">
                            <div class="left-img">
                                <img src="@/assets/img/home/farm.png" alt="" />
                            </div>
                            <div class="right-text">
                                <div class="farm-info">
                                    {{ item?.farmName }}
                                    <div class="info-tag-wrap">
                                        <div class="tag-item primary">
                                            {{ item?.typeName }}
                                        </div>
                                        <div class="tag-item second">托管客户</div>
                                    </div>
                                </div>
                                <div class="farm-addr">{{ item?.address }}</div>
                            </div>
                        </div>
                        <div class="right-wrap" @click.stop="handleRemindCustomer(item)">提醒客户</div>
                    </div>
                    <div class="item-bottom">
                        <div class="bottom-tag">
                            <div class="tag-card active">
                                <div class="card-content">
                                    <div class="card-main-text">花芽分化</div>
                                    <div class="card-sub-text">
                                        当前物候期
                                        <span class="card-icon" @click="handleSelectCurrentPhenology(item)">
                                            <el-icon><Edit /></el-icon>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="tag-card">
                                <div class="card-content">
                                    <div class="card-main-text">蒂蛀虫</div>
                                    <div class="card-sub-text">预计风险</div>
                                </div>
                            </div>
                            <div class="tag-card">
                                <div class="card-content">
                                    <div class="card-main-text">5天</div>
                                    <div class="card-sub-text">预计下次物候</div>
                                </div>
                            </div>
                        </div>

                        <div class="timeline">
                            <div class="timeline-item" v-for="item in timelineList" :key="item.id">
                                <div class="timeline-left">
                                    <div class="dot"></div>
                                    <div class="line"></div>
                                </div>
                                <div class="timeline-right">
                                    <div class="date">预计{{ item.date }}天后触发<span class="work-name">{{ item.workName }}</span></div>
                                    <div class="text">
                                        预计报价<span class="price">{{ item.price }}元</span>
                                        <span class="action-detail">查看报价单</span>
                                    </div>
                                </div>
                                <div class="timeline-action" @click="handleTimelineAction(item)">转入农事任务</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="empty-data" v-if="noData">暂无数据</div>
            </div>
        </div>
    </div>
    <upload-execute ref="uploadExecuteRef" :onlyShare="onlyShare" @uploadSuccess="handleUploadSuccess" />

    <popup v-model:show="showTaskPopup" round class="task-tips-popup">
        <template v-if="taskPopupType === 'warning'">
            <img class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
            <div class="create-farm-text">
                <div>
                    您确认忽略 <span class="main-text">{{ currentTask?.farmName }}</span> 的
                    <span class="main-text">{{ currentTask?.farmWorkName }}</span> 农事吗
                </div>
            </div>
        </template>
        <template v-else>
            <img class="farm-check-icon" src="@/assets/img/home/right.png" alt="" />
            <div class="create-farm-text success-text">农事已下发成功</div>
        </template>
        <div class="create-farm-btn" @click="handlePopupBtn">
            {{ taskPopupType === "warning" ? "确认忽略" : "我知道了" }}
        </div>
    </popup>
    <!-- 服务报价单 -->
    <price-sheet-popup :key="activeIndex" ref="priceSheetPopupRef"></price-sheet-popup>
    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { Popup } from "vant";
import IndexMap from "../../farm_manage/map/index";
import { useRouter } from "vue-router";
import uploadExecute from "./uploadExecute.vue";
import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
import { ElMessage } from "element-plus";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";

const store = useStore();
const router = useRouter();
const indexMap = new IndexMap();
const mapContainer = ref(null);
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
const uploadExecuteRef = ref(null);

const selectParma = ref({
    farmWorkTypeId: null,
    districtCode: null,
});

// 任务列表数据（用于显示，可能被筛选）
const taskList = ref([]);
// 各状态任务数量
const taskCounts = ref([0, 0, 0]);
// 当前选中的筛选索引
const activeIndex = ref(2);
const noData = ref(false);
const loading = ref(false);

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

// 根据 activeIndex 计算 startFlowStatus
const getStartFlowStatus = (index) => {
    const statusMap = {
        0: 0, // 待确认
        1: "1,2,3", // 待完成
        2: 4, // 待完成
        3: 5, // 已完成
    };
    return statusMap[index] ?? 0;
};

const timelineList = ref([
    {
        date: "3",
        workName: "梢期杀虫",
        price: "1258"
    },
    {
        date: "5",
        workName: "梢期营养",
        price: "1758"
    },
])

// 获取单个状态的任务数量
function getTaskCount(flowStatus, index) {
    const location = store.state.home.miniUserLocationPoint;
    return VE_API.z_farm_work_record
        .getSimpleList({ role: 2, location, flowStatus })
        .then(({ data }) => {
            data = [
                ...data,
                {
                    address: "深圳世界之窗",
                    executeDate: "2025-12-29",
                    executeEvidence: "",
                    farmArea: "40.100412863459745",
                    farmId: 93651,
                    farmMiniUserId: 91344,
                    farmMiniUserName: "舒浩农资",
                    farmName: "世界之窗荔枝农场",
                    farmWorkArrangeId: null,
                    farmWorkLibId: "756894717878210560",
                    farmWorkName: "二梢营养",
                    id: "276563",
                    isFollow: null,
                    isIgnored: 0,
                    isPublic: 0,
                    orderId: "778920749103583232",
                    point: "POINT(113.96804666992188 22.537601205078126)",
                    quoteCount: "0",
                    typeId: "2",
                    typeName: "糯米糍",
                },
                {
                    address: "汕尾市海丰县赤坑镇S241妙荔现代农业园",
                    executeDate: "2025-12-27",
                    executeEvidence: "",
                    farmArea: "",
                    farmId: 43318,
                    farmMiniUserId: 81818,
                    farmMiniUserName: "",
                    farmName: "汕尾妙荔果园",
                    farmWorkArrangeId: null,
                    farmWorkLibId: "708734452137725956",
                    farmWorkName: "杀梢",
                    id: "277160",
                    isFollow: null,
                    isIgnored: 0,
                    isPublic: 0,
                    orderId: "781556915820826624",
                    point: "POINT(115.455766 22.883073)",
                    quoteCount: "0",
                    typeId: "4",
                    typeName: "仙进奉",
                },
            ];
            if (Array.isArray(data)) {
                taskCounts.value[index] = data.length;

                if (index === 2) {
                    indexMap.initData(data);
                }
            } else if (data?.total !== undefined) {
                taskCounts.value[index] = data.total;
            } else {
                taskCounts.value[index] = 0;
            }
        })
        .catch((error) => {
            console.error(`获取状态${index}任务数量失败:`, error);
            taskCounts.value[index] = 0;
        });
}

const taskItemRefs = ref([]);
const setTaskItemRef = (el, index) => {
    if (el) {
        taskItemRefs.value[index] = el;
    }
};

const handleUploadSuccess = async () => {
    // 先保存当前需要更新的 item id
    const currentItemIds = taskList.value.map((item) => item.id || item.workRecordId);

    // 刷新列表
    await getSimpleList();

    // 等待 DOM 更新完成，refs 被重新收集
    await nextTick();

    // 更新所有task-item的triggerImg
    taskItemRefs.value.forEach((ref) => {
        if (ref && ref.updateTriggerImg) {
            ref.updateTriggerImg();
        }
    });
};

const cityCode = ref("");
//根据城市的坐标返回区县列表
const districtList = ref([]);
function getDistrictListByCity() {
    VE_API.z_farm_work_record.getDistrictListByCity({ point: mapPoint.value }).then(({ data }) => {
        districtList.value = data || [];
        // cityCode.value = data[0].code.slice(0, -2);
        cityCode.value = "";
        districtList.value.unshift({ code: cityCode.value, name: "全部" });
        selectParma.value.districtCode = cityCode.value;
        getSimpleList();
    });
}

//农事类型列表
const farmWorkTypeList = ref([]);
function getFarmWorkTypeList() {
    VE_API.z_farm_work_record.getFarmWorkTypeList().then(({ data }) => {
        farmWorkTypeList.value = data;
        farmWorkTypeList.value.unshift({ id: 0, name: "全部" });
    });
}

// 初始化时获取所有状态的任务数量
function initTaskCounts() {
    const location = store.state.home.miniUserLocationPoint;
    // 并行请求三个状态的数量
    Promise.all([
        getTaskCount(0, 0), // 待确认
        getTaskCount("1,2,3", 1), // 待确认
        getTaskCount(4, 2), // 待完成
        getTaskCount(5, 3), // 已完成
    ]);
}
const mapPoint = ref(null);

onMounted(() => {
    mapPoint.value = store.state.home.miniUserLocationPoint;

    // 初始化时获取所有状态的数量
    initTaskCounts();
    // 加载当前选中状态的数据列表
    getSimpleList();
    getDistrictListByCity();
    getFarmWorkTypeList();
    nextTick(() => {
        indexMap.initMap(mapPoint.value, mapContainer.value, true);
    });
});

// 监听 activeIndex 变化，重新加载数据
watch(activeIndex, () => {
    getSimpleList();
});

function getSimpleList() {
    loading.value = true;
    noData.value = false;
    // 清空refs数组，避免索引错乱
    taskItemRefs.value = [];
    const startFlowStatus = getStartFlowStatus(activeIndex.value);
    const params = {
        ...selectParma.value,
        role: 2,
        location: mapPoint.value,
        flowStatus: startFlowStatus,
        farmWorkTypeId: selectParma.value.farmWorkTypeId || null,
    };

    return VE_API.z_farm_work_record
        .getSimpleList(params)
        .then(({ data }) => {
            loading.value = false;
            // 假设返回的数据结构是 { list: [], total: 0 } 或者直接是数组
            let filteredData = data;

            // 如果是"待确认"状态，过滤掉 isIgnored 为 1 的数据
            if (activeIndex.value === 0 && Array.isArray(data)) {
                filteredData = data.filter((item) => item.isIgnored !== 1);
            }

            if (Array.isArray(filteredData) && filteredData.length > 0) {
                taskList.value = filteredData;
                // 更新当前状态的数量
                taskCounts.value[activeIndex.value] = filteredData.length;
                if (activeIndex.value === 2) {
                    // 地图使用筛选后的数据
                    indexMap.initData(taskList.value);
                }
            } else {
                noData.value = true;
                taskList.value = [];
                taskCounts.value[activeIndex.value] = 0;
            }
        })
        .catch((error) => {
            console.error("获取任务列表失败:", error);
            loading.value = false;
            taskList.value = [];
            taskCounts.value[activeIndex.value] = 0;
            if (activeIndex.value === 2) {
                indexMap.initData(taskList.value);
            }
            noData.value = true;
        });
}

function handleActiveFilter(i) {
    activeIndex.value = i;
    selectParma.value.districtCode = cityCode.value;
    selectParma.value.farmWorkTypeId = null;
}

function toPage(item) {
    // router.push("/servicZes_agri")
    // if (activeIndex.value === 2) {
    // } else {
    //     // 下发农事请求
    //     const data = {
    //         id: item.id,
    //     };
    //     VE_API.z_farm_work_record.issueFarmWorkRecord(data).then((res) => {
    //         if (res.code === 0) {
    //             taskPopupType.value = "success";
    //             showTaskPopup.value = true;
    //             getSimpleList();
    //         }
    //     });
    // }
}

const showUploadExecutePopup = (item) => {
    if (item?.executeEvidence.length) {
        onlyShare.value = true;
    } else {
        onlyShare.value = false;
    }
    setTimeout(() => {
        uploadExecuteRef.value.showPopup(item);
    }, 10);
};

function toDetail(item) {
    // if (activeIndex.value === 0) {
    //     router.push({
    //         path: "/modify_work",
    //         query: { id: item.id },
    //     });
    // } else {
    // }
    router.push({
        path: "/completed_work",
        query: { miniJson: JSON.stringify({ id: item.id }) },
    });
}

const priceSheetPopupRef = ref(null);
const showPriceSheetPopup = (item) => {
    VE_API.z_farm_work_record.getDetail({ id: item.id }).then(({ data }) => {
        const res = data[0];
        priceSheetPopupRef.value.handleShowPopup(res);
    });
};

const onlyShare = ref(false);
const currentTask = ref(null);
function handleAction(item) {
    if (activeIndex.value === 0) {
        taskPopupType.value = "warning";
        showTaskPopup.value = true;
        currentTask.value = item;
    } else {
        onlyShare.value = true;
        setTimeout(() => {
            uploadExecuteRef.value.showPopup(item, "share-sheet");
        }, 10);
    }
}

function handlePopupBtn() {
    showTaskPopup.value = false;
    if (taskPopupType.value === "warning") {
        // 确认忽略
        VE_API.z_farm_work_record.ignoreFarmWorkRecord({ farmWorkRecordId: currentTask.value.id }).then((res) => {
            if (res.code === 0) {
                ElMessage.success("操作成功");
                getSimpleList();
            }
        });
    }
}

function handleForward(item) {
    if (item.quoteCount && item.quoteCount != 0) {
        onlyShare.value = true;
        setTimeout(() => {
            uploadExecuteRef.value.showPopup(
                { ...item, type: "quotation", farmWorkOrderId: item.orderId },
                "share-sheet"
            );
        }, 10);
    } else {
        ElMessage.warning("暂无报价数据,无法分享");
        return;
    }
}

const executorList = ref([{
    id: 1,
    name: "张三",
    phone: "13800138000",
}, {
    id: 2,
    name: "李四",
    phone: "13800138001",
}])

function handleTimelineAction(item) {
    // activeUploadPopupRef.value.triggerFarmWork({
    //     farmId: item.farmId,
    //     workName: item.workName,
    // });

    eventBus.emit("activeUpload:show", {
        gardenIdVal: item.farmId,
        needExecutorVal: true,
        problemTitleVal: '请选择 ' + item.workName + ' 执行截止时间',
        imgDescVal: '请上传凭证(转入农事任务凭证）',
        arrangeIdVal: item.farmWorkArrangeId,
        executorListVal: executorList.value,
    });
}

const phenologyList = ref([{
    id: 1,
    name: "花芽分化",
}, {
    id: 2,
    name: "开花",
}, {
    id: 3,
    name: "成熟",
}]);
function handleSelectCurrentPhenology(item) {
    eventBus.emit("activeUpload:show", {
        gardenIdVal: item.farmId,
        problemTitleVal: '进入 物候期 的时间',
        imgDescVal: '请上传凭证(转入农事任务凭证）',
        arrangeIdVal: item.farmWorkArrangeId,
        selectCurrentPhenologyVal: true,
        phenologyListVal: phenologyList.value,
    });
}

function handleRemindCustomer(item) {
    router.push({
        path: "/remind_customer",
        query: { id: item.id },
    });
}
</script>

<style lang="scss" scoped>
.task-page {
    width: 100%;
    height: calc(100vh - 50px - 50px);
    overflow: auto;
    box-sizing: border-box;
    background: #f5f7fb;
    .map-container {
        width: 100%;
        height: 162px;
        clip-path: inset(0px round 8px);
    }

    .select-group {
        display: flex;
        padding: 0px 12px 0 12px;
        .select-item {
            width: 100%;
            ::v-deep {
                .el-select__wrapper {
                    text-align: center;
                    gap: 2px;
                    box-shadow: none;
                    justify-content: center;
                    background: none;
                }
                .el-select__selection {
                    flex: none;
                    width: fit-content;
                }
                .el-select__placeholder {
                    position: static;
                    transform: none;
                    width: fit-content;
                    color: rgba(0, 0, 0, 0.2);
                }
                .el-select__caret {
                    color: rgba(0, 0, 0, 0.2);
                }
            }
        }
    }

    .task-top {
        padding: 10px 12px 0 12px;
    }

    .task-content-loading {
        height: 80px;
        border-radius: 8px;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
    }

    .task-content {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        min-height: 80px;
    }

    .empty-data {
        text-align: center;
        font-size: 14px;
        color: #6f7274;
        padding: 20px 0;
    }
    .task-list {
        position: relative;
        background: #fff;
        padding: 12px 12px 8px 12px;
    }
    .list-filter {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .filter-item {
            padding: 0 12px;
            height: 28px;
            color: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            line-height: 28px;
            border-radius: 20px;
            &.active {
                color: #2199f8;
                background: rgba(33, 153, 248, 0.2);
            }
        }
    }
    .task-item {
        border-radius: 12px;
        border: 0.3px solid rgba(0, 0, 0, 0.2);
        padding: 12px;
    }

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

    .img-text-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
        .left-wrap {
            display: flex;
            align-items: center;
            .left-img {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .right-text {
                padding-left: 8px;
                .farm-info {
                    font-size: 14px;
                    color: #1d2129;
                    display: flex;
                    align-items: center;
                    .info-tag-wrap {
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        .tag-item {
                            height: 20px;
                            line-height: 20px;
                            padding: 0 8px;
                            border-radius: 2px;
                            font-size: 12px;
                            &.second {
                                color: #ff953d;
                                background: rgba(255, 149, 61, 0.1);
                            }
                            &.primary {
                                color: #2199f8;
                                background: #e8f3ff;
                            }
                        }
                    }
                }
                .farm-addr {
                    padding-top: 2px;
                    font-size: 12px;
                    color: #86909c;
                }
            }
        }
        .right-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            background: #2199f8;
            font-size: 12px;
            flex: none;
            width: 44px;
            height: 44px;
            padding: 8px;
            border-radius: 5px;
            box-sizing: border-box;
            .click-item {
                display: flex;
                align-items: center;
                gap: 2px;
            }
            .follow-text {
                color: #d0d0d0;
            }
        }
    }

    .item-bottom {
        padding-top: 10px;
        .bottom-tag {
            display: flex;
            gap: 10px;
            .tag-card {
                flex: 1;
                border-radius: 2px;
                padding: 4px;
                box-sizing: border-box;
                border: 0.4px solid rgba(215, 215, 215, 0.5);
                .card-content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    .card-main-text {
                        font-size: 16px;
                        font-weight: 500;
                        color: #202020;
                        margin-bottom: 2px;
                    }
                    .card-sub-text {
                        font-size: 10px;
                        color: rgba(32, 32, 32, 0.4);
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        .card-icon {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            width: 12px;
                            height: 12px;
                            color: #2199f8;
                        }
                    }
                }
                &.active {
                    background: rgba(33, 153, 248, 0.1);
                    border: 0.5px solid #2199f8;
                    .card-content {
                        .card-main-text {
                            color: #2199f8;
                        }
                        .card-sub-text {
                            color: #2199f8;
                        }
                    }
                }
            }
        }
        .timeline {
                padding-top: 10px;
                .timeline-item {
                    display: flex;
                    align-items: flex-start;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 22px;
                    & + .timeline-item {
                        margin-top: 10px;
                    }
                    .timeline-left {
                        width: 22px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .dot {
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background: #A2D5FD;
                            margin-top: 6px;
                        }
                        .line {
                            border-left: 1px dashed #A2D5FD;
                            margin-top: 4px;
                            height: 28px;
                        }
                    }
                    .timeline-right {
                        padding-left: 5px;
                        flex: 1;
                        .date {
                            color: #1D2129;
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 22px;
                        }
                        .text {
                            font-size: 12px;
                            color: #d7d7d7;
                            .price {
                                padding-left: 4px;
                            }
                            .action-detail {
                                margin-left: 6px;
                                color: #2199F8;
                                border-bottom: 1px solid;
                            }
                        }
                        .work-name {
                            padding-left: 4px;
                        }
                    }
                    .timeline-action {
                        align-self: center;
                        height: 28px;
                        line-height: 28px;
                        flex: none;
                        background: rgba(33, 153, 248, 0.1);
                        color: #2199F8;
                        font-size: 12px;
                        padding: 0px 11px;
                        border-radius: 20px;
                    }
                }
            }
    }

    .item-footer {
        margin-top: 10px;
        padding-top: 11px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        .footer-l {
            color: #8b8b8b;
            font-size: 12px;
            &.primary-btn {
                display: inline-flex;
                align-items: center;
                border: 1px solid #2199f8;
                background: rgba(33, 153, 248, 0.1);
                padding: 0 12px;
                height: 32px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                border-radius: 20px;
                color: #2199f8;
                .share-icon {
                    width: 12px;
                    padding-right: 4px;
                }
            }
            &.farm-name-text {
                font-size: 14px;
                color: #6f7274;
                .name-text {
                    padding-left: 4px;
                }
            }
        }
        .footer-r {
            display: flex;
            align-items: center;
            .btn {
                height: 32px;
                line-height: 32px;
                padding: 0 12px;
                border-radius: 20px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                &.second {
                    // border: 1px solid #8B8B8B;
                    // color: #8B8B8B;
                    color: #2199f8;
                    background: rgba(33, 153, 248, 0.1);
                }
                &.primary {
                    background: #2199f8;
                    color: #fff;
                }
                .btn-icon {
                    padding-right: 4px;
                }
                &.warning {
                    color: #ff953d;
                    background: #fff;
                    border: 1px solid #ff953d;
                }
                &.secondary-text {
                    color: #2199f8;
                    border: 1px solid #2199f8;
                }
            }
            .btn + .btn {
                margin-left: 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>