<script setup lang="ts">
import { reactive } from 'vue'
import V3LiveTalk from 'v3-live-talk'
import 'v3-live-talk/dist/style.css'

interface TalkOptions {
  url: string
  imei: string
  chn: number
  enabled: boolean
  lang: string
  sampleRate: 16000
}

const _data: TalkOptions = {
  url: 'ws://localhost:9090/ws/talk',
  imei: '10000012348',
  chn: 1,
  enabled: false,
  lang: 'zh-cn',
  sampleRate: 16000
}

const self = reactive(_data)
</script>

<template>
  <div>
    <V3LiveTalk
      :ws="self.url"
      :imei="self.imei"
      :chn="self.chn"
      :sample-rate="self.sampleRate"
      :lang="self.lang"
      v-model:enabled="self.enabled"
    />

    <div style="margin-top: 20px;">
      <button @click="self.enabled = true">打开对讲</button>
      <button @click="self.enabled = false">关闭对讲</button>
    </div>
  </div>
</template>