<template>
  <div class="voice-input-settings">
    <h4>语音设置</h4>
    <div class="settings-item">
      <span class="settings-label">语音转文字后直接发送</span>
      <el-switch
        v-model="sendDirectly"
      />
    </div>
    <div class="settings-item">
      <span class="settings-label">自动语音播报</span>
      <el-switch
        v-model="autoTTS"
      />
    </div>
    <div class="settings-item">
      <span class="settings-label">语音播报音色</span>
      <el-select v-model="ttsVoice" placeholder="默认" style="width: 180px">
        <el-option
          v-for="voice in zhVoices"
          :key="voice.name"
          :label="voice.name + (voice.lang ? ' (' + voice.lang + ')' : '')"
          :value="voice.name"
        />
        <el-option label="默认" value="" />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useSpeakStore } from '@/store/speak'
import { getTTSVoices } from '@/utils/speak'

const speakStore = useSpeakStore()

const sendDirectly = computed({
  get: () => speakStore.sendDirectly,
  set: (val) => speakStore.setSendDirectly(val)
})
const autoTTS = computed({
  get: () => speakStore.autoTTS,
  set: (val) => speakStore.setAutoTTS(val)
})

const ttsVoice = computed({
  get: () => speakStore.ttsVoice,
  set: (val) => speakStore.setTTSVoice(val)
})

const voices = ref([])
const zhVoices = computed(() =>
  voices.value.filter(v => v.lang && v.lang.toLowerCase().startsWith('zh'))
)

onMounted(async () => {
  voices.value = await getTTSVoices()
})
</script>

<style lang="scss" scoped>
.voice-input-settings {
  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    
    .settings-label {
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
  }
}
</style> 