<template>
    <div class="row p-t-25 text-left">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.parameters.reference">
                                <label>Address Reference/Label</label>
                                <input class="form-control" name="reference" v-model="parameters.reference">
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.parameters.street_one">
                                <label>Address Line 1</label>
                                <input class="form-control" name="street_one" v-model="parameters.street_one">
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.parameters.street_two">
                                <label>Address Line 2</label>
                                <input class="form-control" name="street_two" v-model="parameters.street_two">
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                            <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
                                <label>District</label>
                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md pl-md-1">
                            <validation-wrapper-component :validator="$v.parameters.post_code">
                                <label>Post Code</label>
                                <input class="form-control" name="post_code" v-model="parameters.post_code">
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row m-b-15">
                                        <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                                            <validation-wrapper-component :validator="$v.parameters.person_in_charge">
                                                <label>Person In Charge</label>
                                                <input class="form-control" name="person_in_charge" v-model="parameters.person_in_charge">
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-12 col-md pl-md-1">
                                            <validation-wrapper-component :validator="$v.parameters.phone">
                                                <label>Phone</label>
                                                <input class="form-control" name="phone" v-model="parameters.phone">
                                            </validation-wrapper-component>
                                        </div>
                                    </div>
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <validation-wrapper-component :validator="$v.parameters.remark">
                                                <label>Delivery Remark</label>
                                                <input class="form-control" name="remark" v-model="parameters.remark">
                                            </validation-wrapper-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-sm btn-complete b-rad-none" @click="submitForm()">{{ this.data ? "Update" : "Save" }} Address</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import addressFormValidation from "../../../general/mixins/addresses/validation/addressFormValidation";
    export default {
        props: {
            id: {
                type: Number,
                required: true
            }
        },
        data() {
			return {
                parameters : {
                    company_module_id: this.id,
                    reference: '',
                    street_one: '',
                    street_two: '',
                    district_id: '',
                    post_code: '',
                    remark: '',
                    phone: '',
                    person_in_charge: '',
				}

            }            
		},
        created(){
            if(this.data){
                this.parameters.reference = this.data.reference;
                this.parameters.street_one = this.data.street_one;
                this.parameters.street_two = this.data.street_two;
                this.parameters.district_id = this.data.district.id;
                this.parameters.post_code = this.data.post_code;
                this.parameters.phone = this.data.contact.phone;
                this.parameters.person_in_charge = this.data.contact.reference;
                this.parameters.remark = this.data.remark.content;
            }
        },
        watch: {
            'id': function () {
                this.parameters.company_module_id = this.id;
            }
        },
        methods:{
            submitForm(){
                this.submit(this.data ? (this.route('api.address.update', this.data.id)) : (this.route('api.address.create')), this.data ? 'put' : 'post', 'addressList', true, true);
            },
        },
        mixins: [addressFormValidation]
    }
</script>
