<template>
    <div>
        <div v-if="loading" class="text-center"><span class="spinner-border spinner-border-sm"></span></div>
        <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
            <Field name="Id" type="hidden" :value="model.Id" />
            <div class="mb-3">
                <label>Tên CallPath</label>
                <Field v-model="model.Name" name="Name" type="text" class="form-control"
                    :class="{ 'is-invalid': errors.Name }" />
                <div class="invalid-feedback">{{ errors.Name }}</div>
            </div>
            <div class="mb-3">
                <label>Path</label>
                <Field v-model="model.Path" name="Path" type="text" class="form-control"
                    :class="{ 'is-invalid': errors.Path }" />
                <div class="invalid-feedback">{{ errors.Path }}</div>
            </div>
            <div class="mb-3">
                <label>Mô tả</label>
                <Field v-model="model.Description" name="Description" type="text" class="form-control"
                    :class="{ 'is-invalid': errors.Description }" />
                <div class="invalid-feedback">{{ errors.Description }}</div>
            </div>
            <div class="d-flex flex-row-reverse">
                <button @click="cancel" type="button" class="btn btn-secondary ms-2">Bỏ qua</button>
                <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
                    <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                    Xác nhận
                </button>
            </div>
        </Form>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';
import callPathService from '@/services/callPathService';
import { useToast } from 'vue-toastification';
const toast = useToast();
const emit = defineEmits(['success', 'cancel']);
const props = defineProps({ id: Number });
const loading = ref(false);
const model = reactive({ Id: 0, Name: '', Path: '', Description: '' });

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

onMounted(async () => {
    if (props.id > 0) {
        loading.value = true;
        try {
            const res = await callPathService.getById(props.id);
            Object.assign(model, res);
        } catch (e) {
            toast.error('Không lấy được dữ liệu');
        } finally {
            loading.value = false;
        }
    }
});

async function onSubmit() {
    loading.value = true;
    try {
        await callPathService.createOrUpdate(model);
        toast.success('Lưu thành công');
        emit('success');
    } catch (e) {
        toast.error('Lưu thất bại');
    } finally {
        loading.value = false;
    }
}

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