<template>
  <div class="bg-white md:min-w-bodySet mx-auto">
    <div class="banner bg-gradient-to-r from-white to-bannerBgEndColor">
      <div class="w-bodySet mx-auto pt-24">
        <div :style="{ backgroundImage: `url(${getImgUrl('banner')})` }" class="bg-cover">
          <div class="w-1/2 pl-36 py-36">
            <div class="text-4xl font-semibold text-headerMain">
              区块链协同溯源+商城
              <br />追溯商品全流程
            </div>
            <div
              class="text-base text-contentMain mt-5"
            >基于区块链技术的存证溯源服务系统，面向企业和政府部门提供支持数据上链、流程化办公、任务协同、资产数字化的高级版存证溯源服务。</div>
            <div class="flex flex-row mt-6">
              <MainButton size="large" text="立即体验" />
              <div class="pl-2"></div>
              <MainButton size="large" text="预约演示" theme="second" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bar bg-mainBlue text-white text-sm py-3">
      <div class="flex flex-row w-8/12 mx-auto justify-around">
        <div class="flex flex-row items-center border-r border-indigo-600">
          <svg-icon iconClass="document" class="w-9 h-9 pr-3" />
          <span class="pr-36">链上存证 防止篡改</span>
        </div>
        <div class="flex flex-row items-center border-r border-indigo-600">
          <svg-icon iconClass="suyuan" class="w-9 h-9 pr-3" />
          <span class="pr-36">数字通证 追溯源头</span>
        </div>
        <div class="flex flex-row items-center">
          <svg-icon iconClass="data" class="w-9 h-9 pr-3" />
          <span class="pr-36">数据验真 真实可靠</span>
        </div>
      </div>
    </div>
    <div class="tab">
      <div class="text-2xl font-semibold text-gray-700 text-center mt-14">多样化溯源类型，全面满足企业需求</div>
      <div
        class="w-6/12 mx-auto flex flex-row mt-12 justify-center text-center border border-gray-200 rounded-lg"
      >
        <div
          :class="styleClass.homeTab"
          class="rounded-l-lg"
          @mouseenter="handleTabSwitch(NAV_EVENT.NAV1)"
        >数据存证</div>
        <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV2)">协同溯源</div>
        <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV3)">接口存证</div>
        <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV4)">区块链商城</div>
        <div
          :class="styleClass.homeTab"
          class="rounded-r-lg"
          @mouseenter="handleTabSwitch(NAV_EVENT.NAV5)"
        >区块链验真</div>
      </div>
      <div class="pannel w-6/12 mx-auto cursor-default">
        <TabCard :data="nav[currentNav]">
          <template #dataProve v-if="currentNav == 0">
            <div class=" flex flex-row w-1/2">
              <div class=" w-1/2">
                <div class="flex flex-row items-center">
                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                  <div class="text-gray-400 text-xs">自动上链</div>
                </div>
                <div class="flex flex-row items-center mt-6">
                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                  <div class="text-gray-400 text-xs">自动增量存证</div>
                </div>
              </div>
              <div class=" w-1/2">
                <div class="flex flex-row items-center">
                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                  <div class="text-gray-400 text-xs">数据统计</div>
                </div>
                <div class="flex flex-row items-center mt-6">
                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
                  <div class="text-gray-400 text-xs">定制查询条件</div>
                </div>
              </div>
            </div>
          </template>
        </TabCard>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import styleClass from '@/assets/style/style.module.css';
import nav from "@/context/provenanceType"
import { computed, ref } from 'vue';
import TabCard from '@/components/tabCard.vue';


const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})



/* handle tab switch */
enum NAV_EVENT {
  NAV1,
  NAV2,
  NAV3,
  NAV4,
  NAV5
}

let currentNav = ref(0)
const handleTabSwitch = (type: NAV_EVENT) => {
  switch (type) {
    case NAV_EVENT.NAV1:
      currentNav.value = 0
      break
    case NAV_EVENT.NAV2:
      currentNav.value = 1
      break
    case NAV_EVENT.NAV3:
      currentNav.value = 2
      break
    case NAV_EVENT.NAV4:
      currentNav.value = 3
      break
    case NAV_EVENT.NAV5:
      currentNav.value = 4
      break
  }
}

const navItem = computed(() => {
  return nav[currentNav.value]
})
</script>
