<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader :title="$route.meta.title"
                :content="$route.meta.description"
                hidden-breadcrumb />
        </div>
        <Card :bordered="false"
            dis-hover
            class="ivu-mt">
            <view-table ref="table"
                view-code="Barcode"
                :tree-enable="true"
                :tree-load="(row)=>onTreeLoad(row)"
                :has-children="(row)=>{
                    return row.hasChildren;
                }"
                @treetable="treetable()"
                @create="$refs.form.open()"
                @edit="({row,index})=>$refs.form.open(row)">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="包装库存"
                        type="info"
                        custom-icon="ic-md-folder"
                        @click="$refs.barcodeStorageTable.open({BarcodeID: row.id})"></Button>
                </template>
            </view-table>
        </Card>
        <modal-form ref="form"
            view-code="BarcodeEdit"
            @on-after-save="$refs.table.loadData()" />

        <modal-table ref="barcodeStorageTable"
            view-code="BarcodeStorage" />
    </div>
</template>
<script>
    import modalTable from '../../../src/components/view/modal-table.vue';
    import barcodeApi from '../../api/barcode';

    export default {
        components: { modalTable },
        methods: {
            async onTreeLoad(row) {
                let res = await barcodeApi.query({
                    parentID: row.id,
                    page: 1,
                    per: 1000,
                    orderBy: '+no'
                });

                setTimeout(() => {
                    this.$forceUpdate();
                }, 5000);

                return res.data;
            }
        }
    };
</script>

