<script>
export default {
  name: "AppSubTitle",
  label: "副标题",
  data() {
    return {
      text: "副标题",
      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"/>
  </section>
</template>

<style scoped>
.AppSubTitle {
  height: 48px;
  padding: 8px 0 8px 38px;
  margin-bottom: 24px;
  box-sizing: border-box;
  line-height: 32px;
  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.AppSubTitle span {
  font-size: 12px;
  color: #215A8E;
}
</style>
