<script setup lang="ts">
import { NModal, NForm, NFormItem, NInput, NSwitch, NSpace, NButton, NIcon } from 'naive-ui'
import { CloseOutline, SaveOutline } from '@vicons/ionicons5'

defineProps<{
  show: boolean
  content: string
  isPrivate: boolean
  saving: boolean
}>()

const emit = defineEmits<{
  'update:show': [v: boolean]
  'update:content': [v: string]
  'update:isPrivate': [v: boolean]
  save: []
}>()
</script>

<template>
  <NModal :show="show" title="编辑笔记" preset="card" style="width:620px" @update:show="(v: boolean) => emit('update:show', v)">
    <NForm label-placement="top">
      <NFormItem label="笔记内容">
        <div style="width:100%">
          <NInput
            :value="content"
            type="textarea"
            :rows="6"
            placeholder="输入笔记内容…"
            :maxlength="1000"
            @update:value="(v: string) => emit('update:content', v)"
          />
          <div v-if="content.length > 500" style="margin-top:4px;font-size:12px;color:#e67e22">
            已超过 500 字（{{ content.length }}），超出部分将被截断
          </div>
        </div>
      </NFormItem>
      <NFormItem label="公开">
        <NSwitch :value="!isPrivate" @update:value="(v: boolean) => emit('update:isPrivate', !v)" />
        <span style="margin-left:8px;font-size:13px;color:#999">{{ isPrivate ? '仅自己可见' : '对团队成员公开' }}</span>
      </NFormItem>
      <NSpace justify="end" style="margin-top:12px">
        <NButton class="sky-btn" @click="emit('update:show', false)"><template #icon><NIcon size="14"><CloseOutline /></NIcon></template>取消</NButton>
        <NButton type="primary" class="sky-btn" :loading="saving" @click="emit('save')"><template #icon><NIcon size="14"><SaveOutline /></NIcon></template>保存</NButton>
      </NSpace>
    </NForm>
  </NModal>
</template>
