<template>
    <div
        class="elements-home"
        :class="{'-higher' : higher}"
        v-if="userAgentInfo && userAgentInfo !== 'web'"
        @click="goToHome"
    >
        <NuxtIcon name="arrow" />
        <p>返回</p>
    </div>
</template>
<script setup>
    const props = defineProps({
        higher: {
            type: Boolean,
            default: false,
        },
    })

    const userAgentInfo = useUserAgentInfo()

    const goToHome = () => {
        if (userAgentInfo.value === 'dawho-iphone' || userAgentInfo.value === 'dawho-android') {
            window.location.href = 'sinopacaction:{shareshares}{}'
        } else if (userAgentInfo.value === 'mobilebanking-iphone' || userAgentInfo.value === 'mobilebanking-android') {
            window.location.href = 'sinopacaction:{home}{}'
        } else if (userAgentInfo.value === 'newmobilebanking') {
            var arr = [];      
            arr.push("ArrangementsMA", "frmHomedptAccount");
            kony.evaluateJavaScriptInNativeContext("navToForm", JSON.stringify(arr));
        }
    }
</script>
<style lang="scss">
    $class-name: elements-home;
    .#{$class-name} {
        @include typo('body', 14);

        // transform: translateY(100%);
        position: absolute;
        left: 2.4rem;
        top: 2.4rem;
        display: flex;
        align-items: center;
        gap: .4rem;
        background-color: map-get($colors, white-1);
        padding: 0.8rem 1.2rem;
        border-radius: .6rem;
        z-index: 10;

        &.-higher {
            top: 2.4rem;
            transform: translateY(0);
        }

        > span {
            @include size(2.4rem, auto);

            > svg {
                @include size(100%, auto);
            }
        }
    }
</style>