<template>
  <n-modal v-model:show="showModal" :on-update:show="handleShow">
    <n-card
      style="width: 600px"
      title="语音转文字"
      :bordered="false"
      size="huge"
      role="dialog"
      transform-origin="center"
      aria-modal="true"
    >
      <template #header-extra>
        <n-icon size="30" @click="emits('close')" class="close-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 512 512"
          >
            <path
              d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
              fill="currentColor"
            ></path>
          </svg>
        </n-icon>
      </template>

      <n-form
        ref="formRef"
        :model="form"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        :style="{
          maxWidth: '100%'
        }"
      >
        <n-form-item label="名称" path="inputValue">
          <n-input v-model:value="form.name" />
        </n-form-item>
      </n-form>

      <n-flex>
        <n-upload
          accept=".mp3,.wmv"
          :default-upload="false"
          :max="1"
          @change="handleFileChange"
        >
          <n-upload-dragger>
            <div style="margin-bottom: 12px">
              <n-icon size="48" :depth="3">
                <ArchiveIcon />
              </n-icon>
            </div>
            <n-text style="font-size: 16px"> 点击或者拖动上传音频</n-text>
            <n-p depth="3" style="margin: 8px 0 0 0">
              <!--              请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码-->
            </n-p>
          </n-upload-dragger>
        </n-upload>
      </n-flex>

      <template #footer>
        <n-flex justify="end">
          <n-button type="primary" @click="handleSave">提交并转写</n-button>
        </n-flex>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import {
  NUpload,
  NUploadDragger,
  NP,
  NText,
  useMessage,
  NForm,
  NFormItem
} from 'naive-ui'
import { saveTOSTT } from '@/api'
import { useMainStore } from '@/store'
import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
import type { UploadFileInfo } from 'naive-ui'

const main = useMainStore()
const showModal = ref(false)
const message = useMessage()

const form = reactive<{ file: File | null; name: string }>({
  file: null,
  name: ''
})

const emits = defineEmits(['close', 'submit'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  isEditing: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  }
})
const handleShow = (show: boolean) => {
  if (!show) {
    emits('close')
  }
}

const handleSave = async () => {
  if (form.file) {
    const data = {
      file: form.file,
      name: form.name,
      num: main.sceneCode
    }
    await saveTOSTT(data)
    message.success('新增成功！')
    emits('submit')
  } else {
    message.error('请上传语音文件')
  }
}
const handleFileChange = (options: { fileList: UploadFileInfo[] }) => {
  form.file = options.fileList[0].file
}

watchEffect(() => {
  showModal.value = props.show
})
</script>
<style scoped lang="scss">
.close-icon {
  cursor: pointer;
}

.card-select {
  min-height: 200px;

  .card-item {
    &:hover {
      cursor: pointer;
      border-color: var(--primary-color);
    }

    &.active {
      border-color: var(--primary-color);
    }
  }
}
</style>
