<template>
    <div>
        <loader v-if="loading"></loader>
        <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }" class="row">
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>{{ propName }}</label>
                    <Field v-model="propModel.Value" name="Value" type="text" class="form-control" :placeholder="propName"
                        :class="{ 'is-invalid': errors.Value }" />
                    <div class="invalid-feedback">{{ errors.Value }}</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, watch } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
//#region Services
import customerService from "@/services/customerService";
//#endregion

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

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

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

//#region Validations
const schema = Yup.object().shape({
    //Value: Yup.string().required(label + ' không để trống'),
});
//#endregion


//#region DATA
const loading = ref(false);
const label = ref('');
let propModel = reactive({
    Id: props.id,
    PropType: 0,
    Value: ''
});
//#endregion





//#region Methods

async function getCustomerProp(customerId, propType) {
    //var customerId = parseInt(id);
    var customerPropResult = await customerService.getProp(customerId, propType);

    propModel.Id = customerPropResult.Id;
    propModel.PropType = customerPropResult.PropType;
    propModel.Value = customerPropResult.Value;
    console.log(customerPropResult);
}

async function onSubmit() {

    propModel.UpdatedByUserName = "";
    propModel.UpdatedBy = 0;

    var propResult = await customerService.updateProp(propModel);
    if (propResult != null && propResult.Result === 1) {
        toast.success('Thành công!');
        cancel();
    } else {
        toast.error('Thất bại: ' + propResult.Message);
    }




}
function cancel() {
    emit('cancel');
}
//#endregion




//#region Events
onMounted(async () => {
    loading.value = true;
    console.log(props.id);
    console.log(props.propType);

    if (props.id > 0) {
        await getCustomerProp(props.id, props.propType);
        // customerModel.Id = props.id;
    }
    loading.value = false;
})
//#endregion




const init = (initModel) => {
    Object.assign(propModel, initModel);

    console.log(propModel);
};
defineExpose({
    init
});
</script>