<template>
    <div class="row">
        <div class="col no-padding">
            <div class="row" v-show="this.showCompleteDate">
                <div class="col p-l-0 p-r-0">
                    <div class="form-group form-group-default input-group b-rad-none m-b-0" style=" overflow: visible; ">
                        <div class="form-input-group">
                            <label class="muted">Action Date</label>
                            <date-picker-component v-on:input="updateActionDate($event)"></date-picker-component>
                        </div>
                    </div>
                </div>
                <div class="col-auto padding-5 bg-master-lighter pointer" @click="showCompleteDate = !showCompleteDate; complete_date = null">
                    <div class="row align-items-center justify-content-center h-100">
                        <div class="col">
                            <i class="fa fa-times text-danger m-l-5 m-r-5"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" >
                <div class="col no-padding">
                    <div v-if="!this.showCompleteDate" @click="showCompleteDate = !showCompleteDate; complete_date = null" class="btn btn-xs btn-default b-a lh-20 b-complete b-rad-none text-complete all-caps"><i class="fa fa-calendar m-r-5"></i> Set Action Date</div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                showCompleteDate: false
            }
        },
        methods: {
            updateActionDate(value) {
                this.$emit('input', value);
            }
        }
    }
</script>