<template>
  <el-row type="flex" align="middle">
    <el-button type="text" size="small" :loading="loading" icon="iconfont iconClock" title="语音播报"
               @click="getSpeechByContent"/>
    <ai-audio v-if="speech" :src="speech" skin="flat"/>
  </el-row>
</template>

<script>
export default {
  name: "AiTransSpeech",
  props: {
    instance: {type: Function, required: true},
    content: String
  },
  data() {
    return {
      speech: "",
      loading: false
    }
  },
  methods: {
    getSpeechByContent() {
      this.loading = true
      this.instance.post("/app/msc/transToSpeech", null, {
        params: {
          fileName: "demo",
          words: this.content
        }
      }).then(res => {
        this.loading = false
        if (res && res.data) {
          let url = res.data.join("")
          this.speech = url.substring(0, url.indexOf(";"))
        }
      }).catch(() => this.loading = false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
