<script lang="ts" setup>
import Logo from '@/components/Logo.vue';
import SlgBtn from '@/components/Btn.vue'
import { computed, ref } from 'vue';
import Card from '@/components/card.vue';
import { useRouter } from 'vue-router';

const btnList = [
  {
    type: 'BTN1',
    text: '商家申请入驻',
  },
  {
    type: 'BTN2',
    text: 'ios下载',
    icon: 'pingguo.svg',
    qrcode: 'qrcode.png',
    small: true
  },
  {
    type: 'BTN3',
    text: 'Android下载',
    icon: 'android.svg',
    qrcode: 'qrcode.png',
    small: true
  },
]

const getImgUrl = computed(() => {
  return (url: string) => {
    return new URL(`../../assets/${url}.png`, import.meta.url).href
  }
})

const contact = [
  {
    icon: 'tel',
    title: '联系电话',
    detail: '138-5811-2690',
  },
  {
    icon: 'email',
    title: '联系邮箱',
    detail: 'support@33.cn',
  },
  {
    icon: 'location',
    title: '联系地址',
    detail: '杭州市西湖区东部软件园6幢702',
    small: true
  },
]

/* handle display QRCode */
const show = ref(false)
const handleDispaly = (type: string, e: Event) => {
  if (type == 'BTN2' || type == 'BTN3') {
    if (e.type == 'touchend')
      show.value = !show.value
    if (e.type == 'mouseenter')
      show.value = true
    if (e.type == 'mouseleave')
      show.value = false
  }

}

const handleClick = (type: string, e: Event) => {
  if (type != 'BTN1') return
  else {
    window.open('https://adminslg.8n.cn/#/applyShop')
  }
}

</script>

<template>
  <div class=" md:min-w-body">
    <div class="md:flex md:justify-between md:w-pcWidth mx-auto md:pl-11">
      <!-- left -->
      <div class=" md:relative md:first-letter:pb-12">
        <div class=" pt-12 mx-auto md:pt-16">
          <Logo />
        </div>
        <div class=" md:hidden text-gray-800 font-semibold mx-auto text-2xl text-center pt-10">下载上链购数字藏品平台</div>
        <div
          class=" text-gray-500 text-lg text-center pt-7 md:pt-20 md:text-gray-800 md:text-4xl md:font-semibold md:text-left md:leading-relaxed">
          集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
        <div class=" pt-11 md:pt-4 relative">
          <div>
            <SlgBtn v-for="(i, index) in btnList" :icon="i.icon" :qrcode="i.qrcode" :text="i.text" :small="i.small"
              @mouseenter="handleDispaly(i.type, $event)" @mouseleave="handleDispaly(i.type, $event)"
              @touchend="handleDispaly(i.type, $event)" @click="handleClick(i.type, $event)" class="my-3 md:my-5">
            </SlgBtn>
            <img :src="getImgUrl('qrcode')" v-show="show"
              class=" md:hidden w-40 h-40 mx-auto z-10 absolute -bottom-40 bg-white left-0 right-0">
          </div>
          <div class=" hidden md:flex text-gray-800 pt-20 pl-9 absolute top-6 left-48" style="width:450px">
            <div class=" mr-10 w-40">
              <img :src="getImgUrl('qrcode')" v-show="show" class=" w-40 h-40 mb-3">
              <p class=" font-semibold text-center" v-show="show">下载二维码</p>
            </div>
            <div class="justify-self-end">
              <img :src="getImgUrl('officialAccount')" class=" w-40 h-40 mb-3">
              <p class="font-semibold text-center">扫一扫关注公众号</p>
            </div>
          </div>
        </div>
      </div>
      <!-- right -->
      <img src="@/assets/banner.png" class=" md:hidden w-80 px-2 mx-auto pt-8">
      <img src="@/assets/bannerPC.png" class="hidden md:block -mt-72 -mr-20 -ml-10" style="width:840px;">
    </div>
    <div class=" relative mt-5 md:w-pcWidth w-h5Width md:h-pcHeight h-h5Height mx-auto md:mt-28">
      <img :src="getImgUrl('textBgH5')" class=" md:hidden mx-auto w-h5Width h-h5Height">
      <img :src="getImgUrl('textBgPC')" class=" hidden md:block mx-auto w-pcWidth h-pcHeight">
      <p
        class="text-sm md:text-base text-white text-justify absolute top-0 left-0 bottom-0 right-0 mx-auto pt-10 md:pt-16">
      <p class="text-lg font-semibold text-center pb-6 md:text-3xl">
        上链购数藏平台元宇宙时空之门
      </p>
      <p class="md:px-20 px-5 md:text-lightGray">
        上链购平台是由杭州复杂美科技有限公司提供技术支持的一款集溯源与数字藏品虚实融合的资产数字化平台。杭州复杂美科技为国内区块链行业第一梯队企业，与蚂蚁、腾讯、趣链同列，其区块链发明专利申请达600多项，170多项发明专利已授权，位列全球榜单第7名，中国第3名，仅次于阿里、腾讯。
      </p>
      <p class=" pt-4 md:px-20 px-5 md:text-lightGray">
        上链购诞生于2018年，为国内首个资产数字化应用的平台，亦是目前唯一将数字防伪凭证与数字藏品进行虚实融合应用的平台，旨在链接虚拟与现实。上链购同时是一个多商户数字藏品平台，企业或个人可入驻上链购，将资产进行链上溯源并锻造出FT/NFT数字资产进行销售，包括实物映射、艺术品、非遗传承、创意版权、时尚品牌、游戏动漫等，它可以是虚拟资产，亦或是实物资产（实物交割），您可以在上链购平台进行上架、流转、收藏各类数字资产，抢先体验元宇宙世界中的电子商务全新模式。
      </p>
      </p>
    </div>
    <img :src="getImgUrl('officialAccount')" class="md:hidden w-36 mx-auto pt-12">
    <p class=" md:hidden font-semibold text-center text-gray-800">扫一扫关注公众号</p>
    <div class="pt-12 pb-20 md:flex md:w-pcWidth mx-auto md:justify-between md:gap-x-7">
      <Card v-for="c in contact" :icon="c.icon" :title="c.title" :detail="c.detail" class=" my-5 mx-auto md:w-1/3"
        :small="c.small"></Card>
    </div>
  </div>
</template>