<template>
    <div class="presaleStockPop">
      <Poptip
        transfer
        popper-class="delayTooltip"
        max-width="1200"
        placement="top-start"
        theme="light"
        :delay="600"
      >
      <!-- @on-popper-show="showPopperList" -->
        <div
          style="width: 100%;"
          @click="getOrderDetail(params)"
        >
        <!-- @mouseenter="getOrderDetail(params)" -->
          <div style="color:var(--primary-color)">
            {{params.value}}
          </div>
        </div>
        <div slot="content">
          <Table
            :columns="goodsColumns"
            :data="goodsList"
            class="getListReturnTable"
          />
        </div>
      </Poptip>
    </div>
  </template>
   <script type="text/ecmascript-6">
   import utils from '../../assets/js/__utils__/common'
    // 折叠面板组件
    const R3 = window.R3;
  
    const { network, urlSearchParams, store } = R3;
    export default {
      name: '',
      props: {
        params: {
          type: Object,
          default: () => ({})
        }
      },
      data() {
        return {
          goodsColumns: [ // 订单商品详情
            {
              title: '采购订单号',
              align: 'left',
              key: 'DOCNO',
              width: 130,
              tooltip: true,
            },
            {
              title: '单据日期',
              align: 'left',
              key: 'BILLDATE',
              width: 100,
              tooltip: true,
            },
            {
              title: '生产单号',
              align: 'left',
              key: 'ORDER_DOCNO',
              width: 100,
              tooltip: true,
            },
            {
              title: '商品编码',
              align: 'left',
              key: 'PRODUCTCODE',
              width: 100,
              tooltip: true,
            },
            {
              title: 'sku',
              align: 'left',
              key: 'SKU',
              width: 100,
              tooltip: true,
            },
            {
              title: '生产数量',
              align: 'left',
              key: 'QTY',
              width: 100,
              tooltip: true,
            },
            {
              title: '调整数量',
              align: 'left',
              key: 'QTYADJ',
              width: 100,
              tooltip: true,
            },
            {
              title: '预计交货日期',
              align: 'left',
              key: 'PREDATEIN',
              width: 100,
              tooltip: true,
            },
            {
              title: '新预计交货日期',
              align: 'left',
              key: 'N_PREDATEIN',
              width: 100,
              tooltip: true,
            },
            {
              title: '已入库数量',
              align: 'left',
              key: 'QTYCONSIGN',
              width: 100,
              tooltip: true,
            },
            {
              title: '剩余量',
              align: 'left',
              key: 'QTYREM',
              width: 100,
              tooltip: true,
            },
          ],
          goodsList: [],
        };
      },
      methods: {
  
        showPopperList() {
          if (window.location.href.indexOf('FULL_INVENTORY_QUERY_REPORT') > -1) {
            setTimeout(() => {
              this.clearPopTipList();
            }, 1);
            // this.clearPopTipList();
          }
        },
        clearPopTipList() {
          let getListReturnTableList = document.getElementsByClassName('getListReturnTable');
          for (let i = 0; i < getListReturnTableList.length; i++) {
            let objNode = getListReturnTableList[i].parentElement.parentElement.parentElement.parentElement;
            objNode.style.display = 'none';
          }
        },
        getOrderDetail(params) {
          if (this.goodsList.length == 0) {
            let virtual = {
              sku: params.data.SKU.val,
              storecode: params.data.IESSTOREID.refobjid
            };
            network.post('/p/cs/inventory/query/report/item/production_on_the_way', virtual).then((res) => {
              if (res.data.data && res.data.data.length > 0) {
                let data = [];
                for (let i = 0; i < res.data.data.length; i++) {
                  for (let j = 0; j < Object.keys(res.data.data[i]).length; j++) {
                    let keyName = Object.keys(res.data.data[i])[j];
                    res.data.data[i][keyName] = res.data.data[i][keyName];
                  }
                  data.push(res.data.data[i]);
                }
                this.goodsList = data;
              } else {
                this.goodsList = [];
              }
            });
          }
        }
      },
  
      mounted() {
      }
    };
  </script>
  <style lang="scss">
    .markBox.tooltipMarkBoxOne {
      margin-bottom: 6px;
    }
    .markBox.tooltipMarkBoxOne .ark-form-item {
      display: flex;
      align-items: center;
      margin-bottom: -8px !important;
      .ark-form-item-content {
        width: 100%;
        max-width: 330px;
        margin-left: 0px !important;
      }
    }
    .markBox.tooltipMarkBoxOne textarea.ark-input {
      height: 26px;
    }
    .presaleStockPop .ark-tooltip {
      width: 100%;
    }
    .presaleStockPop .ark-tooltip-inner {
      max-width: 600px;
    }
    .presaleStockPop .ark-poptip {
      width: 100%;
    }
    .presaleStockPop .ark-poptip-rel {
      width: 100%;
    }
    .delayTooltip.ark-poptip-popper .ark-poptip-arrow {
      display: none;
    }
    .delayTooltip.ark-poptip-popper .ark-poptip-arrow:after {
      display: none;
    }
    .getListReturnTable.ark-table-wrapper {
      border: none !important;
      // margin-top: -10px;
      padding-top: 10px;
    }
    .getListReturnTable .ark-table tr {
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
    }
    .getListReturnTable .ark-table:before {
      content: unset;
      height: 0px !important;
    }
    .getListReturnTable .ark-table:after {
      content: unset;
      width: 0px !important;
    }
  </style>
  <style lang="scss" scoped>
    .leftTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #909399;
      .ACTUALAMOUNT {
        color: #FD8B2E;
        font-size: 16px;
      }
      .topTip {
        color: #D0021B;
      }
    }
    .markBox.tooltipMarkBoxOne {
      margin-top: -34px;
    }
    // .getListReturnTable {
    //   margin: 8px 0;
    // }
  </style>
  