<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">

            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Tên tuyến</label>
                    <Field v-model="routeModel.Name" name="Name" type="text" class="form-control" placeholder="tên tuyến"
                        :class="{ 'is-invalid': errors.Name }" />
                    <div class="invalid-feedback">{{ errors.Name }}</div>
                </div>
            </div>

            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Thứ tự hiển thị</label>
                    <Field v-model="routeModel.DisplayOrder" name="DisplayOrder" type="number" class="form-control"
                        placeholder="thứ tự hiển thị" :class="{ 'is-invalid': errors.DisplayOrder }" />
                    <ErrorMessage class="invalid-error" name="DisplayOrder" />

                </div>
            </div>


            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Mô tả</label>

                    <textarea v-model="routeModel.Description" name="Description" class="form-control"
                        placeholder="mô tả"></textarea>
                </div>
            </div>

            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Khoảng cách min</label>
                    <Field v-model="routeModel.DistanceMin" name="DistanceMin" type="number" class="form-control"
                        placeholder="khoảng cách tối thiểu" :class="{ 'is-invalid': errors.DistanceMin }" />
                    <div class="invalid-feedback">{{ errors.DistanceMin }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Khoảng cách max</label>
                    <Field v-model="routeModel.DistanceMax" name="DistanceMax" type="number" class="form-control"
                        placeholder="khoảng cách tối đa" :class="{ 'is-invalid': errors.DistanceMax }" />
                    <ErrorMessage class="invalid-error" name="DistanceMax" />

                </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>

//#region Imports....
import { ref, onMounted, reactive, watch } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
import _ from 'lodash';
//#endregion

//#region Services
import routeService from "@/services/routeService";
//#endregion


//#region Toast
import { useToast } from "vue-toastification";
const toast = useToast();
//#endregion


//#region props
const props = defineProps({
    id: Number,
    level: Number
});
//#endregion

//#region props
//#endregion


const emit = defineEmits(['cancel']);


//#region Models
const loading = ref(false);


let routeModel = reactive({
    Id: 0,
    Name: '',
    Description: '',
    DistanceMin: 0,
    DistanceMax: 0,
    DisplayOrder: 0
});

//#endregion

//#region Validations
const schema = Yup.object().shape({
    Name: Yup.string().required('Tên tuyến không để trống'),
    DistanceMin: Yup.number().required("Khoảng cách tối thiểu là bắt buộc"),
    DistanceMax: Yup.number().moreThan(Yup.ref('DistanceMin'), "Khoảng cách max phải lớn hơn khoảng cách min")
});
//#endregion

//#region Methods
async function getById(id) {

    var routeResult = await routeService.getById(id);
    routeModel.Id = routeResult.Id;
    routeModel.Name = routeResult.Name;
    routeModel.Description = routeResult.Description;
    routeModel.DistanceMin = routeResult.DistanceMin;
    routeModel.DistanceMax = routeResult.DistanceMax;
    routeModel.DisplayOrder = routeResult.DisplayOrder;


}
async function onSubmit() {
    var paramModel = routeModel;
    var routeResult = await routeService.createOrUpdate(paramModel);
    if (routeResult != null && routeResult.Result === 1) {
        toast.success('Thành công!');
        cancel();
    } else {
        toast.error('Thất bại: ' + routeResult.Message);
    }

}

function cancel() {
    emit('cancel');
}

//#endregion



//#region Events
onMounted(async () => {

    if (props.id > 0) {
        loading.value = true;
        await getById(props.id);
        loading.value = false;
    }


})
//#endregion










</script>