<template>
    <div v-if="committee_id > 0">
        <a
            href="#"
            class="line-btn blue"
        ><span>Return to the section's committees list</span></a>
        <h2>{{ data.title }}</h2>
        <div
            v-html="data.content"
        ></div>
        <div class="btn-cnt">
            <a
                href="#"
                class="curve-btn blue"
                @click.prevent="goBack"
            ><span>Join the committee</span></a>
        </div>
        <div class="roster detail-roster">
            <h3>Committees Roster</h3>
            <div class="row">
                <div class="col-xs-6">
                    <p :class="{classArray:name}">Amanda Alvarado</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {EventBus} from '../event-bus';
    import axios      from 'axios';

    export default {
        data() {
            return {
                classArray: {
                    name: 'name',
                    title: 'title',
                },
                committee_id: 0,
                data: [],
                api_url: (API.restUrl !== undefined) ? API.restUrl : '',
            };
        },
        created() {
            EventBus.$on('committee-post-id', committee_id => {
                this.committee_id = committee_id;
                this.getCommitteePost();
            });
        },
        methods: {
            getCommitteePost: () => {
                this.$nextTick(function () {
                    axios.get(`${this.api_url + this.committee_id}`)
                         .then(({data}) => {
                             if (data.message === 'success') {
                                 this.$nextTick(function () {
                                     this.data = data;
                                 });
                             }
                         })
                         .catch(err => {});
                });
            },
            goBack: () => {

            }
        },
        name: 'section-committee'
    };
</script>