<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row justify-content-center align-items-center m-t-50 m-b-50" v-show="step === 0">
                        <div class="col-5">
                            <div class="row text-center">
                                <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getReportFilter()">Mapped Report</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="step == 1">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="row m-t-10 m-b-10">
                                <div class="col">
                                    <div class="row p-t-10 p-b-10 b-b b-grey text-master-light">
                                        <div class="col-2">Date</div>
                                        <div class="col-2">Description</div>
                                        <div class="col-7">
                                            <div class="row">
                                                <div class="col">System</div>
                                                <div class="col">Type</div>
                                                <div class="col">Reference</div>
                                                <div class="col">Invoice Reference</div>
                                                <div class="col">Receipt Reference</div>
                                            </div>
                                        </div>
                                        <div class="col-1">Amount</div>
                                    </div>
                                </div>
                            </div>

                            <list-component ref="TransactionsMappedList" section="TransactionsMappedSection" :endpoint="route('api.accounting.bank.transaction')" :options="filter">
                                <template slot="list" slot-scope="{data}">
                                    <statement-transaction-mapped-component :data="data" :section="section"></statement-transaction-mapped-component>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                step: 0,
                filter: {},
            }
        },
        methods: {
            getReportFilter() {
                this.filter = {min_amount: 0, is_mapped: true, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [2], statement_transaction_owner_invoice_or_receipt_ref_not_null: true, per_page: 100, order_by: {column: 'posting_date', DESC: true}};

                this.step = 1
            }
        },
    }

</script>