<template>
    <view class="tab-dock">
        <view class="tab-dock__inner">
            <view class="tab-dock__item" @click="goHome">
                <image
                    class="tab-dock__icon"
                    :src="active === 0 ? '/static/user/home_no.png' : '/static/user/home.png'"
                    mode="aspectFit"
                />
                <text class="tab-dock__label" :style="{ color: active === 0 ? activeColor : color }">首页</text>
            </view>

            <view class="tab-dock__item tab-dock__item--center" @click="goWeekly">
                <view class="tab-dock__fab" :class="{ 'tab-dock__fab--active': active === 1 }">
                    <text class="tab-dock__fab-text">糖</text>
                </view>
                <text class="tab-dock__label tab-dock__label--center" :style="{ color: active === 1 ? activeColor : color }">血糖</text>
            </view>

            <view class="tab-dock__item" @click="goUser">
                <image
                    class="tab-dock__icon"
                    :src="active === 2 ? '/static/user/user_no.png' : '/static/user/user.png'"
                    mode="aspectFit"
                />
                <text class="tab-dock__label" :style="{ color: active === 2 ? activeColor : color }">我的</text>
            </view>
        </view>
        <view class="tab-dock__safe" />
    </view>
</template>

<script setup>
const props = defineProps({
    /** 0 首页 1 血糖 2 我的 */
    active: {
        type: Number,
        default: 0
    }
})

const color = '#8a8a8a'
const activeColor = '#204e2b'

function goHome() {
    if (props.active === 0) return
    uni.redirectTo({ url: '/pages/index/index' })
}

function goUser() {
    if (props.active === 2) return
    uni.redirectTo({ url: '/pages/user/user' })
}

function goWeekly() {
    if (props.active === 1) return
    uni.redirectTo({ url: '/tongji/pages/weekly' })
}
</script>

<style scoped lang="scss">
.tab-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #ffffff;
    border-top: 1rpx solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.04);
}

.tab-dock__inner {
    display: flex;
    align-items: flex-end;
    height: 100rpx;
}

.tab-dock__item {
    flex: 1;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tab-dock__item--center {
    justify-content: flex-end;
    padding-bottom: 6rpx;
}

.tab-dock__icon {
    width: 46rpx;
    height: 46rpx;
}

.tab-dock__label {
    margin-top: 6rpx;
    font-size: 22rpx;
    line-height: 1.2;
}

.tab-dock__label--center {
    margin-top: 8rpx;
}

.tab-dock__fab {
    width: 96rpx;
    height: 96rpx;
    margin-top: -48rpx;
    border-radius: 50%;
    background: linear-gradient(180deg, #2d7340 0%, #204e2b 100%);
    border: 6rpx solid #ffffff;
    box-shadow: 0 10rpx 24rpx rgba(32, 78, 43, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-dock__fab--active {
    transform: scale(1.04);
    box-shadow: 0 12rpx 28rpx rgba(32, 78, 43, 0.42);
}

.tab-dock__fab-text {
    color: #ffffff;
    font-size: 38rpx;
    font-weight: 700;
    line-height: 1;
}

.tab-dock__safe {
    height: env(safe-area-inset-bottom);
    background: #ffffff;
}
</style>
