<template>
    <div>
        <Form class="row" :validation-schema="schema" v-slot="{ errors, isSubmitting }" @submit="saveAddress">
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Tên người liên hệ:</label>
                    <Field v-model="addressModel.Name" name="Name" type="text" class="form-control"
                        placeholder="Tên người liên hệ" :class="{ 'is-invalid': errors.Name }" rules="required" />
                    <div class="invalid-feedback">{{ errors.Name }}</div>
                </div>
            </div>

            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Số điện thoại:</label>
                    <Field v-model="addressModel.PhoneNumber1" name="PhoneNumber1" type="text" class="form-control"
                        placeholder="Số điện thoại liên hệ" :class="{ 'is-invalid': errors.PhoneNumber1 }"
                        rules="required" />
                    <div class="invalid-feedback">{{ errors.PhoneNumber1 }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group mb-3">
                    <Field name="WardId" :class="{ 'is-invalid': errors.WardId }" v-model="addressModel.WardId"
                        rules="required">
                        <Location v-model:city-id="addressModel.CityId" v-model:district-id="addressModel.DistrictId"
                            v-model:ward-id="addressModel.WardId" :preloadCities="true">
                        </Location>
                    </Field>
                    <div class="invalid-feedback">{{ errors.WardId }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group mb-4">
                    <label>Địa chỉ:</label>
                    <Field as="textarea" v-model="addressModel.Address1" name="Address1" type="text" class="form-control"
                        placeholder="Địa chỉ chi tiết" :class="{ 'is-invalid': errors.Address1 }" rules="required" />
                    <div class="invalid-feedback">{{ errors.Address1 }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="row">
                    <div class="form-group mb-3 col-8"></div>
                    <div class="form-group mb-3 col-2">
                        <label>&nbsp;</label>
                        <button type="submit" class="btn btn-main-primary" @click="closeAddress">
                            Hủy bỏ
                        </button>
                    </div>
                    <div class="form-group mb-3 col-2">
                        <label>&nbsp;</label>
                        <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>
            </div>
        </Form>
    </div>
</template>
<script setup>
import _ from 'lodash';
const toast = useToast();
import * as Yup from 'yup';
import { onMounted, reactive, watch } from "vue";
import { Form, Field } from 'vee-validate';
import { useToast } from "vue-toastification";
import Location from "@/components/locations/CityDistrictWard.vue"

const props = defineProps({
    id: { type: Number, default: 0 },
    orderId: { type: Number, default: 0 },
    name: String,
    customerId: 0,
    addressType: Number,
    phoneNumber1: String,
    phoneNumber2: String,
    address1: String,
    cityId: Number,
    districtId: Number,
    wardId: Number
})

const emit = defineEmits(['CloseModal', 'SubmitAddress'])

const schema = Yup.object().shape({
    Name: Yup.string().required('Vui lòng nhập tên liên hệ'),
    PhoneNumber1: Yup.string().required('Vui lòng nhập số điện thoại liên hệ'),
    Address1: Yup.string().required('Vui lòng nhập địa chỉ chi tiết'),
    WardId: Yup.number().required('Vui lòng nhập chọn địa chỉ'),
});


const addressModel = reactive({
    Id: props.id,
    OrderId: props.orderId,
    Name: props.name,
    CustomerId: props.customerId,
    PhoneNumber1: props.phoneNumber1,
    PhoneNumber2: props.phoneNumber2,
    Address1: props.address1,
    Address2: '',
    CityId: props.cityId,
    DistrictId: props.districtId,
    WardId: props.wardId,
    AddressType: props.addressType
})

async function closeAddress() {
    emit('CloseModal', true);
}

async function saveAddress() {
    if (!addressModel.Name)
        toast.warning('Xin hãy nhập tên người liên hệ');
    if (!addressModel.PhoneNumber1)
        toast.warning('Xin hãy nhập số điện thoại liên hệ');
    if (!addressModel.Address1)
        toast.warning('Xin hãy nhập địa chỉ chi tiết');
    if (!addressModel.WardId || !addressModel.DistrictId || !addressModel.CityId)
        toast.warning('Xin hãy chọn địa chỉ Tỉnh/Quận/Phường');
    emit('SubmitAddress', addressModel);
}
onMounted(async () => {
    addressModel.Name = props.name;
    addressModel.OrderId = props.orderId;
    addressModel.CustomerId = props.customerId;
    addressModel.PhoneNumber1 = props.phoneNumber1;
    addressModel.CityId = props.cityId;
    addressModel.DistrictId = props.districtId;
    addressModel.WardId = props.wardId;
    addressModel.Address1 = props.address1;
    addressModel.AddressType = props.addressType;
})

watch(() => [props.name, props.phoneNumber1, props.cityId, props.districtId, props.wardId, props.address1], async ([name, phoneNumber1, cityId, districtId, wardId, address1]) => {
    if (name || phoneNumber1 || cityId || districtId || wardId || address1) {
        addressModel.ContactName = name;
        addressModel.ContactPhoneNumber = phoneNumber1;
        addressModel.CityId = cityId;
        addressModel.DistrictId = districtId;
        addressModel.WardId = wardId;
        addressModel.Address1 = address1;
    }

})

</script>
<style></style>