<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <div class="row">
               <div class="col-auto">
                   <div class="row">
                        <div class="col">
                            <h6 class="no-margin fs-12 text-black">{{item.street_one}} {{item.street_two}}, {{item.district.name}}, {{item.post_code}} {{item.state.name}}, {{item.country.name}}</h6>
                        </div>
                   </div>
               </div>
                <div class="col-auto">
                    <div class="row">
                        <!-- <div class="col-auto p-r-5">
                            <i class="fa m-r-10" data-type="defaultAddress" :class="{'fa-star': item.default, 'requestModal': !item.default, 'fa-star-o': !item.default, 'pointer': !item.default, 'text-warning': item.default}" ></i>
                        </div> -->
                        <div class="col-auto no-padding p-r-5 p-l-5 pointer">
                            <i class="fa fa-pencil-square-o text-complete m-r-10" @click="expanded = !expanded"></i>
                        </div>
                        <!-- <div class="col-auto p-l-5">
                            <i class="fa fa-trash-o text-danger requestModal" data-type="deleteAddress"></i>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="row" v-if="expanded">
                <div class="col">
                    <warehouse-address-form-component :company_module_id="company_module_id" :data="item" :section="section" @input="updateAddress($event)"></warehouse-address-form-component>
                </div>
            </div>
            <!-- <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAddress">
                <delete-address-form-component :data="item" :section="section" class="text-center"></delete-address-form-component>
            </modal-component>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defaultAddress">
                <set-default-address-form-component :data="item" :section="section" class="text-center"></set-default-address-form-component>
            </modal-component> -->
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            company_module_id: {
                type: Number,
                required: true
            },
            section: {
                type: String,
                required: true
            }

        },
        data(){
            return {
                expanded: false
            }
        },
        watch: {
            value: function(value){
                this.value = value;
                if(value !== this.item.id){
                    this.expanded = false;
                }
            }
        },
        methods: {
            updateAddress(id){
                this.expanded = false;
                this.$emit('input', id);
            }
        },
        mixins: [componentHandler]
    }
</script>