<template>
  <div
    class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[20px] pt-[12px] pb-[18px]"
  >
    <div
      class="flex flex-col justify-between pt-[20px] pb-[18px] border-b-[1px] border-black-3B3B3C break-all"
    >
      <p class="underline text-blue-65B5FF">{{ currentData?.address }}</p>
      <div class="flex flex-row justify-end mt-[12px]">
        <Icons :url="'copyAddress'" :size="32" />
        <div @click="open">
          <Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
        </div>
      </div>
    </div>
    <tokens-details-row
      v-for="(item, index) in invariable.labels"
      :key="index"
      :title="item"
      :value="currentData?.[invariable.sequence[index]]"
      :value-color="invariable.colorSequence[index]"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from 'vue'
import { ElMessageBox } from 'element-plus'
import Qrcode from 'qrcode'
import tokensDetailsRow from '../mBase/tokensDetailsRow.vue'
import { tokensDetailsCollocate } from '../constant'
import Icons from '@src/components/icons/index.vue'
import { getAddressInfo } from '@src/api/AddressController'
import { useRoute } from 'vue-router'
const invariable = {
  ...tokensDetailsCollocate,
}
const route = useRoute()
const currentData = ref<any>()

// 通过address请求详情数据
const requestDetails = async (address: string) => {
  const params = {
    address,
  }
  const res = await getAddressInfo(params)
  const { data } = res
  currentData.value = {
    ...data,
    tokens: data?.tokens,
    transactions: data?.transactions + ' Transition',
    transfers: data?.transfers + ' Transfers',
  }
  console.log(res)
}

watchEffect(() => {
  if (route.path.split('/')?.[1] != 'tokens') {
    return
  }
  // 获取address
  let address = route.path.split('/')?.[2]
  requestDetails(address)
})

let open = async () => {
  const res = await Qrcode.toDataURL('https://baidu.com' as string)
  // 二维码生成之后
  ElMessageBox.alert(`<img src="${res}" class="w-full" />`, {
    showClose: false,
    closeOnClickModal: true,
    dangerouslyUseHTMLString: true,
    confirmButtonText: 'close',
    confirmButtonClass: 'text-white btn_modal',
    customClass: 'mobile-modal-wrap',
  })
}
</script>

<style lang="scss">
.mobile-modal-wrap {
  background: #2e2e31 !important;
  border-radius: 28px !important;
  border: none !important;
  padding: 0px 85px 32px !important;
  max-width: 100% !important;
  .el-message-box__btns {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 32px;
    .btn_modal {
      padding: 10px 28px 10px;
      background: #8659ff;
      border-radius: 8px;
      border: none !important;
      &:focus-visible {
        outline: none;
      }
    }
  }
}
</style>
