<template>
  <div class="textToaudio m-4">
    <div class="tablehader flex justify-between items-center mb-2.5">
      <div class="title">文字语音互转</div>
      <div class="bottomList">
        <n-space>
          <n-button type="primary"> 音转文 </n-button>
          <n-button type="primary"> 文转音 </n-button>
        </n-space>
      </div>
    </div>
    <!-- <n-scrollbar style="max-height: calc(100vh - 100px)" trigger="none"> -->
    <n-data-table
      pagination-behavior-on-filter="first"
      :columns="columns"
      :data="data"
      :pagination="paginationReactive"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, h, reactive } from 'vue'
import { NButton,  } from 'naive-ui'
defineProps<{ msg: string }>()
const paginationReactive = reactive({
  page: 2,
  pageSize: 5,
  showSizePicker: true,
  pageSizes: [3, 5, 7],
  onChange: (page) => {
    paginationReactive.page = page
  },
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
  }
})
const columns = [
  {
    title: 'Name',
    key: 'name'
  },
  {
    title: 'Age',
    key: 'age'
  },
  {
    title: 'Address',
    key: 'address',
    defaultFilterOptionValues: [],
    filterOptions: [
      {
        label: 'London',
        value: 'London'
      },
      {
        label: 'New York',
        value: 'New York'
      }
    ],
    filter(value, row) {
      return !!~row.address.indexOf(String(value))
    }
  }
]
const data = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park'
  },
  {
    key: 3,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
  {
    key: 4,
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park'
  }
]
</script>

<style lang="sass" scoped>
a
  color: #42b983

label
  margin: 0 0.5em
  font-weight: bold

code
  background-color: #eee
  padding: 2px 4px
  border-radius: 4px
  color: #304455
</style>
