<template>
    <div>
        <div v-if="loading" class="row">
            <div class="col-12 tx-semibold text-center text-default">
                <span class="spinner-border spinner-border-sm"></span>
            </div>
        </div>
        <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }"
            class="row">
            <Field name="Id" type="hidden" :value="permissionModel.Id" />
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Tên vai trò</label>
                    <Field v-model="permissionModel.Name" name="Name" type="text" class="form-control"
                        placeholder="Tên vai trò" :class="{ 'is-invalid': errors.Name }" />
                    <div class="invalid-feedback">{{ errors.Name }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Mô tả</label>
                    <Field v-model="permissionModel.Description" name="Description" type="text" class="form-control"
                        placeholder="Mô tả" :class="{ 'is-invalid': errors.Description }" />
                    <div class="invalid-feedback">{{ errors.Description }}</div>
                </div>
            </div>
            <div class="col-12 ">
                <div class="d-flex flex-row-reverse">
                    <button @click="cancel" type="button" class="btn btn-main-default mg-l-15">
                        Bỏ qua
                    </button>
                    <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting">
                        <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                        Xác nhận
                    </button>
                </div>
            </div>
        </Form>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';
import permissionService from '@/services/permissionService';
import { useToast } from "vue-toastification";
const toast = useToast();

const props = defineProps({
    permission: Object
});
const emit = defineEmits(['close', 'saved']);

const loading = ref(false);

let permissionModel = reactive({
    Id: 0,
    Name: '',
    Description: ''
});

const schema = Yup.object().shape({
    Name: Yup.string().required('Tên vai trò không để trống'),
    Description: Yup.string().required('Mô tả không để trống'),
});

watch(
    () => props.permission,
    (val) => {
        if (val) {
            permissionModel.Id = val.id || val.Id || 0;
            permissionModel.Name = val.name || val.Name || '';
            permissionModel.Description = val.description || val.Description || '';
        } else {
            permissionModel.Id = 0;
            permissionModel.Name = '';
            permissionModel.Description = '';
        }
    },
    { immediate: true }
);

async function onSubmit() {
    loading.value = true;
    let result = null;
    if (permissionModel.Id > 0) {
        result = await permissionService.update(permissionModel.Id, permissionModel);
    } else {
        result = await permissionService.create(permissionModel);
    }
    loading.value = false;
    if (result && result.Result === 1) {
        toast.success('Thành công!');
        emit('saved');
        emit('close');
    } else {
        toast.error('Thất bại: ' + (result && result.Message ? result.Message : 'Có lỗi xảy ra'));
    }
}

function cancel() {
    emit('close');
}
</script>

<style scoped>
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    min-width: 320px;
}
</style>