<script setup lang="ts">
import { useMessage } from 'naive-ui'
import { ref } from 'vue'

import InputFile from '@/components/file/InputFile.vue'
import { api } from '@/tools/web.js'
import type { ChatroomPublic } from '@/types/chatroom.js'
import type { ReturnDto } from '@/types/response.js'

const MESSAGE = useMessage()

const showModal = defineModel<boolean>('showModal', { required: true })

const createChatroomForm = ref<ChatroomPublic>({
  id: 0,
  name: '',
  description: '',
  feature_image: '',
})

function onSubmit() {
  api
    .post('/chatroom/', JSON.stringify(createChatroomForm.value))
    .then((res) => res.data as ReturnDto)
    .then((data) => {
      if (data.success) {
        MESSAGE.success('聊天室创建成功 ~')
        showModal.value = false
      } else {
        throw TypeError('未知原因地后端业务失败')
      }
    })
    .catch((err) => {
      MESSAGE.error(`聊天室创建失败：${err}`)
    })
}
</script>

<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    title="创建聊天室"
    content-scrollable
    style="width: 800px"
  >
    <n-form
      :model="createChatroomForm"
      label-placement="left"
      label-align="right"
      label-width="auto"
    >
      <n-form-item path="name" label="名称">
        <n-input v-model:value="createChatroomForm.name" />
      </n-form-item>
      <n-form-item path="description" label="简介">
        <n-input type="textarea" v-model:value="createChatroomForm.description" />
      </n-form-item>
      <n-form-item path="feature_image" label="特色图像">
        <input-file v-model:value="createChatroomForm.feature_image" />
      </n-form-item>
      <n-form-item label="确认？">
        <n-button secondary type="primary" @click="onSubmit()">确认！</n-button>
      </n-form-item>
    </n-form>
  </n-modal>
</template>

<style scoped></style>
