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

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

const MESSAGE = useMessage()

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

const { chatroom, reload } = defineProps<{
  chatroom: ChatroomPublic
  reload: () => void
}>()

function submit() {
  api
    .post(`/chatroom/${chatroom.id}/`, JSON.stringify(chatroom))
    .then(() => {
      MESSAGE.success('成功修改聊天室基本信息~')
      showModal.value = false
      reload() // 由调用方重新获取聊天室数据
    })
    .catch((err) => {
      MESSAGE.error(`修改聊天室基本信息失败：${err}`)
    })
}
</script>

<template>
  <n-modal
    v-model:show="showModal"
    title="修改聊天室信息"
    style="width: 800px; max-height: 600px"
    content-scrollable
    preset="card"
  >
    <n-form label-placement="left" label-align="right" label-width="auto" :model="chatroom">
      <n-form-item label="聊天室名称" path="name">
        <n-input v-model:value="chatroom.name" />
      </n-form-item>
      <n-form-item label="聊天室描述" path="description">
        <n-input v-model:value="chatroom.description" type="textarea" :rows="3" />
      </n-form-item>
      <n-form-item label="特色图片" path="feature_image">
        <input-file v-model:value="chatroom.feature_image" />
      </n-form-item>
      <n-form-item label="保存">
        <n-button secondary type="primary" @click="submit()">保存</n-button>
      </n-form-item>
    </n-form>
  </n-modal>
</template>

<style scoped></style>
