<template>
    <layout-body>
        <layout-filter>
            <filter-item>
                <order-info :id="id" @on-change="onOrderChange"></order-info>
            </filter-item>
        </layout-filter>

        <layout-action>
            <Button type="error" @click="onClickCreate" :disabled="this.selection.length === 0">发货</Button>
            <Button type="primary" @click="$router.go(-1)">返回发货入库列表</Button>
        </layout-action>

        <layout-list>
            <Table ref="goodsList" border :columns="tableCols" :data="tableData"
                   @on-selection-change="onSelectChange">
            </Table>
        </layout-list>

        <send-modal :context="self" ref="sendModal"></send-modal>
    </layout-body>
</template>

<script>
    import {tableCols} from './store/deliver-table';
    import SendModal from './components/send-modal';
    import OrderInfo from './components/order-info';
    import {InvoiceService} from 'services/repository';
    import _ from 'lodash';

    export default {
        data() {
            return {
                tableCols: tableCols.call(this),
                tableData: [],
                id: null,
                brandId: null,
                selection: [],
                self: this,
                info: null
            };
        },
        created() {
            this.invoiceService = new InvoiceService();
            this.id = this.$route.params.id;
            this.brandId = this.$route.query.brandId;
            this.getGoods();
        },
        methods: {
            onClickCreate() {
                this.tableData = this.$refs.goodsList.rebuildData;
                this.$refs.sendModal.show(this.id, this.tableData.filter(i => {
                    return _.find(this.selection, (s) => s.id === i.id);
                }));
            },
            getGoods() {
                return this.invoiceService.listProduct({
                    proRequisitionFormId: this.id,
                    brandId: this.brandId
                }).then((res) => {
                    if (res.code === 200) {
                        this.tableData = (res.data.goodsList || []).map((i) => {
                            i.num = null;
                            return i;
                        });
                    }
                });
            },
            onSelectChange(selection) {
                this.selection = selection;
            },
            onOrderChange(data) {
                this.info = data;
            },
            back() {
                this.$router.push({
                    name: 'repository.invoice.list'
                });
            }
        },
        components: {
            SendModal,
            OrderInfo
        }
    };
</script>

<style lang="scss">
</style>