<script lang="ts" setup>
import { onMounted } from "vue"
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"
import { getAppInfo, changeStringToQrcode } from "@/service/common"
import { mainTexts } from "./text"

const mainText =
  mainTexts[import.meta.env.VITE_APP_NAME as keyof typeof mainTexts]

let androidUrl: string
const androidQrCode = ref("")
let iosUrl: string
const iosQrCode = ref("")
onMounted(async () => {
  const titleDoms = document.getElementsByTagName("title")
  for (let i = 0; i <= titleDoms.length - 1; i++) {
    titleDoms[i].innerHTML = mainText.name
  }
  const resIos = await getAppInfo("appstore")
  if (resIos && resIos.data) {
    iosUrl = resIos.data.downloadUrl
    const res = await changeStringToQrcode(resIos.data.downloadUrl)
    if (res) {
      iosQrCode.value = res.data
    }
  }
  const resAndroid = await getAppInfo("android")
  if (resAndroid && resAndroid.data) {
    androidUrl = resAndroid.data.downloadUrl
    const res = await changeStringToQrcode(resAndroid.data.downloadUrl)
    if (res) {
      androidQrCode.value = res.data
    }
  }
})

const goToWebsite = (type: string, e: Event) => {
  console.log(type)

  if (type == "BTN1") window.open(import.meta.env.VITE_ADMIN_URL)
  else if (type == "BTN2") {
    if (iosUrl) window.open(iosUrl)
  } else if (type == "BTN3") {
    if (androidUrl) window.open(androidUrl)
  }
}

const getImgUrl = computed(() => {
  return (url: string) => {
    if (url === "Android") {
      return androidQrCode.value || mainText.logo
    } else if (url === "IOS") {
      return iosQrCode.value || mainText.logo
    } else {
      return new URL(`./assets/${url}.png`, import.meta.url).href
    }
  }
})

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,
  },
]

/* 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(import.meta.env.VITE_ADMIN_URL)
  }
}
</script>

<template>
  <div class="">
    <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"
          >
            {{ mainText.name }}数字藏品平台
          </div>
          <div class="title" v-html="mainText.slogan"></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="mainText.officialAccount" class="w-40 h-40 mb-3" />
                <p class="font-semibold text-center">扫一扫关注公众号</p>
              </div>
            </div>
          </div>
          <!-- <div class="hidden md:block justify-self-end w-60 mt-10">
            <img :src="mainText.officialAccount" class="w-60 h-60 mb-3" />
            <p class="font-semibold text-center">扫一扫关注公众号</p>
          </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 -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">
            {{ mainText.slogan2 }}
          </p>
          <p class="px-5 text-lightGray" v-html="mainText.detail"></p>
        </div>
      </div>

      <img
        :src="mainText.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 mainText.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">
        {{ mainText.company }}
      </div>
    </div>
  </div>
</template>

<style></style>
