<template>
    <div class="col-12">
        <div class="b-b b-dashed b-grey p-b-25" v-show="!this.show_details" v-if="company">
            <div class="row align-items-center m-b-5 parentContainer">
                   <div class="col-10">
                        <div class="font-heading fs-10 muted all-caps">Announcement</div>
                    </div>
                    <div class="col-2 text-right pull-right">
                        <div class="font-heading fs-10 muted all-caps">Action</div>
                    </div>

            </div>
            <list-component  :section="this.section" :endpoint="route('api.announcement.list')" :options="{has_segments:segments,is_published:true}">
                <template slot="list" slot-scope="{data}">
                    <announcement-list-component :data="data"></announcement-list-component>
                </template>
            </list-component>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                section: 'announcementsSection',
                company: null,
                show_details: false,
            }
        },
        computed: {
            segments(){
                return this.company.segments.map(function (value){

                    return value.id;
                })
            }
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
            this.fetchCompany();
        },
        methods: {
            fetchCompany(){
                this.submit(route('api.company.show', this.$store.getters.getCompanyId), 'get', this.section, false, false)
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.company = response.payload.data;
            }
        },
        mixins: [componentHandler]
    }
</script>