<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import {save} from '@/api/template'
const emits = defineEmits(['closeClassDialog', 'classrefresh'])
const { t } = useI18n()
const classform = ref({ name: '', nodeType: 'folder', templateType: 'self', level: 0 })
const ruleFormRef = ref<FormInstance>()
const rules = ref({
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ]
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (classform.value.name === t('work_branch.recently_used')) {
        ElMessage({
            message: t('template_manage.illegal_name_hint'),
            type: 'error',
            showClose: true
        })
        return
    }
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            save({ ...classform.value }).then(() => {
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                    showClose: true
                })
                emits('classrefresh')
                emits('closeClassDialog')
            })
        } else {
            ElMessage({
                message: '添加失败',
                type: 'error',
                showClose: true
            })
        }
    })
}
function cancel() {
    emits('closeClassDialog')
}
</script>
<template>
    <div class="template-import">
        <el-form ref="ruleFormRef" :rules="rules" :model="classform" label-width="80px">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="classform.name" />
            </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: flex-end;">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </div>
    </div>
</template>

<style lang="less" scoped>
.preview {
    margin-top: -8px;
    border: 1px solid #e6e6e6;
    height: 300px !important;
    overflow: auto;
    background-size: 100% 100% !important;
    border-radius: 4px;
    margin-bottom: 10px;
}

.flex-template {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input {
        margin-right: 2px;
        flex: 1;
    }
}

.class-add {
    width: 100%;
    background-color: transparent;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
}

.class-add:hover {
    background-color: #434343;
    ;
}
</style>