<template>
    <div>
        <Table
            border
            :columns="goodsColumnsOne"
            :data="goodsListOne"
            height="120"
            class="orderSplitContentTableComOne"
          />
    </div>
</template>
<script>
    export default {
        props: {
            row: Object
        },
        created() {
            this.getGoodsListOne();
        },
        data() {
            return {
                goodsColumnsOne: [
                    {
                        title: 'SKU',
                        key: 'SKU',
                        width: 180,
                        tooltip: true,
                        align: 'center'
                    },
                    {
                        title: '商品名称',
                        key: 'TITLE',
                        width: 240,
                        tooltip: true,
                        align: 'center'
                    },
                    {
                        title: '规格',
                        key: 'SKUSPEC',
                        width: 180,
                        tooltip: true,
                        align: 'center'
                    },
                    {
                        title: '购买数量',
                        key: 'NUM',
                        align: 'center'
                    },
                    {
                        title: '拆分数量',
                        key: 'SPLITNUM',
                        align: 'center'
                    },
                    {
                        title: '拆分组号',
                        key: 'SPLITORDERBY',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                            'Input',
                            {
                                style: {
                                    width:'66px',
                                },
                                props: {
                                    value: params.row.SPLITORDERBY,
                                    regx: this.regx,
                                },
                                on: {
                                    'on-change': (event) => {
                                        // this.goodsListOne[0].SPLITORDERBY = event.target.value;
                                        this.$emit('changeSplitOrderBy',event,params.row,params.index)
                                    }
                                }
                            },
                            );
                        },
                    },
                ],
                goodsListOne: [],
                regx: /^[1-9]\d{0,7}?$/,
            }
        },
        methods: {
            getGoodsListOne() {
                this.goodsListOne = []
                let arr = JSON.parse(JSON.stringify(this.row))
                for(let i = 0;i<arr.NUM;i++){
                    let obj = {};
                    obj = arr;
                    obj.SPLITNUM = 1;
                    obj.SPLITORDERBY = 1;
                    this.goodsListOne.push(obj)
                }
                this.row.SPLITORDERBY = '';
                this.row.active = true;
                this.row.goodsListOne = this.goodsListOne;
                this.$emit('showSplitList',this.row)
            },
        }
    };
</script>
<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
    .orderSplitContentTableComOne {
        width: 900px;
    }
</style>