<template>
    <uni-popup ref="popup" type="center">
        <view class="download-box relative" :style="{ background: themeStore.theme.popup.updateBg }">
            <theme-image src="@/static/rank/image_phbsy_x.png" mode="widthFix" class="close-img"
                @click="close"></theme-image>
            <view class="dw-head flex-center"
                :style="{ color: themeStore.theme.light, 'border-color': themeStore.theme.popup.lineBg }">
                Discover a newversion
            </view>
            <view class="update-content" :style="{ background: themeStore.theme.popup.updatePopBg }">
                {{ appStore.updateData?.updateText }}
            </view>
            <view class="confirm-box flex-center" @click="onConfirm"
                :style="{ background: `top / cover no-repeat ${themeStore.theme.popup.btnImgBg}`, color: themeStore.theme.popup.textColor }">
                Immediate Updating
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';

const emit = defineEmits(['close', 'confirm'])
const appStore = useAppStore()
const themeStore = useThemeStore()
const popup = ref()
const confirm = ref(false)

const onConfirm = () => {
    confirm.value = true
    popup.value.close()
    emit('confirm')
}
function close() {
    popup.value.close()
    emit('close')
}

function open() {
    popup.value.open()
}

defineExpose({
    close,
    open
})
</script>
<style lang="scss">
.download-box {
    width: 642rpx;
    height: 610rpx;
    background-color: beige;
    border-radius: 12rpx;
    border: 3px solid #FFD77B;
    padding: 0 26rpx;

    .close-img {
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        top: -22rpx;
        right: -22rpx;
    }

    .dw-head {
        width: 100%;
        height: 100rpx;
        font-family: Roboto;
        font-weight: bold;
        font-size: 35rpx;
        border-bottom: 1px solid;
    }

    .update-content {
        width: 100%;
        height: 356rpx;
        margin-top: 18rpx;
        border-radius: 10rpx;
        padding: 25rpx;
        color: #fff;
    }

    .confirm-box {
        width: 300rpx;
        height: 81rpx;
        font-family: Roboto;
        font-weight: 600;
        font-size: 27rpx;
        color: #7B0810;
        margin: 0 auto;
        margin-top: 20rpx;
    }
}
</style>