<script setup lang="ts">
import { useRouter } from 'vue-router'
interface yingbiaoList {
  children: anyObj[]
  name: string
}
interface yinbiaoItem {
  audio: string
  examples: anyObj[]
  method: string
  name: string
  video_mouth: string
  video_organ: string
}
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const itemBg = `url(${OSS_URL}/urm/phoneticTranscription_item_bg.png) `
const text_bg = `url(${OSS_URL}/urm/phoneticTranscription_text_bg.png) 100% / contain no-repeat`

const router = useRouter()
const list = ref<yingbiaoList[]>([])

function handleDetail(str: string) {
  console.log('查看详情')
  router.push(`/subject/phoneticTranscription/${str}`)
}
function init() {
  fetch(`${OSS_URL}/data_JSON/yinbiao_all_new.json`)
    .then(res => {
      if (!res.ok) {
        return
      }
      return res.json()
    })
    .then(data => {
      console.log(data)
      list.value = data
    })
}

onActivated(() => {
  init()
})

onMounted(() => {
  // getSelectList();
})
</script>
<template>
  <div class="page">
    <div class="top">
      <BackBar leftText="音标" class="backBar" />
    </div>
    <div class="content">
      <div class="g-container">
        <div v-for="(item, index) in list" :key="item.name" class="list">
          <div
            class="content-title"
            :style="{
              background: text_bg,
            }"
          >
            <LineFont :text="['元音', '辅音'][index]" size="38" offset="4" />
          </div>
          <div v-for="row in item.children" :key="row.name" class="list-item-one">
            <div class="leftTitle">
              {{ row.name }}
            </div>
            <div class="right-list">
              <div
                v-for="i in row.children"
                :key="i.name"
                class="right-content"
                @click="handleDetail(i.name)"
              >
                {{ i.name }}
              </div>
            </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;
  text-align: center;
  .content {
    width: 1790px;
    height: 86vh;
    padding: 10vh 0px 3.33vh;
    .g-container {
      width: 1790px;
      height: 72.67vh;
    }
    .list {
      padding: 2.67vh 28px 0.67vh 32px;
      border-radius: 1.67vh;
      background-color: #f2fffe;
      margin-top: 6.67vh;
      margin-left: 120px;
      background-image: v-bind(itemBg);
      background-size: 101%;
      background-position: left top;
      background-repeat: no-repeat;
      position: relative;
      &:first-child {
        margin-top: 0;
        background-size: cover;
      }
      .content-title {
        position: absolute;
        width: 112px;
        height: 12.33vh;
        left: -110px;
        top: 5.33vh;
        line-height: 1;
        padding: 2.92vh 24px 0 48px;
        span {
          line-height: 1;
          text-shadow: 0 0.5vh 0.5vh rgba(0, 0, 0, 0.15);
          &::after {
            top: 0.42vh;
          }
        }
      }
      .list-item-one {
        display: flex;
        &:last-child {
          margin: 0;
        }
        .leftTitle {
          display: flex;
          flex-shrink: 0;
          width: 170px;
          height: 7.33vh;
          justify-content: center;
          align-items: center;
          border-radius: 1.67vh;
          background: #9efcf8;
          color: $font-color;
          font-family: $font-special;
          font-size: 3.33vh;
          font-style: normal;
          font-weight: 400;
          letter-spacing: 5px;
        }
        .right-list {
          display: flex;
          flex-wrap: wrap;

          .right-content {
            display: flex;
            width: 8vh;
            height: 7.33vh;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            border-radius: 1.67vh;
            border: 0.5vh solid #9efcf8;
            background: #f2fffe;
            box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
            margin-left: 24px;
            margin-bottom: 1.67vh;
            font-family:
              'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
              Verdana, sans-serif;
            font-size: 3.17vh;
            font-weight: 900;
            color: $font-color;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
