<script setup lang="ts">
import { $XXL, isWebEvn, newPage } from '@/utils'
import { SHUFA_URL } from '@/page/app/app.ts'
import router from '@/router'
import sass from '@/utils/sass'

const handleClick = (buttonId: any) => {
  if (buttonId === 2) {
    if (isWebEvn) {
      newPage(SHUFA_URL)
    } else {
      $XXL.openExternalURL(SHUFA_URL)
    }
  } else {
    router.replace('/')
  }
}

const OSS_URL = import.meta.env.VITE_OSS_URL
const xxlIcon = `${OSS_URL}/icon/module_xxl.png`
const xzyIcon = `${OSS_URL}/icon/module_bjxzy.jpg`
const bg = `url(${OSS_URL}/urm/bg_login.svg) 100%/cover no-repeat`
const title_size = 68
const title_height = 112
</script>

<template>
  <div class="g-container">
    <div class="box" @click="handleClick(1)">
      <div class="bg"></div>
      <div class="inner inner1">
        <img :src="xxlIcon" class="button-image1" />
        <p>{{ sass.platform.appName }}</p>
      </div>
      <Btn width="100%" :height="title_height" :size="title_size">AI智学</Btn>
    </div>
    <div class="box" @click="handleClick(2)">
      <div class="bg"></div>
      <div class="inner inner2">
        <img :src="xzyIcon" class="button-image2" />
      </div>
      <Btn width="100%" :height="title_height" :size="title_size" type="success">AI智写</Btn>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.g-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: v-bind(bg);
  gap: 250px;

  .box {
    position: relative;
    width: 418px;
    height: 40.83vh;
    text-align: center;
    cursor: pointer;

    .bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 26.83vh;
      background-color: #f0f0f0;
      border: 0.5vh solid #ffffff;
      border-radius: 3.33vh;
    }

    .inner {
      position: relative;
      display: inline-block;
    }

    .inner1 {
      top: -7.08vh;

      p {
        line-height: 5.83vh;
        font-size: 4.33vh;
        width: 100%;
        text-align: center;
        font-family: $font-special, sans-serif;
      }
    }

    .inner2 {
      top: -5vh;
    }

    .button-image1 {
      width: 300px;
    }

    .button-image2 {
      width: 400px;
      height: auto;
    }
  }
}
</style>
