<template>
  <div class="container">
    <div class="logo-box">
      <svg-icon name="acc_logo" class="acc-logo" />
      <span class="logo-text">Local Block</span>
      <span class="logo-version">{{ version }}</span>
    </div>

    <van-list class="user-bar-list">
      <template v-for="(item, index) in vanListConfig" >
        <van-cell  
          v-if="item.txt"
          :class="index == vanListConfig.length - 1 ? 'user-bar-list-last' : ''"
          :title="item.title"
          :value="item.txt"
          
        />
        <van-cell   
          v-else
          :class="index == vanListConfig.length - 1 ? 'user-bar-list-last' : ''"
          :title="item.title"
          :value="item.txt"
          is-link
          @click="evGoPath(item.url)"
        />
      </template>
    </van-list>
  </div>
</template>

<script setup> 
import { CapacitorUpdater } from "@capgo/capacitor-updater"

const router = useRouter();
const version = ref('');

const vanListConfig = ref([
  { title: $t('settings.ServiceAndPrivacyPolicy'), icon:"ingot",  url: 'agreement' },
  { title: $t('settings.OfficialWebsite'),   txt:"https://wallet.angeltokens.io" },
  { title: $t('settings.VersionUpdate'),   txt: '' },
])

const evGoPath = (path)=>{
  if(path == "agreement") router.push(path)
}
onMounted(async ()=>{
  const current = await CapacitorUpdater.current();

  if(current.bundle.version == "builtin" || current.bundle.version == ""){
    version.value = "1.0.0"
    vanListConfig.value[2].txt = "1.0.0" 
    return
  }
  version.value = current.bundle.version
  vanListConfig.value[2].txt = current.bundle.version
   
})

</script>

<style scoped lang="less">
.logo-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo-text {
    font-weight: 500;
    font-size: 17px;
    margin-top: 8px;
  }
  .logo-version {
    font-weight: 400;
    font-size: 12px;
    color: #8d8d8d;
    margin-top: 4px;
  }
}
.acc-logo {
  margin-top: 17px;
  width: 73px;
  height: 73px;
}

.user-bar-list{
  margin: 25px 17px 0 17px;
  border-radius: 12px 12px 12px 12px;
  overflow: hidden; 
  .van-cell{
    height: 44px;
    background: @bg-color1;
    border-bottom: 1px solid @bg-color1;
    font-size: 15px;
    align-items: center;
    &::after{
      border-bottom: 1px solid #F2F2F2;
    }
  }
  :deep(.van-cell__title){
    font-family: PingFang SC, PingFang SC;
    font-weight: 500 ;
    font-size: 15px;
    color: #000000;
    white-space: nowrap; 
  }
  :deep(.van-cell__value){
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #8D8D8D;
    min-width: 250px;
    text-align: right;
  }
}
</style>
