<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="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>Chi nhánh</label>
                    <v-select label="Label" :options="agencies" v-model="userModel.AgencyId"
                        :reduce="(option) => option.Id">
                        <template v-slot:no-options="{ search, searching }">
                            <template v-if="searching">
                                Không có kết quả cho <em>{{ search }}</em>.
                            </template>
                            <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                        </template>
                    </v-select>
                    <Field v-model="userModel.AgencyId" name="AgencyId" type="hidden" />
                    <ErrorMessage class="invalid-error" name="AgencyId" />
                    <!-- <div class="invalid-feedback">{{ errors.AgencyId }}</div> -->
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Tên đăng nhập</label>
                    <Field v-model="userModel.UserName" name="UserName" type="text" class="form-control" autofill="off"
                        autocomplete="off" 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>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-6">
                <div class="form-group mb-3">
                    <label>FinalDN</label>
                    <Field v-model="userModel.FinalDN" name="FinalDN" type="text" class="form-control"
                        placeholder="FinalDN (tùy chọn)" :class="{ 'is-invalid': errors.FinalDN }" />
                    <div class="invalid-feedback">{{ errors.FinalDN }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="row" v-if="userModel.Id == 0">
                    <div class="col-6">
                        <div class="form-group mb-3">
                            <label>Mật khẩu</label>
                            <Field v-model="userModel.Password" name="Password" type="password" placeholder="mật khẩu"
                                autocomplete="new-password" 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="userModel.ConfirmPassword" name="ConfirmPassword" type="password"
                                autocomplete="new-password" placeholder="mật khẩu" class="form-control"
                                :class="{ 'is-invalid': errors.ConfirmPassword }" />
                            <div class="invalid-feedback">{{ errors.ConfirmPassword }}</div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Bank Accounts Section - Only show for existing users -->
            <div v-if="userModel.Id > 0" class="col-12 mb-4">
                <hr class="my-4">
                <h6 class="mb-3">
                    <i class="fe fe-credit-card me-2"></i>
                    Quản lý tài khoản ngân hàng
                </h6>
                <UserBankAccounts :user-id="userModel.Id" />
            </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 agencyService from "@/services/agencyService";
import userService from "@/services/userService";
//#endregion

//#region Components
import { UserBankAccounts } from './index';
//#endregion

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

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

const agencies = reactive([]);

async function getAgencies() {
    agencies.splice(0, agencies.length);
    var parentResult = await agencyService.getTree('');
    if (parentResult != null && parentResult.length > 0) {
        parentResult.forEach(agency => {
            agencies.push(agency);
        });
    }
}



let userModel = reactive({
    Id: 0,
    FullName: '',
    UserName: '',
    Address: '',
    PhoneNumber: '',
    Email: '',
    FinalDN: '',
    Password: '',
    ConfirmPassword: '',
    AgencyId: null
});

onMounted(async () => {
    await getAgencies();
    if (props.id > 0) {
        getById(props.id);
    }
})


const schema = Yup.object().shape({
    Id: Yup.number(),
    AgencyId: Yup.number().min(1, 'Chi nhánh không để trống').required('Chi nhánh không để trống'),
    FullName: Yup.string().required('Họ và tên không để trống'),
    UserName: Yup.string().required('Tên đăng nhập không để trống'),
    Address: Yup.string().required('Địa chỉ không để trống'),
    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ự"),
    Email: Yup.string()
        .required('Địa chỉ email không để trống')
        .email('Địa chỉ email không hợp lệ'),
    FinalDN: Yup.string().nullable(),
    Password: Yup.string()
        .when('id', {
            is: (val) => val <= 0,
            then: (schema) => schema.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()
        .when('id', {
            is: (val) => val <= 0,
            then: (schema) => schema.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(userId) {
    loading.value = true;
    var userResult = await userService.getStaff(userId);
    userModel.Id = userResult.Id;
    userModel.UserName = userResult.UserName;
    userModel.Address = userResult.Address;
    userModel.PhoneNumber = userResult.PhoneNumber;
    userModel.Email = userResult.Email;
    userModel.Address = userResult.Address;
    userModel.FullName = userResult.FullName;
    userModel.FinalDN = userResult.FinalDN || '';
    if (userResult.AgencyId > 0) {
        userModel.AgencyId = userResult.AgencyId;
    } else {
        userModel.AgencyId = null;
    }
    loading.value = false;
}


async function onSubmit() {
    userModel.UpdatedByUserName = "";
    userModel.UpdatedBy = 0;
    var createResult = null;
    if (userModel.Id <= 0) {
        createResult = await userService.createStaff(userModel);
    } else {
        createResult = await userService.updateStaff(userModel);
    }

    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>