<script setup lang="ts">
import { computed, ref } from 'vue'
import Horn from '@/components/HornC.vue'
import { px2vw } from '@/utils'

const props = defineProps<{
  modelValue: boolean
  data: {
    tips: any[]
    spell: string
    accent: string
    abbr: string
    ipa: string
    chinese: string
  }
}>()
const emit = defineEmits(['update:modelValue'])
defineOptions({ name: 'MemoryTips' })
const value = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
})

const horn = ref()
function play() {
  horn.value.handlePlay()
}
</script>

<template>
  <mj-dialog v-model="value" hide-footer :title="data.spell" :width="px2vw(1440)">
    <div class="memory-tips">
      <div class="main" @click="play">
        <div class="chinese">
          <AbbrImg class="abbr" :abbr="data.abbr" />
          <span class="text">{{ data.chinese }}</span>
        </div>
        <div class="voice">
          <Horn v-if="data.accent" ref="horn" :src="data.accent" readonly />
          <span class="ipa">{{ data.ipa }}</span>
        </div>
      </div>
      <div class="tips">
        <div v-for="(tip, idx) in data.tips" :key="idx" class="tip">
          <div class="title">{{ tip.method }}</div>
          <div class="content" v-html="tip.details"></div>
        </div>
      </div>
    </div>
  </mj-dialog>
</template>

<style lang="scss">
.memory-tips {
  strong {
    color: #0094dd;
  }
}
</style>

<style lang="scss" scoped>
.memory-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.67vh;
  max-height: 63.33vh;
  overflow: auto;

  .main {
    display: flex;
    align-items: center;
    column-gap: 25px;
  }

  .chinese,
  .voice {
    display: flex;
    align-items: center;
    column-gap: 15px;
    justify-content: center;
  }
  .chinese {
    display: flex;
    align-items: center;
    .text {
      font-size: 3.17vh;
      color: #4b4b68;
    }
  }
  .voice {
    display: flex;
    align-items: center;
    .ipa {
      color: #4b4b68;
      opacity: 0.65;
      font-size: 2.67vh;
    }
  }

  .tips {
    display: flex;
    flex-direction: column;
    row-gap: 2.92vh;
    .tip {
      display: flex;
      flex-direction: column;
      row-gap: 1.25vh;
      .title {
        color: #4b4b68;
        font-family: $font-special;
        font-size: 3vh;
        padding-left: 18px;
      }
      .content {
        background-color: #daf0fd;
        border-radius: 1.33vh;
        padding: 2.67vh 16px 1.67vh;
        color: #88899b;
        font-size: 2.67vh;
      }
    }
  }
}
</style>
