<script>
export default {
  name: "AppSubTitle",
  label: "副标题",
  props: {
    text: {default: "副标题"}
  },
  data() {
    return {
      pinyinText: ""
    }
  },
  methods: {
    async getPinyin(text) {
      const wait = (t = 500) => new Promise(resolve => setTimeout(resolve, t))
      while (!window.pinyinPro) await wait()
      const {pinyin} = window.pinyinPro
      this.pinyinText = pinyin(text, {toneType: 'none'}).toUpperCase()

    }
  },
  watch: {
    text: {
      immediate: true,
      handler(v) {
        v && this.getPinyin(v)
      }
    }
  }
}
</script>

<template>
  <section class="AppSubTitle">
    {{ text }}
    <span v-text="pinyinText"/>
    <div class="right">
      <slot name="right"/>
    </div>
  </section>
</template>
