<template>
    <div class="row m-t-20" @keyup.enter="search">
        <div class="col">
            <div class="row">
                <div class="col-12 col-md">
                    <div class="row m-b-15">
                        <div class="col">
                            <div class="row">
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">Order Number Like</label>
                                        <input type="text" class="form-control" v-model="marking" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0">
                            <div class="btn btn-primary b-rad-none" @click="search">
                                <i class="fa fa-search lh-40"></i>
                            </div>
                        </div>
                        <div class="col-auto p-l-0">
                            <div class="btn btn-secondary b-rad-none" @click="reset">
                                <i class="fa fa-remove lh-40"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md">
                    <div class="row" v-if="with_export">
                        <div class="col">
                            <download-billing-with-dates-component :section="section"></download-billing-with-dates-component>
                        </div>
                    </div>
                </div>
            </div>
            <list-component :key="currentKey" :section="section" :endpoint="route('api.packing_list.list')" :options="options">
                <template slot="list" slot-scope="{data}">
                    <single-parent-admin-payments-billing-component :data="data" :invoice_status="invoice_status" :section="section" ></single-parent-admin-payments-billing-component>
                    <!-- <admin-payments-billing-component :data="data" :invoice_status="invoice_status" :section="section" ></admin-payments-billing-component> -->
                    <!-- AdminPaymentsBillingComponent.vue deleted to avoid confusion -->
                </template>
            </list-component>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            invoice_status: {
                type: String,
                required: true
            },
            options: {
                default () {
                    return {}
                }
            },
            section:{
                type: String,
                required: true
            },
            with_export:{
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                marking: '',
                currentKey: 1,
            }
        },
        methods: {
            search() {
                this.options['order_marking_in'] = this.marking;
                this.currentKey+=1;
            },
            reset() {
                this.marking = '';
                delete(this.options['order_marking_in']);
                this.currentKey+=1;
            },
        },
    }
</script>
