<template>
  <div class="engine-config">
    <el-form ref="form" :model="form" label-width="180px">
      <el-form-item label="语音引擎服务链接">
        <el-input v-model="form.url" />
      </el-form-item>
      <el-form-item label="语音引擎访问令牌">
        <el-input v-model="form.access_token" />
      </el-form-item>
      <el-form-item label="语音引擎应用ID">
        <el-input v-model="form.app_id" />
      </el-form-item>
      <el-form-item label="拼音转语音的方式">
        <el-radio-group v-model="form.pinyin_to_audio_type">
          <el-radio :label="0">拼读</el-radio>
          <el-radio :label="1">直读</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setSpeechEngineConfig">应用</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ShareConfig'
};
</script>

<script setup>
import { ref } from 'vue';
import { SetSpeechEngineConfig, GetSpeechEngineConfig } from '@/api/settings';
import { Message } from 'element-ui';

let form = ref({
  url: '', // 语音引擎服务链接
  access_token: '', // 语音引擎访问令牌
  app_id: '', // 语音引擎应用ID
  pinyin_to_audio_type: 0 // 拼音转语音的方式 0: 拼读 1: 直读
});

GetSpeechEngineConfig().then(({ url, access_token, app_id, pinyin_to_audio_type }) => {
  form.value = {
    url,
    access_token,
    app_id,
    pinyin_to_audio_type
  };
});

function setSpeechEngineConfig() {
  SetSpeechEngineConfig(form.value).then(() => {
    Message.success('设置语音引擎配置成功');
  });
}
</script>

<style lang="scss" scoped>
.engine-config {
  .el-input {
    width: 80%;
  }
}
</style>
