<template>
    <section class="max-xl m-auto min-h-[calc(100vh-40px)] box-bg">
        <van-nav-bar :border="false" style="background-color: #F96825;">
            <template #title>
                <div class="bg-[#F96825] w-full">
                    <span class="text-white">{{ t('service.title') }}</span>
                </div>
            </template>
        </van-nav-bar>
        <div class="p-4 flex bg-[#F96825] flex-col">
            <span class="text-[#FFFFFFCC] font-semibold">{{ t('service.c_s_c') }}</span>
            <van-divider dashed :style="{ color: '#1989fa', borderColor: '#FFF', padding: '0 16px' }"></van-divider>
            <div class="flex flex-row">
                <img src="@/assets/imgs/customer.jpg" alt="" class="w-44 h-32">
                <div class="flex flex-col ml-4">
                    <span class="text-white font-medium text-md">{{ t('service.online') }}</span>
                    <span class="text-[#FFFFFFCC] font-medium text-sm">{{ t('service.o_tips') }}</span>
                </div>
            </div>
            <div class="h-11"></div>
        </div>
        <div class="mx-4 rounded-md relative">
            <div class="absolute -top-9 w-full ">
                <div class="mx-4 flex flex-row bg-white rounded-md p-4 items-center justify-start hover:cursor-pointer" @click="onClick">
                    <div><img src="@/assets/imgs/whatsapp.png" alt="" class="w-14 h-14"></div>
                    <div class="flex flex-col ml-4" >
                        <div class="text-[#1D1F24FF] text-base font-medium"></div>
                        <div class="text-[#1D1F2473] text-sm">{{ t('service.o_t') }} {{ service.onlineTime }}</div>
                    </div>
                </div>
            </div>
        </div>

    </section>
  <van-overlay :show="loading" >
   <div class="flex h-full items-center justify-center">
     <van-loading />
   </div>
  </van-overlay>
</template>

<!--Start of Tawk.to Script-->

<!--End of Tawk.to Script-->

<script setup lang="ts">
import {getCustomerService} from '@/api/service'
import {onMounted, ref} from 'vue';
import * as AuthUtils from '@/utils/auth'
import {useI18n} from 'vue-i18n'
import { useRouter } from 'vue-router';

const { t } = useI18n()
const router = useRouter()

const service = ref({})
const loading = ref(true)


const getServiceList = async () => {
  loading.value = true
  try {
    service.value = await getCustomerService()
  }finally {
    loading.value = false
  }
}



const onClick = () => {
    localStorage.setItem("chatOpen","ok")

    let url = service.value.link + '?t=' + AuthUtils.getAccessToken() + '&r=' + AuthUtils.getRefreshToken() 
    localStorage.setItem("chaturl",url)
   //window.open(service.value.link + '?t=' + AuthUtils.getAccessToken() + '&r=' + AuthUtils.getRefreshToken() , '_blank')
    router.replace('/chat')
}

onMounted(async () => {
    // await getServiceList()
    loading.value = false
})

</script>

<style>

.box-bg {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 15%, #F9F9F9 100%);
    ;
}
</style>