<template>
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Monthly Recap Report</h3>

            <p> {{ $store.state.province_id }} {{ $store.state.month_id }} {{ $store.state.year_chart }} </p>

            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        <!-- /.box-header -->

        <div class="box-body">
            <selectperbinda />

            <div class="row">
                <linechartperbinda :key="$store.state.province_id" />
            </div>
            <!-- /.row-box-body -->
        </div>
        <!-- ./box-body -->

    </div>
    <!-- /.box -->

</template>

<script>
    import LineChartPerBindaComponent from '@components/Line/LineChartPerBindaComponent.vue'
    import SelectPerbindaComponent from '@components/SelectPerbindaComponent.vue'

    import { mapActions } from 'vuex'

    export default {

        name: 'ChartPerBindaComponent',
        components: {
            'linechartperbinda': LineChartPerBindaComponent,
            'selectperbinda': SelectPerbindaComponent,
        },
        mounted () {
            this.$store.dispatch('fetchProvince')
        },
        methods: {
            ...mapActions([
                'fetchProvince'
            ])
        }
    }
</script>

<style lang="css" scoped>
</style>