<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="在当前文件夹下创建新文件夹"
    @ok="handleSubmit"
  >
    <div style="height: 3vh">
      <a-row style="width: 100%">
        <a-col :span="5" class="col"> 新文件夹名： </a-col>
        <a-col :span="19" class="col">
          <a-input v-model:value="newname" placeholder="请输入新文件夹名称"></a-input>
        </a-col>
      </a-row>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { CreateMediaFolder } from '@/api/demo/mediaLibrary';
  import { FolderOpenOutlined } from '@ant-design/icons-vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const emits = defineEmits(['handleSuccess']);

  // 上级文件夹的id
  let parentKey = ref();
  const newname = ref();

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    parentKey = data.parentKey;
    newname.value = null;
  });

  // 提交
  async function handleSubmit() {
    if (!newname.value) {
      return createMessage.warn('新文件名不能为空');
    }
    try {
      CreateMediaFolder({
        name: newname.value,
        parentKey: parentKey,
      }).then((res) => {
        if (res) {
          createMessage.success('创建新文件夹成功！');
          emits('handleSuccess');
          closeModal();
        }
      });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang="less" scoped>
  .col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
