<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 Vue from 'vue';
import service from 'trade-service';

const ModalCellPrdInfo = {
    name: 'ModalCellPrdInfo',
    props: {
        sku: {
            type: [String, Number]
        },
        skn: {
            type: [String, Number]
        },
        color: {
            type: String
        },
        size: {
            type: String
        },
        brand: {
            type: String
        },
        price: {
            type: [String, Number]
        },
        name: {
            type: String
        }
    },
    template:
        `<div class="cell-info">
            <div class="img">
                <img src=""></img>
            </div>
            <div class="detail">
                <p>SKU：{{sku}}</p>
                <p>规格：{{color}}/{{size}}</p>
                <p>名称：{{name}}</p>
                <p>品牌：{{brand}}</p>
                <p>销售价：{{price}}</p>
            </div>
        </div>`,
    data() {
        return {
        };
    }
};

// modal table 中的自定义组件无法识别
Vue.component('modal-cell-prd-info', ModalCellPrdInfo);

export default {
    name: 'UploadStockOut',
    data() {
        return {
            showModal: false,
            showLoading: true,
            tableCols: [
                {
                    title: '商品图片',
                    key: 'image',
                    render(row) { // eslint-disable-line
                        return `<div>
                            <img v-prod-img.sku="row.productSku">
                        </div>`;
                    }
                },
                {
                    title: '商品信息',
                    key: 'info',
                    render() {
                        return `<modal-cell-prd-info
                            :sku="row.productSku"
                            :size="row.sizeName"
                            :color="row.factoryGoodsName"
                            :brand="row.brandName"
                            :name="row.productName"
                            :price="row.salesPrice"
                        ></modal-cell-prd-info>`;
                    }
                },
                {
                    title: '缺货数',
                    key: 'inputLackNum'
                }
            ],
            tableData: [],
            rowData: {}
        };
    },
    created() {
    },
    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
            };

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

<style lang="scss">
    .upload-stock-modal {
        .detail {
        }

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

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

</style>