<template>
    <Modal
        v-model="showModal"
        @on-ok="deliver"
        width="auto"
        class-name="deliver-modal"
        cancel-text="取消"
        ok-text="提交">
        <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>
    </Modal>
</template>

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

export default {
    name: 'OutStock',
    props: {
    },
    data() {
        return {
            showModal: false,
            showLoading: true,
            submitting: false,
            houseInfo: {},
            expressId: '',
            expressNumber: '',
            houseList: []
        };
    },
    watch: {
    },
    methods: {
        show() {
            this.showModal = true;
            service.allotWarehouseInfo()
                .then(res => {
                    this.houseInfo = res.data;
                    this.showLoading = false;
                });

            service.allotExpressCompList()
                .then(res => {
                    this.houseList = res.data;
                });
        },
        deliver(){
            if(this.submitting) return;
            const params = {
                expressId: this.expressId,
                expressNumber: this.expressNumber,
                expressGoodsMap: {
                    88254: [
                        {
                            sku: 934409,
                            num: 13
                        }
                    ]
                }
            };

            service.allotDelivery(params)
                .then(res => {
                    console.log(res)
                    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: #ff0000;
            text-align: center;
        }

        .ivu-modal {
            width: 50%;
        }
    }


</style>