<template>
    <el-dialog v-model="visible" title="添加项目" @close="handleClose" width="300px" :close-on-click-modal="false">
        <el-form label-width="100px">
            <el-form-item label="项目名称：">
                <el-input v-model="projectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
        </el-form>
        <div class="oper">
            <el-button type="primary" :icon="Select" @click="handleConfirm">确定</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Select } from "@element-plus/icons-vue";
import { emitter } from "~/utils/eventBus";
const { $toastMessage } = useNuxtApp();
import { generateGUID } from "~/utils/common";
import { createProject } from '~/services/projectService'
import { EMIT_COMMAND } from '~/utils/commandTypes'
// 项目名称
const projectName = ref('');
// 定义属性
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: false,
        required: true
    },
    moduleId: {
        type: String,
        required: true
    }
});

const visible = ref(props.showDialog);

const emit = defineEmits(['update:changeShowDialog']);
const handleClose = () => {
    visible.value = false;
    emit("update:changeShowDialog", false);
};


// 确定按钮事件
const handleConfirm = async () => {
    if (!projectName.value) {
        $toastMessage.warning('请输入项目名称！');
        return;
    }
    let token = generateGUID();
    const response = await createProject(props.moduleId, projectName.value, token);
    if (response) {
        emitter.emit(EMIT_COMMAND.CONFIRM_ADD_PROJECT, { moduleId: props.moduleId, projectName: projectName.value, token });
        handleClose();
    }
    else {
        $toastMessage.error("添加失败！");
        return;
    }
};

</script>
<style scoped>
.oper {
    display: flex;
    justify-content: right;
    flex-flow: inline-end;
    margin-top: 15px;
}
</style>