<template>
  <el-dialog
    :model-value="props.addEditDialogVisible"
    @update:model-value="
      (val: boolean) => emits('update:addEditDialogVisible', val)
    "
    :close-on-click-modal="false"
    :title="props.addiseditTitle"
    width="500"
    @close="handleClose"
  >
    <div>
      <span>目录名称：</span>
      <el-input
        v-model="input"
        style="width: 240px"
        placeholder="请输入目录名称"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCloseclick">取消</el-button>
        <el-button type="primary" @click="handleAddclick"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  // @ts-ignore
import { defineProps, defineEmits, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps<{
  addEditDialogVisible?: boolean;
  editvaloraddId?: any;
  addiseditTitle?: string;
}>();
const emits = defineEmits<{
  'update:addEditDialogVisible': [value: boolean];
  addoreditclick: [value: { title: string; editvaloraddId: any }];
}>();
watch(
  () => props.editvaloraddId,
  (newVal) => {
    if (newVal) {
      input.value = newVal?.title;
    }
  },
  {
    deep: true,
  },
);
const input = ref('');
// 关闭对话框
const handleClose = () => {
  console.log('关闭对话框');
};
const handleCloseclick = () => {
  emits('update:addEditDialogVisible', false);
};
const handleAddclick = () => {
  if (!input.value) {
    ElMessage.error('请输入目录名称');
    return;
  } else {
    emits('addoreditclick', { title: input.value, editvaloraddId: props.editvaloraddId });
  }
};
</script>
