<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 @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }" class="row">
            <Field name="Id" type="hidden" value="0"></Field>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Họ và tên</label>
                    <Field v-model="userModel.FullName" name="FullName" type="text" class="form-control"
                        placeholder="Họ và tên" :class="{ 'is-invalid': errors.FullName }" />
                    <div class="invalid-feedback">{{ errors.FullName }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Số điện thoại</label>
                    <Field v-model="userModel.PhoneNumber" name="PhoneNumber" type="text" class="form-control"
                        placeholder="Số điện thoại" :class="{ 'is-invalid': errors.PhoneNumber }" />
                    <div class="invalid-feedback">{{ errors.PhoneNumber }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Địa chỉ</label>
                    <Field v-model="userModel.Address" name="Address" type="text" class="form-control"
                        placeholder="Địa chỉ hiện tại" :class="{ 'is-invalid': errors.Address }" />
                    <div class="invalid-feedback">{{ errors.Address }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Email</label>
                    <Field v-model="userModel.Email" name="Email" type="text" class="form-control"
                        placeholder="Địa chỉ Email" :class="{ 'is-invalid': errors.Email }" />
                    <div class="invalid-feedback">{{ errors.Email }}</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, onMounted, reactive } from 'vue';
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';

const props = defineProps(['id']);


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

import customerService from "@/services/customerService";
import { useToast } from "vue-toastification";
const toast = useToast();
const loading = ref(false);

let userModel = reactive({
    Id: 0,
    FullName: '',
    Address: '',
    PhoneNumber: '',
    Email: '',

});

onMounted(() => {
    console.log('Ma user: ' + props.id);
    if (props.id > 0) {
        getById(props.id);
    }
})


const schema = Yup.object().shape({
    Id: Yup.number(),
    PhoneNumber: Yup.string().required('Số điện thoại không để trống').matches(/^[0-9]{10}$/, "Số điện thoại chỉ chứa số và có độ dài 10 ký tự")


});

async function getById(userId) {
    loading.value = true;
    var userResult = await customerService.getById(userId);
    userModel.Id = userResult.Id;
    userModel.Address = userResult.Address;
    userModel.PhoneNumber = userResult.PhoneNumber;
    userModel.Email = userResult.Email;
    userModel.FullName = userResult.FullName;
    loading.value = false;
}


async function onSubmit() {
    userModel.UpdatedByUserName = "";
    userModel.UpdatedBy = 0;
    var createResult = null;
    createResult = await customerService.createOrUpdate(userModel);
    console.log(createResult);
    if (createResult != null && createResult.Result === 1) {
        toast.success('Thành công!');
        emit('added', createResult.Id);
    } else {
        if (createResult.ErrorList != null && createResult.ErrorList.length > 0) {
            toast.error('Thất bại: ' + createResult.ErrorList.join("\n"));
        } else {
            toast.error('Thất bại: ' + createResult.Message);
        }
        cancel();
    }

}

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


</script>