<template>
    <view class="w-100%" style="position: fixed; bottom: 0; left: 0">
        <view class="p-rtv" style="height: 210rpx">
            <image class="w-100%" src="/static/images/plant/bottombg.png" mode="widthFix" style="position: absolute; bottom: 0; left: 0; z-index: -1" />
            <view class="d-flex h-140 w-100% j-sa" style="position: absolute; bottom: 0; left: 0">
                <view class="d-flex a-c flex1 j-sa">
                    <view @click="goToSwitchWithParams('/pages/switch/index1', { type: 'plant', title: '种植端基地', path: '/pages/plant/base/index' })" class="c-#999 f-s-24 d-flex flex-cln">
                        <image v-if="activeTab !== 'base'" class="w-80" src="/static/images/plant/bottomBase.png" mode="widthFix" />
                        <image v-if="activeTab === 'base'" class="w-80" src="/static/images/plant/bottomBaseActive.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'base' ? 'c-primary f-w-5' : ''">基地</view>
                    </view>
                    <view @click="goToSwitchWithParams('/pages/switch/index2', { type: 'port', title: '种植端种养殖', path: '/pages/plant/port/index' })" class="c-#999 f-s-24 d-flex flex-cln">
                        <image v-if="activeTab !== 'planting'" class="w-80" src="/static/images/plant/bottomPlantingBreeding.png" mode="widthFix" />
                        <image v-if="activeTab === 'planting'" class="w-80" src="/static/images/plant/bottomPlantingBreedingActive.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'planting' ? 'c-primary f-w-5' : ''">种养殖</view>
                    </view>
                </view>
                <view class="w-126 d-flex a-c j-c p-rtv">
                    <image v-if="activeTab !== 'warehouse'" class="w-80" src="/static/images/plant/bottomWarehouse.png" mode="widthFix" style="position: absolute; top: -40rpx" />
                    <image v-if="activeTab === 'warehouse'" class="w-80" src="/static/images/plant/bottomWarehouseActive.png" mode="widthFix" style="position: absolute; top: -40rpx" />
                </view>
                <view class="d-flex a-c flex1 j-sa">
                    <view class="c-#999 f-s-24 d-flex flex-cln">
                        <image v-if="activeTab !== 'processing'" class="w-80" src="/static/images/plant/bottomProcessingPackaging.png" mode="widthFix" />
                        <image v-if="activeTab === 'processing'" class="w-80" src="/static/images/plant/bottomProcessingPackagingActive.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'processing' ? 'c-primary f-w-5' : ''">加工包装</view>
                    </view>
                    <view class="c-#999 f-s-24 d-flex flex-cln">
                        <image v-if="activeTab !== 'more'" class="w-80" src="/static/images/plant/bottomMore.png" mode="widthFix" />
                        <image v-if="activeTab === 'more'" class="w-80" src="/static/images/plant/bottomMoreActive.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'more' ? 'c-primary f-w-5' : ''">更多</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bg-#fff" :style="{ height: `${safeAreaBottom}px` }"></view>
    </view>
</template>

<script setup lang="ts">
import { goToSwitchPage } from '@/utils/public';
defineProps<{
    activeTab?: string; // 当前活跃的tab标识符：'base' | 'planting' | 'warehouse' | 'processing' | 'more'
}>();
const windowInfo = uni.getWindowInfo();
const safeAreaBottom = windowInfo.safeAreaInsets.bottom;
const goToSwitchWithParams = (pages: string, data: unknown): void => {
    // 使用公共函数跳转到switch页面并传递参数
    goToSwitchPage(pages, data);
};
</script>
