<template>
    <Modal v-model="model"
           width="400"
           class-name="vertical-center-modal create-invoice-modal">
        <p slot="header">
            新建发货单
        </p>

        <div class="create-invoice-modal-content">
            <Form label-position="left" :label-width="100">
                <Form-item label="到货仓库">
                    <select-room v-model="storageId"></select-room>
                </Form-item>

                <Form-item label="预计到货时间">
                    <date-pick v-model="createDate"></date-pick>
                </Form-item>

                <Form-item label="品牌">
                    <select-brand v-model="brandId" :selectWhenOnlyOne="true"></select-brand>
                </Form-item>
            </Form>
        </div>

        <div slot="footer" style="text-align: center">
            <Button type="primary" size="large" :loading="modal_loading" @click="submit">保存</Button>
            <Button type="primary" size="large" :loading="modal_loading" @click="submitAnd">保存并添加商品</Button>
            <Button type="ghost" size="large"  @click="cancel">取消</Button>
        </div>
    </Modal>
</template>

<script>

import InvoiceService from 'services/repository/invoice-service';
import DatePick from './date-pick';
import moment from 'moment';

export default {
    name: 'create-modal',
    created() {
        this.invoiceService = new InvoiceService();
    },
    data() {
        return {
            model: false,
            modal_loading: false,
            storageId: null,
            createDate: null,
            brandId: null
        };
    },
    computed: {
        handleDate() {
            return moment(this.createDate, 'YYYY-MM-DD').unix();
        }
    },
    methods: {
        show() {
            this.reset();
            this.model = true;
        },
        close() {
            this.model = false;
        },
        submit() {
            this.save().then((result) => {
                if (result.code === 200) {
                    this.close();
                    this.emitEvent();
                }
            }).catch((err) => {
                this.$Message.error(err);
            });
        },
        submitAnd() {
            this.save().then((result) => {
                if (result.code === 200) {
                    this.close();
                    this.emitEvent();
                    this.$router.push({
                        name: 'repository.invoice.edit',
                        params: {
                            id: result.data
                        },
                        query: {
                            brandId: this.brandId
                        }
                    });
                }
            }).catch((err) => {
                this.$Message.error(err);
            });
        },
        cancel() {
            this.close();
        },
        reset() {
            this.modal_loading = false;
        },
        save() {
            if (!this.storageId) {
                return Promise.reject('请选择到货仓库');
            }

            if (!this.createDate) {
                return Promise.reject('设置预计到货时间');
            }

            if (!this.brandId) {
                this.$Message.error();
                return Promise.reject('请选择品牌');
            }

            this.modal_loading = true;
            return this.invoiceService.createOrder(this.storageId, this.handleDate, this.brandId).then((result) => {
                if (result.code === 200) {
                    this.$Message.info('创建成功');
                } else {
                    this.$Message.error('创建失败');
                }

                return result;
            });
        },
        emitEvent() {
            this.$emit('on-success');
        }
    },
    components: {
        DatePick
    }

};

</script>

<style lang="scss">
.create-invoice-modal {
    .ivu-date-picker {
        width: 100%;
    }

    .create-invoice-modal-content {
        padding: 20px;
    }
}

.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
        top: 0;
    }
}

.spin-container {
    width: 1033px;
    height: 200px;
    position: relative;
}

.table-container {
    width: 1033px;
    min-height: 200px;
}
</style>