<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="bind-content flex-center relative">
            <theme-image :src="`@/static${mainImg}`" class="pop-main-img" mode="aspectFit"></theme-image>
            <view class="btn-box flex items-center justify-between">
                <theme-image src="@/static/home/btn_Bindmobile.png" class="btn-img" mode="aspectFit" @click="handleBind"></theme-image>
                <theme-image src="@/static/home/btn_VerifyLater.png" class="btn-img" mode="aspectFit" @click="handleLater"></theme-image>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
import { useAppStore } from '@/store/useAppStore';
import { computed, ref } from 'vue'
import themeImg from '@/theme/image'

const emit = defineEmits(['onBind', 'close'])
const popup = ref(null)

const appStore = useAppStore()

const mainImg = computed(() => {
    return appStore.isNative ? themeImg.bindPhoneActApp : themeImg.bindPhoneActH5
})

const open = () => {
    popup.value.open()
}
const close = () => {
    popup.value.close()
}

const handleBind = () => {
    close()
    emit('onBind')
}
const handleLater = () => {
    close()
    emit('close')
}
defineExpose({
    open,
    close
})
</script>
<style lang="scss" scoped>
.bind-content {
    width: 699rpx;
    height: 600rpx;
    .pop-main-img{
        width: 626rpx;
        height: 523rpx;
    }
    .btn-box{
        width: 450rpx;
        height: 70rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        .btn-img{
            width: 203rpx;
            height: 70rpx;
        }
    }
}
</style>