<template>
    <div class="row m-b-20">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-l-0 m-r-0 bg-master-light padding-10 parentContainer">
                        <div class="col">
                            <div class="row requestModal pointer" data-type="deleteBank">
                                <div class="col">
                                    <validation-wrapper-component :validator="$v.parameters.supplierNames">
                                        <label>Supplier</label>
                                        <input type="text" class="form-control fs-12 pointer" v-model="parameters.supplierNames" disabled>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteBank">
                                <select-supplier-form-component section="supplierListSection" v-on:input="updateList($event)"></select-supplier-form-component>
                            </modal-component>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="$v.parameters.startDate">
                                <label class="all-caps">Start Date</label>
                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="$v.parameters.endDate">
                                <label class="all-caps">End Date</label>
                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Download</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import componentHandler from "../../../general/mixins/componentHandler";
import { required, minValue} from "vuelidate/lib/validators";
import {VMoney} from 'v-money'

export default {
    data(){
        return {
            parameters: {
                startDate: '',
                endDate: '',
                supplier: null,
                supplierIds: [],
                supplierNames: []
            },
        }
    },
    validations: {
        parameters: {
            startDate: {
                required
            },
            endDate: {
                required
            },
            supplierIds: {
                required
            },
            supplierNames: {
                required
            },
        }
    },
    methods: {
        submitSearch(){
            if(!this.validate()){ return; }

            var supplierIds = JSON.stringify(this.parameters.supplierIds);

            window.open(route('export.transactions.booking')+'?startDate='+this.parameters.startDate+'&endDate='+this.parameters.endDate+'&supplierIds='+supplierIds, '_blank');
        },
        updateList(supplierList){
            let supplierIds = [];
            let supplierNames = [];
            supplierList.forEach(function(supplier) {
                supplierIds.push(supplier.id);
                supplierNames.push(supplier.name);
            });
            this.parameters.supplierIds = supplierIds;
            this.parameters.supplierNames = supplierNames;
        },
    },
    mixins: [componentHandler]
};
</script>
