<template>
  <el-dialog
      :model-value="visible"
      title="新建笔记"
      width="450px"
      @close="handleClose"
      :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
      <el-form-item label="笔记标题" prop="title">
        <el-input 
            v-model="form.title" 
            autocomplete="off"
            placeholder="请输入笔记标题"
            maxlength="100"
            show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="选择分类" prop="groupingId">
        <el-cascader
            v-model="form.groupingId"
            :options="categoryOptions"
            :props="cascaderProps"
            clearable
            filterable
            placeholder="请选择笔记所属分类"
            style="width: 100%;"
        >
          <template #default="{ node, data }">
            <span class="category-option">
              <el-icon class="category-icon">
                <Folder v-if="data.children && data.children.length > 0" />
                <Document v-else />
              </el-icon>
              <span class="category-name">{{ data.grouping }}</span>
              <span v-if="data.children && data.children.length > 0" class="category-count">
                ({{ data.children.length }})
              </span>
            </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="私密笔记">
        <el-switch
            v-model="form.isPrivate"
            :active-value="1"
            :inactive-value="0"
            active-text="私密"
            inactive-text="公开"
        />
        <div class="form-item-help">私密笔记只有登录用户才能查看内容</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Folder, Document } from '@element-plus/icons-vue';
import { updateMarkdown } from '@/api/CommonApi.js';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  categoryOptions: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['update:visible', 'create-note']);

const formRef = ref(null);
const form = ref({
  title: '',
  groupingId: null,
  isPrivate: 0,
});

const rules = ref({
  title: [{ required: true, message: '请输入笔记标题', trigger: 'blur' }],
  groupingId: [{ required: true, message: '请选择分类', trigger: 'change' }],
});

// 级联选择器配置
const cascaderProps = {
  checkStrictly: true,
  emitPath: false,
  value: 'id',
  label: 'grouping',
  children: 'children'
};

watch(() => props.visible, (newVal) => {
  if (!newVal && formRef.value) {
    formRef.value.resetFields();
    form.value = { title: '', groupingId: null, isPrivate: 0 };
  }
});

const handleClose = () => {
  emit('update:visible', false);
};

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    if (valid) {
      // 创建一个临时笔记对象，不包含ID，让后端生成
      const payload = {
        id: null,
        title: form.value.title,
        groupingId: form.value.groupingId,
        fileName: form.value.title + '.md',
        content: '',
        isPrivate: form.value.isPrivate,
      };
      
      // 立即触发创建，但不传递ID，让后端生成
      emit('create-note', payload);
      handleClose();
    } else {
      ElMessage.error('请填写必要的字段');
    }
  });
};
</script>

<style scoped>
.category-option {
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-icon {
  color: #409eff;
  font-size: 16px;
}

.category-name {
  flex: 1;
}

.category-count {
  color: #909399;
  font-size: 12px;
}

.form-item-help {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.5;
}
</style>