<script setup lang="ts">
import { useRouter } from 'vue-router'
import { XMessage } from '@/hooks'

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`

const router = useRouter()
const appList = [
  // {
  //     appName: '自然拼读',
  //     // path: '/subject/happyRead/phonics',
  //     iconPath: `${OSS_URL}/urm/artifact_ziranpindu.png`,
  // },
  {
    appName: '短篇阅读',
    path: '/subject/happyRead/shortReading',
    iconPath: `${OSS_URL}/urm/artifact_duanpianyuedu_2.png`,
  },
  {
    appName: '名著阅读',
    // path: '/subject/happyRead/classicRead',
    iconPath: `${OSS_URL}/urm/artifact_mingzhuyuedu_2.png`,
  },
]
function onOpen(item: anyObj) {
  if (!item.path) return XMessage.success(`该功能正在施工中，敬请期待！`)
  router.push(item.path)
}
</script>
<template>
  <div class="page">
    <BackBar leftText="乐读" class="backBar" />
    <div class="content">
      <div class="list">
        <div v-for="item in appList" :key="item.appName" class="item" @click="onOpen(item)">
          <img :src="item.iconPath" />
          <!-- <div class="title">
                        <div class="name">{{ item.appName }}</div>
                    </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  @include main_bg;
  .content {
    width: 100%;
    height: calc(100% - 80px - 52px);
    margin-top: 4.33vh;
    display: flex;

    .list {
      width: 100%;
      height: calc(100% - 6.67vh);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 100px;

      .item {
        border-radius: $radius-5;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        // background: v-bind(app_bg);
        cursor: pointer;

        .title {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 100%;
          .name {
            position: absolute;
            bottom: 5.33vh;
            width: 100%;
            font-family: $font-special;
            font-size: 3.67vh;
            line-height: 6.67vh;
            text-align: center;
          }
        }

        img {
          width: 47.5vh;
          height: 47.5vh;
          z-index: 1;
        }
      }
    }
  }
}
</style>
