<template>
  <el-dialog
    v-model="visible"
    title="新建文件夹"
    width="400px"
    class="custom-dialog"
  >
    <el-input 
      v-model="folderName" 
      placeholder="请输入文件夹名称"
      clearable
      @keyup.enter="handleCreate"
      autofocus
    >
      <template #prefix><el-icon><Folder /></el-icon></template>
    </el-input>
    <template #footer>
      <el-button @click="visible = false">
        <el-icon><Close /></el-icon>
        <span style="margin-left: 4px">取消</span>
      </el-button>
      <el-button type="primary" @click="handleCreate" :disabled="!folderName.trim()">
        <el-icon><Check /></el-icon>
        <span style="margin-left: 4px">保存</span>
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Close, Check, Folder } from '@element-plus/icons-vue'

const props = defineProps({ modelValue: Boolean })
const emit = defineEmits(['update:modelValue', 'create'])

const visible = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})

const folderName = ref('')

watch(visible, (v) => {
  if (v) folderName.value = ''
})

const handleCreate = () => {
  if (!folderName.value.trim()) return
  emit('create', folderName.value.trim())
  visible.value = false
}
</script>
