<template>
    <Modal
        v-model="showModal"
        @on-ok="uploadLackNum"
        width="auto"
        class-name="upload-stock-modal"
        cancel-text="取消"
        ok-text="提交">
        <div class="detail">
            <Table stripe :columns="tableCols" :data="tableData"></Table>
        </div>
        <p class="danger-tip">
            *缺货数量提交后无法更改，平台将对顾客订单商品进行退单处理，请慎重操作！
        </p>
    </Modal>
</template>

<script>
import TradeService from 'services/trade/trade-service';
import CellInfo from 'components/cell/cell-info';

export default {
    name: 'modal-stock-out',
    data() {
        return {
            showModal: false,
            showLoading: true,
            tableCols: [
                {
                    title: '商品图片',
                    key: 'image',
                    render(h, params) {
                        return h('img', {
                            directives: [
                                {
                                    name: 'prod-img',
                                    value: params.row.productSku,
                                    modifiers: {
                                        sku: true
                                    }

                                }
                            ]

                        });
                    }
                },
                {
                    title: '商品信息',
                    key: 'info',
                    render: (h, params) => {
                        const row = params.row;
                        const infoItems = [
                            {
                                label: 'SKU',
                                value: row.productSku
                            },
                            {
                                label: '规格',
                                value: `${row.factoryGoodsName}/${row.sizeName}`
                            },
                            {
                                label: '名称',
                                value: row.productName
                            },
                            {
                                label: '品牌',
                                value: row.brandName
                            },
                            {
                                label: '销售价',
                                value: row.salesPrice
                            }
                        ];

                        return h(CellInfo, {
                            props: {
                                items: infoItems
                            }
                        });
                    }
                },
                {
                    title: '缺货数',
                    key: 'inputLackNum'
                }
            ],
            tableData: [],
            rowData: {}
        };
    },
    created() {
        this.tradeService = new TradeService();
    },
    methods: {
        show(row) {
            this.rowData = row;
            this.tableData = [row];
            this.showModal = true;
        },
        uploadLackNum() {
            const params = {
                num: this.rowData.inputLackNum,
                productSku: this.rowData.productSku,
                proReqFormId: this.rowData.proRequisitionFormId
            };

            this.tradeService.allotStockOut(params)
                .then(() => {
                    this.$emit('upload-success');
                });
        }
    }
};
</script>

<style lang="scss">
.upload-stock-modal {
    .danger-tip {
        margin-top: 20px;
        color: #f00;
        text-align: center;
    }

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