<script setup lang="ts">
const OSS_URL = import.meta.env.VITE_OSS_URL
const loadBg = `url(${OSS_URL}/urm/phonics_load_bg.svg) center/contain no-repeat`

const progress = computed(() => '20%')

const wordList = ref(
  Array(4).fill({
    cover:
      'https://s3-alpha-sig.figma.com/img/9a9a/a3c3/8b997b7a28dbff987b934c4fc8f55c5b?Expires=1729468800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=HSoas6r9hxYKe6xBbqv1YmDmVbYyIeagO58aEBPFMzQEj5i7phB~DdcdccxbC-qKQDasKgtVGNrdGHNt7gRYAynCyy0Ix5AvCq9yN4DRrmGGB2szWFZDOCc9FiNSqmq94NayikIdq7Q24OkshG~FcZgJcvVXaOKbPYkhXyW5aZlM7SJ109Bm4uK006REQCcnOkcFtuqEJ8k9eRair-umKMlwjFPw6DpR28NI6N719BIGUKIpMFQGsN-yOX0XlxNr5UgfGYcP6dZiYhzKZ0Ajc7hrSoXyVoy5SHCqBoBlen3cQf3YeqPWy3FO-0AjUs-F2Ccbg1u1sNL20mjQqlsySQ__',
    word: 'swim',
    symbol: '/swim/',
    wordClass: 'adj',
    mean: '游泳',
  }),
)
</script>
<template>
  <div class="page">
    <div class="content">
      <div class="title">
        <div class="title-text">sw</div>
        单词表
      </div>
      <div class="words">
        <div v-for="(item, idx) in wordList" :key="idx" class="word-item">
          <img :src="item.cover" />
          <div class="right">
            <div class="hl">{{ item.word }}</div>
            <div>{{ item.symbol }}</div>
            <div>
              <Icon :name="`part_${item.wordClass}`" width="auto" height="38" />
              {{ item.mean }}
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="progress">
          <div class="strip"></div>
        </div>
        <span class="num">{{ progress }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  @include main_bg;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 1720px;
    height: 84.83vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: v-bind(loadBg);
    position: relative;
    margin-top: 4.17vh;
    .title {
      min-width: 300px;
      height: 9vh;
      background: #faffff;
      border-radius: 3.33vh 3.33vh 0 0;
      position: absolute;
      top: -6vh;
      left: 50%;
      transform: translateX(-50%);
      font-family: $font-special;
      font-size: 3.33vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 48px;
      &-text {
        width: auto;
        height: 6.33vh;
        line-height: 6.33vh;
        border-radius: 1.67vh;
        padding: 0 40px;
        background: #fb9fd5;
        margin-right: $space-2;
      }
    }
    .words {
      width: 100%;
      padding: 15.5vh 48px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .word-item {
        display: flex;
        align-items: center;
        img {
          width: 370px;
          height: 25vh;
          object-fit: cover;
          border-radius: 3.33vh;
          margin-right: $space-3;
        }
        .right {
          color: $font-tag-color;
          div {
            width: 346px;
            height: 6.67vh;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0.17vh solid #fff01f;
            border-radius: 1.67vh;
            font-size: 2.83vh;
            margin-bottom: $space-3_h;
            &:last-child {
              margin-bottom: 0;
            }
            .x-icon {
              margin-right: $space-2;
            }
          }
          .hl {
            background: #fff01f;
          }
        }
      }
    }
  }

  .box {
    position: absolute;
    bottom: 4vh;
    display: flex;
    align-items: center;
    .progress {
      width: 1500px;
      height: 2.67vh;
      border-radius: 2.5vh;
      background: rgba(0, 0, 0, 0.65);
      box-shadow: 0 0 0.42vh 0 rgba(0, 0, 0, 0.25) inset;

      .strip {
        // transition: width 0.3s linear;
        width: v-bind(progress);
        height: 100%;
        background: $theme-color;
        border-radius: 2.5vh;
        position: relative;
        background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
        box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);

        .x-icon {
          position: absolute;
          right: -80px;
          top: -14.17vh;
        }
      }
    }
    .num {
      color: $font-color;
      font-family: $font-special;
      font-size: 2.67vh;
      line-height: 1.5em;
      margin-left: $space-3;
    }
  }
}
</style>
