<template>
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-12 mg-t-20">
            <label>Ảnh</label>
            <PackageAddPicture v-model:url="packageModel.Picture"></PackageAddPicture>
        </div>
        <div class="col-lg-10 col-md-9 col-sm-12">
            <Form ref="frmAddress" @submit="onSubmit" v-if="!loading" :validation-schema="schema"
                v-slot="{ errors, isSubmitting }" class="row mt-3">
                <div class="col-8">
                    <div class="form-group mb-3">
                        <label>Tên hàng hóa</label>
                        <Field v-model="packageModel.Name" name="Name" type="text" class="form-control"
                            placeholder="tên hàng hóa" :class="{ 'is-invalid': errors.Name }" :validateOnBlur="true"
                            :validateOnChange="true" :validateOnInput="true" />
                        <!-- <div class="invalid-feedback">{{ errors.ContactName }}</div> -->
                        <ErrorMessage class="invalid-error" name="Name" />
                    </div>
                </div>

                <div class="col-4">
                    <div class="form-group mb-3">
                        <label>Số kiện</label>
                        <Field v-model="packageModel.Quantity" name="Quantity" type="text" class="form-control"
                            placeholder="số kiện" :class="{ 'is-invalid': errors.Quantity }" />
                        <ErrorMessage class="invalid-error" name="Quantity" />

                    </div>
                </div>

                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="form-group mb-3">
                        <label>Khối lượng (kg) / kiện</label>
                        <Field v-model="packageModel.Weight" name="Weight" type="text" class="form-control"
                            placeholder="số kiện" :class="{ 'is-invalid': errors.Weight }" />
                        <ErrorMessage class="invalid-error" name="Weight" />

                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="form-group mb-3">
                        <label>Chiều dài (cm) / kiện</label>
                        <Field v-model="packageModel.Length" name="Length" type="text" class="form-control"
                            placeholder="chiều dài" :class="{ 'is-invalid': errors.Length }" />
                        <ErrorMessage class="invalid-error" name="Length" />

                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="form-group mb-3">
                        <label>Chiều rộng (cm) / kiện</label>
                        <Field v-model="packageModel.Width" name="Width" type="text" class="form-control"
                            placeholder="chiều rộng" :class="{ 'is-invalid': errors.Width }" />
                        <ErrorMessage class="invalid-error" name="Width" />

                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="form-group mb-3">
                        <label>Chiều cao (cm) / kiện</label>
                        <Field v-model="packageModel.Height" name="Height" type="text" class="form-control"
                            placeholder="chiều cao" :class="{ 'is-invalid': errors.Height }" />
                        <ErrorMessage class="invalid-error" name="Height" />

                    </div>
                </div>
                <div class="d-flex flex-row justify-content-between">
                    <div class="col-8">
                        <div class="form-group">
                            <label>Ghi chú</label>
                            <Field v-model="packageModel.Note" name="Note" type="text" class="form-control"
                                placeholder="ghi chú" :class="{ 'is-invalid': errors.Note }" />
                            <ErrorMessage class="invalid-error" name="Note" />

                        </div>
                    </div>
                    <div class="col-4 col-md-auto">
                        <div class="form-group mg-t-30">
                            <label>&nbsp;</label>
                            <button type="submit" class="btn ms-auto btn-main-primary">
                                <i class="fa fa-plus"></i>
                                {{ packageModel.Id > 0 ? 'Cập nhật hàng hóa' : 'Thêm hàng hóa' }}
                            </button>
                        </div>
                    </div>
                </div>
            </Form>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import { Form, Field, ErrorMessage, configure } from 'vee-validate';
import * as Yup from 'yup';



//#region Components
import CityDistrictWard from "@/components/locations/CityDistrictWard.vue";
import PackageAddPicture from "./package-add-picture.vue";
//#endregion

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

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

const props = defineProps({
    addType: Number,
    customerId: Number,
});
const emit = defineEmits(['submit']);

//#region DATA
const actionName = ref('Thêm hàng hóa');
const loading = ref(false);
let packageModel = reactive({
    Id: 0,
    Code: '',
    Picture: '',
    Name: '',
    Quantity: 1,
    Length: 10,
    Width: 10,
    Height: 10,
    Weight: 1,
    Note: ''
});
//#endregion


//#region Validations
const schema = Yup.object().shape({
    Name: Yup.string().required('Tên hàng hóa không để trống'),
    Quantity: Yup.number().typeError('Số kiện từ 1 trở lên').required('Số kiện không để trống').min(1, 'Số kiện tối thiểu là 1'),
    Weight: Yup.number().typeError('Vui lòng nhập số').required('Khối lượng không để trống'),
    Height: Yup.number().typeError('Vui lòng nhập số'),
    Length: Yup.number().typeError('Vui lòng nhập số'),
    Width: Yup.number().typeError('Vui lòng nhập số'),
    //WardId: Yup.string().required('Vui lòng nhập đầy đủ tỉnh, quận, phường'),
});
//#endregion

//#region methods

const frmAddress = ref(null);

async function onSubmit() {
    emit('submit', packageModel);
    reset();

}
async function reset() {
    packageModel.Id = 0;
    packageModel.Code = '';
    packageModel.Picture = '';
    packageModel.Name = '';
    packageModel.Quantity = 1;
    packageModel.Length = 10;
    packageModel.Width = 10;
    packageModel.Height = 10;
    packageModel.Weight = 1;
    packageModel.Note = '';
    actionName.value = 'Thêm hàng hóa';

}

const init = async (model) => {
    reset();
    packageModel.Id = model.Id;
    packageModel.Code = model.Code;
    packageModel.Picture = model.Picture;
    packageModel.Name = model.Name;
    packageModel.Quantity = model.Quantity;
    packageModel.Length = model.Length;
    packageModel.Width = model.Width;
    packageModel.Height = model.Height;
    packageModel.Weight = model.Weight;
    packageModel.Note = model.Note;
    actionName.value = "Cập nhật hàng hóa";
};



//#endregion

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


})
//#endregion

defineExpose({
    init,
    reset
})

</script>