<template>
    <vant-config-provider :theme="store.isDark ? 'dark' : 'light'">
        <ion-app>
            <ion-router-outlet />
        </ion-app>
    </vant-config-provider>
</template>

<script setup>
import { ConfigProvider as VantConfigProvider, showConfirmDialog } from 'vant'
import { useBackButton, useIonRouter } from '@ionic/vue'
import { onMounted, onBeforeUnmount, ref, provide, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useSystemStore } from './stores/system'
import { App } from '@capacitor/app'
import { useSettingsStore } from '@/stores/settings'
import { useI18n } from 'vue-i18n'
import { emitter } from '@/utils/eventBus'
import taost from '@/utils/toast'
import { http } from '@/plugins/http'
import { closeOutline } from 'ionicons/icons'
import { Clipboard as NativeClipboard } from '@capacitor/clipboard'
import { Capacitor } from '@capacitor/core'
import { useClipboard } from '@vueuse/core'
import { AppLauncher } from '@capacitor/app-launcher'
import { storeToRefs } from 'pinia'
import { useUserStore } from './stores/user'

const store = useSettingsStore()
const { t } = useI18n()
const ionRouter = useIonRouter()
const route = useRoute()
const customers = ref([])
const { user } = storeToRefs(useUserStore())

const promptLogin = async () => {
    const confirm = await showConfirmDialog({
        title: t('common.alert'),
        message: t('user.notLogin')
    }).catch(() => {})
    if (confirm) {
        ionRouter.push({ name: 'login' })
    }
}
let ts = 0
const promptExit = () => {
    if (new Date().getTime() - ts < 2000) {
        App.exitApp()
        return
    }
    ts = new Date().getTime()
    taost(t('common.exitApp'))
}
useBackButton(1, processNextHandler => {
    if (route.matched[0].name === 'index') {
        promptExit()
    } else if (!ionRouter.canGoBack()) {
        promptExit()
    } else {
        processNextHandler()
    }
})

function init() {
    emitter.on('promptLogin', promptLogin)
}

onMounted(() => {
    init()
})

onBeforeUnmount(() => {
    emitter.off('promptLogin', promptLogin)
})

const showCustmer = ref(false)
function customer() {
    showCustmer.value = true
}

const { copy } = useClipboard({ legacy: true })
async function copyText(text) {
    if (Capacitor.isNativePlatform()) {
        await NativeClipboard.write({
            string: text
        })
    } else {
        copy(text)
    }
    taost(t('common.copied'))
}
async function open(item) {
    if (item.broker && !item.assigned) {
        http.get('/user/assignBroker', { brokerId: item.id }).then(res => {
            item.assigned = true
        })
    }
    if (item.type === 'WhatsApp') {
        if (Capacitor.isNativePlatform()) {
            await AppLauncher.openUrl({ url: `whatsapp://send?phone=${item.account}` })
        } else {
            await AppLauncher.openUrl({ url: `https://wa.me/${item.account}` })
        }
    } else if (item.type === 'Telegram') {
        if (Capacitor.isNativePlatform()) {
            await AppLauncher.openUrl({ url: `tg://resolve?domain=${item.account}` })
        } else {
            await AppLauncher.openUrl({ url: `https://t.me/${item.account}` })
        }
    } else if (item.type === 'Telegram Group' || item.type === 'TG Group') {
        let account = item.account
        if (account.startsWith('+')) {
            account = account.substr(1)
        }
        if (Capacitor.isNativePlatform()) {
            await AppLauncher.openUrl({ url: `tg://join?invite=${account}` })
        } else {
            await AppLauncher.openUrl({ url: `https://t.me/+${account}` })
        }
    }
}
provide('showCS', () => {
    showCustmer.value = true
})
provide('promptLogin', promptLogin)
</script>
<style lang="less" scoped>
.consult {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: inherit;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    pointer-events: initial;
    background-size: 130% 130%;
    transition: all 0.2s ease-in-out 0s;
    position: relative;
    color: white;
    background: linear-gradient(135deg, rgb(64, 29, 186), rgb(130, 91, 240));
    box-shadow: rgb(64 29 186 / 50%) 0px 4px 24px;
    position: fixed;
    right: 16px;
    bottom: 56px;
    ion-icon {
        font-size: 24px;
    }
}
#btn-customer {
    position: fixed;
    right: 10px;
    width: 48px;
    height: 54px;
    bottom: calc(var(--ion-safe-area-bottom) + 68px);
}

.customer-modal {
    position: absolute;
    height: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .dim {
        position: fixed;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .modal-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 55px;
    }
    .modal-content {
        background: linear-gradient(179deg, #5f10af 0%, #1e0438 100%);
        border-radius: 16px 16px 0px 0px;
        padding-bottom: var(--ion-safe-area-bottom, 20px);
        .head {
            .f();
            color: #ffffff;
            font-size: 16px;
            padding: 56px 0 15px;
            .text {
                flex-grow: 1;
                font-weight: bold;
                // margin-left: 16px;
                font-size: 18px;
                font-family: TsangerYuMo-W05, TsangerYuMo;
                font-weight: normal;
                color: #ffffff;
                line-height: 24px;
                // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
                .gradient-text(linear-gradient(180deg, #ddffc1 0%, #55f6ca 100%));
                text-transform: uppercase;
                .f-col();
                align-items: center;
                .sub {
                    font-family: TsangerYuMo-W05, TsangerYuMo;
                    font-weight: normal;
                    color: #ffef33;
                    line-height: 24px;
                    // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
                    .gradient-text(linear-gradient(180deg, #fff797 0%, #ffef33 100%));
                    margin-top: 5px;
                }
            }
            .icon {
                width: 38px;
                height: 38px;
                margin-right: 8px;
                .f();
                justify-content: center;
            }
        }

        .head-img {
            width: 150px;
            height: 110px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .close {
            position: absolute;
            width: 22px;
            height: 22px;
            top: 71px;
            right: 16px;
            img {
                width: 22px;
                height: 22px;
                display: block;
            }
        }
        .item {
            position: relative;
            margin: 0 16px 10px 16px;
            .f();
            .bg {
                width: 100%;
                height: auto;
            }
            .item-content {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                .f();
                padding-left: 18px;
                .icon {
                    width: 40px;
                    height: 40px;
                }
            }
            .info {
                .f-col();
                flex: 1 1 0;
                height: 40px;
                justify-content: space-around;
                margin-left: 10px;

                .name {
                    color: #121325;
                    font-weight: bold;
                    font-size: 14px;
                }
                .num {
                    color: #386459;
                    font-size: 12px;
                }
            }
            .btn-open {
                width: 60px;
                height: 24px;
                background: #121325;
                border-radius: 12px;
                margin-right: 18px;
                font-size: 12px;
                color: #ffffff;
                font-weight: bold;
                .f();
                justify-content: center;
            }

            &.broker {
                .btn-open {
                    background: #e908ff;
                }
            }
        }

        .tips {
            font-size: 12px;
            color: #ffffff;
            line-height: 24px;
            text-align: center;
            padding: 0 0 6px;
        }
    }
}
</style>
