<template>
    <div>
        <b-card no-body>
            <b-card-header header-class="actions">
                <b-btn-group class="float-right">
                    <b-btn variant="primary" size="sm"><i class="fa fa-file-text"></i> Generate</b-btn>
                    <b-btn variant="secondary" size="sm"><i class="fa fa-times"></i> Cancel</b-btn>
                </b-btn-group>

                <div class="h5 mt-1 mb-0">General Ledger</div>
            </b-card-header>

            <b-row>
                <b-col md="8">
                    <div class="m-3">
                        <b-form-group :label-cols-md="form_label_cols" label="Cut-Off Date:" label-for="date_from">
                            <b-row>
                                <b-col md="6" sm="12">
                                    <b-input-group prepend="From">
                                        <date-picker id="date_from" v-model="form.date_from" :config="dateFromConfig" :disabled="busy"></date-picker>
                                    </b-input-group>
                                </b-col>
                                <b-col md="6" sm="12">
                                    <b-input-group prepend="To">
                                        <date-picker id="date_to" v-model="form.date_to" :config="dateToConfig" :disabled="busy"></date-picker>
                                    </b-input-group>
                                </b-col>
                            </b-row>
                        </b-form-group>
                        <b-form-group :label-cols-md="form_label_cols" label="Department:" label-for="department">
                            <select v-model="form.department" id="department" class="form-control" :disabled="busy">
                                <option v-for="(option, index) in departmentOptions" :value="option.value" :key="index" :disabled="!option.value">{{ option.text }}</option>
                            </select>
                        </b-form-group>
                        <b-form-group :label-cols-md="form_label_cols" label="GL Acct. Code:">
                            <b-btn @click="requestCoa" variant="info" size="sm" class="text-center mb-1">
                                <i class="fa fa-file-text"></i> Browse
                            </b-btn>
                            <transferable-list :data-list="gl_account_codes" :data-auto-pass="true" @selected-list-updated="updateGlAccountCodesSelected"/>
                        </b-form-group>
                        <b-form-group :label-cols-md="form_label_cols">
                            <ia-switch v-model="form.is_groupby_gl_acct_code" type="3d" id="is_groupby_gl_acct_code" class="mb-0 mt-1" size="sm" variant="primary" :checked="form.is_groupby_gl_acct_code" :disabled="busy"/>
                            <label for="is_groupby_gl_acct_code" class="col-form-label pt--15 ml-2">Group By GL Acct. Code</label>
                        </b-form-group>
                    </div>
                </b-col>
            </b-row>
        </b-card>
    </div>
</template>

<script>
    import AppMixin from '../../../../src/renderer/mixins/App'
    import DateMixin from '../../../../src/renderer/mixins/Date'
    import TransferableList from '../../../../src/renderer/components/Inputs/TransferableList.vue'

    const PAGE = 'BackOfficeReportsGeneralLedger'

    export default {
        name: PAGE,

        mixins: [
            AppMixin,
            DateMixin
        ],

        components: {
            TransferableList
        },

        computed: {
            departmentOptions () {
                return this.mapForDropdown(this.client_options.depts, 'deptid', 'deptdesc')
            },
            dateFromConfig () {
                return this.datePickerConfig({ maxDate: this.getFormattedDate() })
            },
            dateToConfig () {
                return this.datePickerConfig({ minDate: this.getFormattedDate(this.form.date_from), maxDate: this.getFormattedDate() })
            }
        },

        created () {
            this.init()
        },

        mounted () {
            bus.$on('coa-requested', payload => {
                if (payload.requester !== PAGE) { return false }

                this.addGlAccountCode(payload.coa)
            })
        },

        data () {
            return {
                client_options: {},
                form_label_cols: 3,
                form: {
                    date_from: null,
                    date_to: null,
                    department: null,
                    is_groupby_gl_acct_code: false
                },
                gl_account_codes: [],
                gl_account_codes_selected: [],
                busy: false
            }
        },

        methods: {
            init () {
                localforage.getItem('client_options').then(client_options => this.client_options = client_options)
            },
            requestCoa () {
                bus.$emit('request-coa', PAGE)
            },
            addGlAccountCode (code) {
                if (this.gl_account_codes.indexOf(code) > -1) { return false }

                this.gl_account_codes.push({ id: code.id, text: code.code + ' » ' + code.desc })
            },
            updateGlAccountCodesSelected (list) {
                this.gl_account_codes_selected = list
            }
        },

        beforeDestroy () {
            bus.$off('coa-requested')
        }
    }
</script>
