<script setup>
import { computed } from 'vue';

const IMAGES = {
    background: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp',
    start: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp',
    testing: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp',
    finish: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/f8df9974d93a478f8c6b760fd32e15aaGroup%20348447439.webp'
};

const props = defineProps({
    isTesting: {
        type: Boolean,
        default: false
    },
    isSecondTest: {
        type: Boolean,
        default: false
    },
    isResultShown: {
        type: Boolean,
        default: false
    },
    isProgressFinished: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['startTest', 'restartTest', 'showFinalCard', 'showCompletionPopup']);

const statusText = computed(() => {
    if (props.isSecondTest) return '2/2';
    return props.isTesting ? '1/2' : '0/2';
});

const isDisabled = computed(() => {
    return props.isTesting && !props.isProgressFinished && !props.isResultShown;
});

const btnImage = computed(() => {
    if (props.isSecondTest) {
        if (props.isResultShown) {
            return IMAGES.finish;
        }
        if (props.isTesting) {
            return IMAGES.testing;
        }
        return IMAGES.start;
    }
    
    if (props.isTesting) {
        if (props.isProgressFinished && !props.isResultShown) {
            return IMAGES.testing;
        }
        return IMAGES.testing;
    }
    
    return IMAGES.start;
});

const handleStartTest = () => {
    if (isDisabled.value) return;

    if (!props.isTesting) {
        emit('startTest');
    } else if (props.isTesting && props.isProgressFinished && !props.isResultShown) {
        emit('showFinalCard');
    } else if (props.isResultShown && props.isSecondTest) {
        emit('showCompletionPopup');
    } else if (props.isResultShown && !props.isSecondTest) {
        emit('restartTest');
    }
};
</script>

<template>
    <view class="bottom-bar">
        <image :src="IMAGES.testing" 
               style="width:0;height:0;opacity:0;position:absolute;pointer-events:none;"></image>
        
        <image class="bar-bg" :src="IMAGES.background" mode="scaleToFill"></image>
        <text class="test-status">当前测试: <text class="highlight">{{ statusText }}</text></text>
        <view class="start-btn-wrapper" @click="handleStartTest" :class="{ 'disabled': isDisabled }">
            <image class="start-btn-img" :src="btnImage" mode="scaleToFill"></image>
        </view>
    </view>
</template>

<style scoped lang="scss">
.bottom-bar {
    position: absolute;
    bottom: -84rpx;
    left: 0;
    width: 75%;
    padding: 2vh 40rpx;
    padding-bottom: calc(2vh + env(safe-area-inset-bottom));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
    .bar-bg {
        position: absolute;
        top: 36rpx;
        left: -204rpx;
        width: 176%;
        height: 62%;
        z-index: 0;
    }
    
    .test-status {
        position: absolute;
        left: 85rpx;
        top: 52%;
        transform: translateY(-50%);
        z-index: 1;
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        
        .highlight {
            color: #3481C8;
        }
    }
    
    .start-btn-wrapper {
        position: relative;
        z-index: 1;
        right: -152rpx;
        
        .start-btn-img {
            height: 116rpx;
            width: 280rpx;
            margin-top: 20rpx;
        }
    }
}
</style>
