<template>
    <div
      ref="orderSplit"
      class="orderSplit"
    >
      <!-- JIT拣货单出库弹框 -->
      <div class="orderSplitTop" data-key="ORDER_SPLIT">
        <Button
          type="primary"
          :loading="loading"
          @click="sureorderSplit()"
        >
          拆分
        </Button>
        <Button
          style="margin-left: 10px;"
          :loading="loading"
          @click="close()"
        >
          取消
        </Button>
      </div>
      <div class="orderSplitContent">
        <div class="orderSplitContentTable">
          <Table
            border
            :columns="goodsColumns"
            :data="goodsList"
            height="400"
            class="orderSplitContentTableCom"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script>
    const R3 = window.R3;
  
    const { network, urlSearchParams } = R3;

    import orderSplitTableExpand from './orderSplitTableExpand.vue';
    export default {
        components: { orderSplitTableExpand },
        props: {
            selectRowData: { // 获取选择行的数据
                type: Array,
                default: () => []
            },
            idArray: {// 获取ID用于多选
                type: [Array, Object],
                default: () => {
                }
            },
        },
        data() {
            return {
                idarray:[],
                orderSplitStyle: '',
                PICKNO: '',
                OUTSTORAGECODE: '',
                goodsColumns: [
                    {
                        type: 'index',
                        width: 40,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: 'SKU',
                        key: 'SKU',
                        width: 100,
                        tooltip: true,
                        align: 'center'
                    },
                    {
                        title: '商品名称',
                        key: 'TITLE',
                        width: 100,
                        tooltip: true,
                        align: 'center'
                    },
                    {
                        title: '规格',
                        key: 'SKUSPEC',
                        width: 90,
                        tooltip: true,
                        align: 'center'
                    },
                    {
                        title: '图片',
                        key: 'PICPATH',
                        render: (h, params) => {
                            return h(
                            'div',
                            {
                                class:{
                                    imgBoxSplit:true
                                },
                                style: {
                                // zIndex: 999,
                                width:'40px',
                                height:'40px',
                                position:'relative'
                                },

                            },
                            [
                                h('Img',
                                {
                                style: {
                                    width:'40px',
                                    height:'40px'
                                    },
                                attrs: {
                                    src:!params.row.PICPATH?'../../../static/img/camera.jpg':params.row.PICPATH,
                                },
                                on:{
                                    'mouseenter':(e)=>{
                                        console.log(params.row.PICPATH)
                                        var txt3=document.createElement("img");
                                        txt3.id='enlargeImg'
                                        txt3.src=!params.row.PICPATH?'../../../static/img/camera.jpg':params.row.PICPATH
                                        txt3.style.height='120px'
                                        txt3.style.width='120px'
                                        txt3.style.position='fixed'
                                        txt3.style.zIndex=1001
                                        txt3.style.top=($(".imgBoxSplit")[params.index].top)+'px'
                                        txt3.style.left=($(".imgBoxSplit")[0].offsetLeft)+340+'px'
                                        $(".imgBoxSplit")[params.index].append(txt3)
                                    },
                                    'mouseleave':(e)=>{
                                        $("#enlargeImg").remove();
                                    }
                                }
                                },
                                )
                            ]

                            )
                        }
                    },
                    {
                        title: '平台销售价',
                        key: 'PLATSALEPRICE',
                        align: 'center'
                    },
                    {
                        title: '成交金额',
                        key: 'ACTUALAMOUNT',
                        align: 'center'
                    },
                    {
                        title: '明细标识',
                        key: 'STORESITE',
                        align: 'center',
                        render: (h, params) => {
                            return h('span',{
                                style: {
                                    padding: '4px',
                                    display: 'inline-block',
                                }
                            } , [
                            h('span', {
                                style: {
                                color: '#ed1a14',
                                border: '1px solid #ed1a14',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.IS_LACK == 1 ? 'inline-block' : 'none'
                                }
                            }, '缺'),
                            h('span', {
                                style: {
                                color: '#63BA4E',
                                border: '1px solid #63BA4E',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.ISGIFT == 1 ? 'inline-block' : 'none'
                                }
                            }, '赠'),
                            // h('span', {
                            //     style: {
                            //     color: '#63BA4E',
                            //     border: '1px solid #63BA4E',
                            //     padding: '4px',
                            //     borderRadius: '2px',
                            //     'margin-right': '4px',
                            //     display: params.row.GIFT_TYPE === '系统赠品' ? 'inline-block' : 'none'
                            //     }
                            // }, '系统赠品'),
                            // h('span', {
                            //     style: {
                            //     color: '#060',
                            //     border: '1px solid #060',
                            //     padding: '4px',
                            //     borderRadius: '2px',
                            //     'margin-right': '4px',
                            //     display: params.row.GIFT_TYPE === '平台赠品' ? 'inline-block' : 'none'
                            //     }
                            // }, '平台赠品'),
                            h('span', {
                                style: {
                                color: 'var(--primary-color)',
                                border: '1px solid var(--primary-color)',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.GROUPTITLE ? 'inline-block' : 'none'
                                }
                            }, '组合'),
                            h('span', {
                                style: {
                                color: '#D0021B',
                                border: '1px solid #D0021B',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.ISEMBARGO==1 ? 'inline-block' : 'none'
                                }
                            }, '航空禁运'),
                            h('span', {
                                style: {
                                color: '#D0021B',
                                border: '1px solid #D0021B',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.ISLG==1 ? 'inline-block' : 'none'
                                }
                            }, '催'),
                            h('span', {
                                style: {
                                color: '#0000ff',
                                border: '1px solid #0000ff',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.ORDER_LABEL==3 ? 'inline-block' : 'none'
                                }
                            }, '换'),
                            h('span', {
                                style: {
                                color: 'var(--primary-color)',
                                border: '1px solid var(--primary-color)',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.HASVIRTUAL==1 ? 'inline-block' : 'none'
                                }
                            }, '虚拟商品'),
                            h('span', {
                                style: {
                                color: '#D0021B',
                                border: '1px solid #D0021B',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.REFUNDSTATUS==1 ? 'inline-block' : 'none'
                                }
                            }, '退款中'),
                            h('span', {
                                style: {
                                color: '#D0021B',
                                border: '1px solid #D0021B',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.ISAUTOREFUND==1 && params.row.REFUNDSTATUS!=6 ? 'inline-block' : 'none'
                                }
                            }, '自动售后'),
                            h('span', {
                                style: {
                                color: '#D0021B',
                                border: '1px solid #D0021B',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.ISPRICEABNORMAL==1 ? 'inline-block' : 'none'
                                }
                            }, '价格异常'),
                            h('span', {
                                style: {
                                color: '#C1C1C1',
                                border: '1px solid #C1C1C1',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.REFUNDSTATUS==6 ? 'inline-block' : 'none'
                                }
                            }, '退款成功'),
                            h('span', {
                                style: {
                                color: '#0000ff',
                                border: '1px solid #D0021B',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.RESERVATION_TYPE==1 ? 'inline-block' : 'none'
                                }
                            }, '1元预定'),
                            h('span', {
                                style: {
                                color: 'var(--primary-color)',
                                border: '1px solid var(--primary-color)',
                                padding: '4px',
                                borderRadius: '2px',
                                'margin-right': '4px',
                                display: params.row.HOSTNO ? 'inline-block' : 'none'
                                }
                            }, '直播'),
                            ]);
                        }
                    },
                    {
                        title: '库存',
                        key: 'QTYFEE',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                            'div',
                            {
                                style: {
                                    maxWidth:'385px',
                                    overflow: 'hidden',
                                    height:'18px'
                                },
                            },
                            [
                                h('Tooltip',
                                {
                                    attrs: {
                                    placement:"bottom",
                                    content:params.row.TipList,
                                    maxWidth:"385",
                                    transfer:true,
                                    delay:1000
                                    },
                                },
                                [h(
                                    'div',
                                    {
                                    style: {
                                        cursor: 'pointer',
                                        overflow: 'hidden',
                                        maxWidth:'385px',
                                        textOverflow:'ellipsis',
                                        whiteSpace: 'nowrap',
                                        color: 'var(--primary-color)'
                                    },
                                    props: {
                                        value: params.row.QTYFEE,
                                    },
                                    on: {
                                        mouseenter: () => {
                                            // this.getqtyfee(params)
                                        }
                                    }
                                    },
                                    [params.row.QTYFEE]
                                ),
                                h(
                                'div',
                                    {
                                        slot:"content",
                                        domProps: {
                                            innerHTML: params.row.TipList// 这里是要渲染的数据
                                        }
                                    },
                                ),
                                ],
                                ),
                            ]
                            )
                        },
                    },
                    {
                        title: '购买数量',
                        key: 'NUM',
                        align: 'center'
                    },
                    {
                        title: '拆分数量',
                        key: 'SPLITNUM',
                        align: 'center'
                    },
                    {
                        title: '拆分组号',
                        key: 'SPLITORDERBY',
                        align: 'center',
                        render: (h, params) => {
                            let this_=this
                            return h(
                            'Input',
                            {
                                style: {
                                    width:'66px',
                                },
                                props: {
                                    value: params.row.SPLITORDERBY,
                                    number: true,
                                },
                                on: {
                                    'on-blur': (event) => {
                                        this.goodsList[params.index].SPLITORDERBY = event.target.value
                                    }
                                }
                            },
                            );
                        },
                    },
                    {
                        title: '操作',
                        // type: 'expand',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            const vm = this;
                            return h('div', [
                                h('Button', {
                                    style: {
                                        background: 'var(--primary-color)',
                                        color: '#ffffff',
                                        display: params.row.SPLITNUM>1 ? 'inline-block' : 'none'
                                    },
                                    props: {},
                                    on: {
                                        click: () => {
                                            vm.goodsList.splice(params.index, 1);
                                            for(let i = 0;i<params.row.NUM;i++){
                                                let obj = {};
                                                obj = params.row;
                                                obj.SPLITNUM = '1';
                                                obj.SPLITORDERBY = '1';
                                                this.goodsList.splice(params.index,0,obj)
                                            }
                                            this.goodsList = JSON.parse(JSON.stringify(this.goodsList))
                                        }
                                    }
                                }, '拆单'),
                                h('span', {
                                    style: {
                                        display: params.row.SPLITNUM==1 ? 'inline-block' : 'none'
                                    },
                                }, '-'),
                                // h(orderSplitTableExpand, {
                                //     props: {
                                //         row: params.row
                                //     },
                                //     on: {
                                //         'showSplitList': (event) => {
                                //             this.goodsList[params.index]=event;
                                //         },
                                //         'changeSplitOrderBy':(event,rowOne,paramsOne) => {
                                //             this.changeSplitOrderBy(event,rowOne,paramsOne);
                                //         }
                                //     }
                                // })
                            ]);
                        }
                    }

                ],
                goodsList: [],
                loading: false,
                regx: /^[1-9]\d{0,7}?$/,
            };
            
        },
        created() {
            let modelName = R3.getModuleName();
            let idarray = this.$store.state[modelName].buttons.selectIdArr;
            this.idarray = idarray
            let selectArray = this.$store.state[modelName].buttons.selectArr;
            // this.$parent.$parent.modalWidth = 812;
            this.getGoodsList(idarray[0])
        },
        mounted() {
        },
        methods: {
            getGoodsList(id) {
              network.get('/p/cs/order/queryListItm/'+id).then((res) => {
                this.goodsList = [];
                if (res.data.rows.length > 0) {
                    let data = [];
                    for (let i = 0; i < res.data.rows.length; i++) {
                        for (let j = 0; j < Object.keys(res.data.rows[i]).length; j++) {
                            let keyName = Object.keys(res.data.rows[i])[j];
                            if(keyName == 'PICPATH') {
                                if(res.data.rows[i][keyName]){
                                    try {
                                        let arr=JSON.parse(res.data.rows[i][keyName])
                                        if(arr instanceof Array){
                                            res.data.rows[i][keyName]=arr[0].URL
                                        }else {
                                            res.data.rows[i][keyName]=''
                                        }
                                    } catch (error) {
                                        res.data.rows[i][keyName]=res.data.rows[i][keyName]
                                    }                        
                                }else {
                                    res.data.rows[i][keyName]=''
                                }
                            }else if(keyName == 'qtyDTOList') {
                                let QTYFEEALL = 0
                                let TipList = '';
                                if(res.data.rows[i][keyName] && res.data.rows[i][keyName].length > 0){
                                    res.data.rows[i][keyName].forEach(item => {
                                        let tipsList = '<p style="margin-bottom:4px;">'+item.STORENAME+':'+item.QTYFEE+'</p>'
                                        TipList += tipsList;
                                        QTYFEEALL += Number(item.QTYFEE)
                                    })
                                }
                                res.data.rows[i].TipList = TipList
                                res.data.rows[i].QTYFEE = QTYFEEALL
                            }else {
                                res.data.rows[i][keyName] = res.data.rows[i][keyName];
                            }
                            res.data.rows[i].SPLITNUM = res.data.rows[i].NUM;
                            res.data.rows[i].SPLITORDERBY = '1';
                            res.data.rows[i].active = false;
                        }
                        data.push(res.data.rows[i]);
                    }
                    this.goodsList = data;
                } else {
                    this.goodsList = [];
                }
              });
            },
            sureorderSplit() {
                this.loading = true;
                let submitList = [];
                this.goodsList.forEach(item => {
                    let obj = {
                        ORDERRID: Number(item.SPLITORDERBY),
                        ORDERPRODUCTID: item.ID*1,
                        NUM:item.SPLITNUM*1,
                        // SPLITORDERBY: item.SPLITORDERBY
                    }
                    submitList.push(obj)
                })
                let params = {
                    ids: this.idarray,
                    tableName: 'T_V_OMSONLINEORDER',
                    actionName: 'T_V_OMSONLINEORDER_拆分订单_SP',
                    isContainsParam:true,
                    param:{"DATA":submitList}
                };
                network.post('/p/cs/manualsplitorderConfirm',params).then(res => {
                    if (res.data.code == 0) {
                        this.sureorderSplitOne(params)
                    } else if (res.data.code == 10) {
                        this.$Modal.confirm({
                            title: '提示',
                            mask:true,
                            content: res.data.message,
                            okText: '确定',
                            cancelText: '取消',
                            showCancel: true,
                            onOk: () => {
                                this.sureorderSplitOne(params);
                            },
                            onCancel: () => {
                                this.$emit('cancel');
                                this.loading = false;
                            }
                        });
                    }else {
                        this.loading = false;
                    }
                })
            },
            sureorderSplitOne(params) {
                network.post('/p/cs/manualsplitorder',params).then(res => {
                    if (res.data.code == 0) {
                        this.$Message.success('订单拆分成功！');
                        this.loading = false;
                        // 成功关闭弹框
                        this.$emit('cancel');
                        document.querySelector('#refresh').click(); // 标准列表刷新按钮
                    } else {
                        this.getGoodsList(this.idarray[0]); // 失败需要刷新当前弹框
                        this.loading = false;
                    }
                })
            },
            close() {
                this.$emit('cancel');
            },
        },
    };
  </script>
  <style lang='less'>
    #r3-dialog-ORDERSPLIT .ark-modal {
        width: 1050px !important;
    }
    #r3-dialog-ORDERSPLIT .ark-modal-content.ark-modal-content-drag {
        width: 1050px !important;
    }
    .orderSplitContentTableCom.ark-table-wrapper, .orderSplitContentTableCom > .ark-table {
      width: 1000px;
    }
    .orderSplitContentTableCom .ark-table-tbody .ark-table-cell .ark-btn:hover {
      border-color: var(--primary-color);
    } 
  </style>
  <style lang='less' scoped>
    .orderSplit {
      width: 1000px;
      .orderSplitTop {
        display: flex;
        // justify-content: space-between;
        // align-items: center;
        width: 1000px;
        .orderSplitTitle {
          display: block;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
      .orderSplitContent {
        width: 1000px;
        padding-top: 10px;
        .orderSplitContentTable {
          width: 1000px;
          min-height: 350px;
          overflow: hidden;
        }
      }
    }
  </style>
  