<template>
    <Modal
        v-model="showModal"
        @on-ok="deliver"
        width="auto"
        class-name="deliver-modal">
        <div class="deliver-modal">
            <Spin v-if="showLoading" fix size="large"></Spin>
            <div v-else class="deliver-info">
                <Row class-name="info-row">
                    <Col span="4" class-name="info-col">收货仓库：</Col>
                    <Col span="20">{{houseInfo.storehouseName}}</Col>
                </Row>
                <Row class-name="info-row">
                    <Col span="4">物流公司：</Col>
                    <Col span="20">
                        <Select v-model="expressId">
                            <Option v-for="item in houseList"
                                    :value="item.id"
                                    :key="item">
                                {{ item.companyName }}
                            </Option>
                        </Select>
                    </Col>
                </Row>
                <Row>
                    <Col span="4">物流单号：</Col>
                    <Col span="20"><Input v-model="expressNumber"></Input></Col>
                </Row>
                <p class="info-tip">
                    发往：{{houseInfo.storehouseName}}{{houseInfo.address}}{{houseInfo.adminName}}
                </p>
            </div>
        </div>
        <div slot="footer">
            <Button type="text" size="large" @click="cancel">取消</Button>
            <Button type="primary" size="large" @click="deliver">提交</Button>
        </div>
    </Modal>
</template>

<script>
import _ from 'lodash';
import TradeService from 'services/trade/trade-service';

export default {
    name: 'modal-deliver',
    props: {
        deliverRows: {
            type: Array
        }
    },
    created() {
        this.tradeService = new TradeService();
    },
    data() {
        return {
            showModal: false,
            showLoading: true,
            submitting: false,
            houseInfo: {},
            expressId: '',
            expressNumber: '',
            houseList: []
        };
    },
    watch: {
    },
    methods: {
        show() {
            this.showModal = true;
            this.expressId = '';
            this.expressNumber = '';
            this.tradeService.allotWarehouseInfo()
                .then(res => {
                    this.houseInfo = res.data;
                    this.showLoading = false;
                });

            this.tradeService.allotExpressCompList()
                .then(res => {
                    this.houseList = res.data;
                });
        },
        cancel() {
            this.showModal = false;
        },
        deliver() {
            if (this.submitting) {
                return;
            }
            this.submittiong = true;
            const params = {
                expressId: this.expressId,
                expressNumber: this.expressNumber,
                expressGoodsMap: {}
            };

            if (!(params.expressId + '').length) {
                this.$Message.error('请选择物流公司');
                return;
            }

            if (!(params.expressNumber + '').length) {
                this.$Message.error('请填写物流单号');
                return;
            }

            let goods = {};
            let keyId;

            _.each(this.deliverRows, i => {
                keyId = i.proRequisitionFormId;

                if (!goods[keyId]) {
                    goods[keyId] = [];
                }

                goods[keyId].push({
                    sku: i.productSku,
                    num: i._inputDeliverNum || 0,
                    factoryCode: i.skuFactoryCode
                });
            });

            params.expressGoodsMap = goods;
            this.tradeService.allotDelivery(params)
                .then(() => {
                    this.$emit('deliver-success');
                    this.showModal = false;
                    this.submitting = false;
                });
        }
    }
};
</script>

<style lang="scss">
.deliver-modal {
    padding: 30px;

    .info-row {
        margin-bottom: 20px;
    }

    .info-tip {
        margin-top: 20px;
        color: #f00;
        text-align: center;
    }

    .ivu-modal {
        width: 50%;
    }
}
</style>