<template>
  <!-- 基础设置页面 class="pointer-events-auto"-->
  <div>
    <n-drawer
      v-model:show="active"
      :width="240"
      placement="right"
      :trap-focus="false"
      :block-scroll="false"
      :show-mask="false"
      :mask-closable="false"
      to="#drawer-target"
      style="--n-body-padding: 0px"
    >
      <n-drawer-content title="数字人播报">
        <div class="drawerContent m-5">
          <!-- <div class="text-lg my-2.5">数字人播报</div>-->

          <n-list
            hoverable
            clickable
            style="--n-color-modal: none"
            :show-divider="false"
          >
            <n-list-item v-for="(vi, index) in list" :key="index">
              当前空间视频ID：
              <n-space></n-space>
              <!--              {{ vi.url}}-->
              {{ vi.sid }}

              <n-select
                v-model:value="bindAudioId"
                :options="audioOptions"
              ></n-select>
            </n-list-item>
          </n-list>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  computed,
  onMounted,
  // reactive,
  onUnmounted,
  watchEffect
} from 'vue'

import { useMainStore } from '@/store'
import { NList, NListItem } from 'naive-ui'
import { fetchTtsList, SaveTOTTSParams } from '@/api'

defineProps<{ msg: string }>()
const main = useMainStore()
const active = ref(true)

const boxVideos = computed(() => main.sceneInfo.boxVideos)

const list = ref<any[]>([])

const bindAudioId = ref()
const audioOptions = ref<any[]>([])

onMounted(async () => {
  active.value = true
  const res = await fetchTtsList(main.sceneCode)
  if (res) {
    const arr = Array.from(res as any as SaveTOTTSParams[])
      .filter((i) => i.type === 'tts')
      .map((item) => {
        return {
          label: item.document,
          value: item.id
        }
      })
    console.log('array', arr)
    audioOptions.value = arr
  }

  watchEffect(() => {
    if (boxVideos.value?.length) {
      // debugger
      const data = JSON.parse(boxVideos.value)
      console.log('boxVideos', data)
      list.value = data
    }
  })
})
onUnmounted(() => {
  // setWidthSceneRef(0)
})
</script>

<style lang="sass" scoped>
.list
  .listItem
    div
      display: flex
      justify-content: space-between
</style>
