<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 Certification from './Certification.vue'
import Cooperators from './Cooperators.vue';
let btnPCList = [
  {
    type: 'BTN1',
    text: '商家申请入驻',
  },
  {
    type: 'BTN2',
    text: 'ios下载',
    icon: 'pingguo.svg',
    qrcode: 'IOS.png',
    small: true,
    defaultChecked: true
  },
  {
    type: 'BTN3',
    text: 'Android下载',
    icon: 'android.svg',
    qrcode: 'android.png',
    small: true
  },
]

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


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

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

/* handle display QRCode */
const show = ref(true)
const current = ref('BTN2')
const handleDispaly = (type: string, e: Event) => {
  if (type == 'BTN2' || type == 'BTN3') {
    if (e.type == 'touchend')
      show.value = !show.value
    btnPCList[1].defaultChecked = false
    if (e.type == 'mouseenter') {
      show.value = true
      current.value = type
    }
    // 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')
  }
}

const goToWebsite = (type: string, e: Event) => {
  if (type == 'BTN1') window.open('https://adminslg.8n.cn/#/applyShop')
  else if (type == 'BTN2') {
    window.open('https://apps.apple.com/cn/app/上链购/id1592640008')
  }
  else if (type == 'BTN3') {
    window.open('https://slg-file.oss-cn-hangzhou.aliyuncs.com/install/android/slg2.apk')
  }
}
</script>

<template>
  <div class=" bg-bgPurple">
    <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-3xl text-center pt-10">下载上链购数字藏品平台</div>
          <div
            class=" title">
            国内领先的兼容数字商品与数字<br/> 藏品的电商平台</div>
          <div class=" pt-11 md:pt-4 relative">
            <div>
              <div class=" md:block hidden">
                <SlgBtn v-for="(i, index) in btnPCList" :icon="i.icon" :qrcode="i.qrcode" :text="i.text"
                  :small="i.small" :checked="current == i.type" @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>
              </div>
              <div class=" md:hidden block">
                <SlgBtn v-for="(i, index) in btnMobileList" :icon="i.icon" :text="i.text" :small="i.small"
                  @mouseenter="handleDispaly(i.type, $event)" @mouseleave="handleDispaly(i.type, $event)"
                  @touchend="handleDispaly(i.type, $event)" @click="goToWebsite(i.type, $event)" class="my-3 md:my-5">
                </SlgBtn>
              </div>
            </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(current == 'BTN2' ? 'IOS' : 'Android')" 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 w-40">
                <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 absolute top-0 left-0 z-[2]" />
        <div
          class="text-sm md:text-base z-40 px-5 md:px-20 text-white text-justify absolute top-0 left-0 bottom-0 right-0 mx-auto pt-10 md:pt-[80px]">
        <p class="text-lg font-semibold text-center pb-6 md:text-3xl">
          国内领先的兼具数字商品与数字藏品的电商平台
        </p>
        <p class=" px-5  text-lightGray">
          <div class="pb-5  text-lightGray">   上链购，为国内较早的资产数字化应用平台，亦是目前国内极具领先性地将数字商品与数字藏品进行虚实融合应用的平台。平台兼具数字商品与数字藏品两种资产形态，数字商品可溯源交易，让货权流通更便捷；数字藏品是文化艺术所属权的唯一认证凭证，深受年轻人喜爱，更好地传播品牌文化价值。未来，上链购将融合社交与域名系统，以扎实的Web3.0技术开启元宇宙数字经济。</div>
          <div class=" text-lightGray">上链购诞生于2018年，定位虚实融合，合作过许多品牌案例，荣获诸多荣誉。2018年中秋节与杭州百年老字号“知味观”联合推出区块链月饼，获央视CCTV报道；2019年为阳澄湖大闸蟹数字化，同年荣获“2019中国优秀区块链解决方案”和“2019年典型网络可信服务应用案例”称号；2020年上链购荣获《区块链行业应用技术案例》一等奖；2021年底与西湖区西湖龙井合作防伪溯源与数字化营销；2022年上链购成为由信通院发起的可信区块链数字藏品首批成员单位。</div>
          <div class="pt-5  text-lightGray">上链购采用复杂美科技国产自研的Chain33开源区块链底层框架（https://github.com/33cn/chain33）。 Chain33具备平行链扩展、分片存储、零知识证明、以太坊生态兼容等技术特色，被多家央企、国企应用，并获得他们高度认可。已完成BSN的适配对接，已通过网信办备案、网信办区块链安全评测、信通院性能与功能评测、赛迪区块链评测、工信部5所评测。</div>
        </p>

        </div>
              
      </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-16 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 w-cardWidth md:w-1/3" :small="c.small"></Card>
      </div>
      <div class=" text-center text-xs px-4 md:text-sm pb-9 text-gray-800">杭州库链科技有限责任公司   浙网信备33010622759959570022号</div>
    </div>
  </div>
</template>

<style>
</style>
