<template>
  <div class="flex desktop:flex-row mobile:flex-col">
    <div
      class="flex flex-col desktop:px-[34px] desktop:py-[24px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:w-[698px] mobile:w-full"
    >
      <p class="text-white desktop:text-[26px] mobile:text-[18px] font-medium">
        {{ title }}
      </p>
      <div
        class="flex flex-1 desktop:flex-row mobile:flex-col desktop:justify-between desktop:items-center pt-[20px] pb-[28px] border-b border-black-3B3B3C break-all"
      >
        <p class="text-white mobile:text-[16px] font-medium">{{ value }}</p>
        <div class="flex flex-row mobile:justify-end mobile:mt-[12px]">
          <Icons :url="'copyAddress'" :size="32" />
          <div @click="open">
            <Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
          </div>
        </div>
      </div>
      <div
        class="flex flex-1 desktop:flex-row mobile:flex-col desktop:py-[24px] mobile:py-[18px] border-b border-black-3B3B3C"
      >
        <p
          v-for="(item, index) in options"
          class="text-white text-[15px] flex justify-center items-center"
          :class="index == 0 ? '' : 'desktop:ml-[72px] mobile:mt-[18px]'"
        >
          {{ `${item?.value} ${item?.key}` }}
        </p>
      </div>
      <div class="flex flex-1 flex-row pt-[24px] items-center">
        <Icons url="viewContact" :size="30" />
        <p class="text-blue-65B5FF ml-[12px]">View Contact</p>
      </div>
    </div>
    <div
      class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] mack-bg desktop:ml-[40px] mobile:mt-[36px]"
      :class="url ? 'hidden' : ''"
    >
      <div
        class="flex flex-1 flex-col w-full h-full bg-cover bg-center bg-no-repeat bg-mack-group pt-[52px] pl-[40px]"
      >
        <p class="text-white font-semibold text-[18px]">Total Supply</p>
        <p class="text-white font-semibold text-[32px] mt-[36px]">
          {{ totalSupply }}
        </p>
      </div>
    </div>
    <div
      class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] desktop:py-[42px] desktop:px-[39px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:ml-[40px] mobile:mt-[36px]"
      :class="url ? '' : 'hidden'"
    >
      <img class="w-full h-full" :src="url" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Icons from '@src/components/icons/index.vue'
import { ElMessageBox } from 'element-plus'
import Qrcode from 'qrcode'
const props = defineProps({
  title: String,
  value: String,
  totalSupply: String,
  options: Array as any,
  url: String,
  qrcodeurl: String,
})

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

<style lang="scss" scoped>
.mack-bg {
  background: linear-gradient(230.77deg, #733efb 8.52%, #4917c1 72.48%);
  box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
</style>
