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

        <div class="row">

            <div class="col-lg-6 mb-3">Họ và tên: {{ customerModel.FullName.length > 0 ? customerModel.FullName : "Chưa có"
            }}</div>
            <div class="col-lg-6 mb-3">Số điện thoại: {{ customerModel.PhoneNumber.length > 0 ? customerModel.PhoneNumber :
                "Chưa có" }}</div>
            <div class="col-lg-6 mb-3">Email: {{ customerModel.Email.length > 0 ? customerModel.Email : "Chưa có" }}</div>
            <div class="col-lg-6 mb-3">Địa chỉ: {{ customerModel.Address.length > 0 ? customerModel.Address : "Chưa có" }}
            </div>
        </div>
        <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }" class="row">
            <Field name="Id" type="hidden" value="0"></Field>

            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Tên đăng nhập</label>
                    <Field v-model="accountModel.UserName" name="UserName" type="text" class="form-control"
                        placeholder="tên đăng nhập" :class="{ 'is-invalid': errors.UserName }" />
                    <div class="invalid-feedback">{{ errors.UserName }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Mật khẩu</label>
                    <Field v-model="accountModel.Password" name="Password" type="password" placeholder="mật khẩu"
                        class="form-control" :class="{ 'is-invalid': errors.Password }" />
                    <div class="invalid-feedback">{{ errors.Password }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Xác nhận mật khẩu</label>
                    <Field v-model="accountModel.ConfirmPassword" name="ConfirmPassword" type="password"
                        placeholder="mật khẩu" class="form-control" :class="{ 'is-invalid': errors.ConfirmPassword }" />
                    <div class="invalid-feedback">{{ errors.ConfirmPassword }}</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, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';


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

const emit = defineEmits(['changeDate']);
import { useToast } from "vue-toastification";
const toast = useToast();
const loading = ref(false);

const props = defineProps({
    customerId: Number
});

let customerModel = reactive({
    FullName: '',
    PhoneNumber: '',
    Email: '',
    Address: '',
});

let accountModel = reactive({
    CustomerId: 0,
    UserName: '',
    Password: '',
    ConfirmPassword: '',
});

onMounted(async () => {
    accountModel.CustomerId = props.customerId;
    if (props.customerId > 0) {
        getById(props.customerId);
    }
})


const schema = Yup.object().shape({
    UserName: Yup.string().required('Tên đăng nhập không để trống').matches(/^[a-zA-Z][a-zA-Z0-9._-]{3,20}$/, "Tên đăng nhập có độ dài từ 3-20 ký tự chữ hoặc số, không chứa dấu cách, không chứa tiếng Việt"),
    Password: Yup.string().required('Mật khẩu không để trống').matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,30}$/, "Mật khẩu có độ dài từ 6-30 ký tự, có ít nhất 1 chữ cái thường, 1 chữ cái hoa và 1 chữ số"),
    ConfirmPassword: Yup.string().required('Xác nhận mật khẩu không để trống').oneOf([Yup.ref('Password'), null], 'Xác nhận mật khẩu chưa khớp')

});

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


async function onSubmit() {
    accountModel.UpdatedByUserName = "";
    accountModel.UpdatedBy = 0;
    var createResult = await customerService.registerAccount(accountModel);

    if (createResult != null && createResult.Result === 1) {
        toast.success('Thành công!');
        cancel();
    } 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);
        }

    }

}

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


</script>