<template>
    <view class="w-100%" style="position: fixed; bottom: 0; left: 0; z-index: 1100">
        <view class="p-rtv" style="height: 210rpx">
            <image class="w-100%" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/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="showStorage = false;$u.route({ type: 'switchTab', url: '/pages/plant/base/index' })" class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'base'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBaseActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBase.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'base' ? 'c-primary f-w-5' : ''">基地</view>
                    </view>
                    <view @click="showStorage = false;$u.route({ type: 'switchTab', url: '/pages/plant/port/index' })" class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'planting'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreedingActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreeding.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" @click="$u.route({ type: 'switchTab', url: '/pages/plant/storage/index' })">
                    <image v-if="activeTab === 'storage'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouseActive.png" mode="widthFix" style="position: absolute; top: -40rpx" />
                    <image  v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouse.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 j-c a-c">
                        <image v-if="activeTab === 'processing'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackagingActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackaging.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'processing' ? 'c-primary f-w-5' : ''">加工包装</view>
                    </view>
                    <view @click="$u.route({ type: 'switchTab', url: '/pages/plant/more/index' })" class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'more'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMoreActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMore.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">
const showStorage = ref(false);
defineProps<{
    activeTab?: string; // 当前活跃的tab标识符：'base' | 'planting' | 'warehouse' | 'processing' | 'more'
}>();
const windowInfo = uni.getWindowInfo();
const safeAreaBottom = windowInfo.safeAreaInsets.bottom;
</script>
