<template>
    <div class="presaleStockPop">
      <!-- trigger="hover" -->
      <Poptip
        transfer
        popper-class="delayTooltip"
        max-width="1200"
        theme="light"
        @on-popper-show = 'onpoppershow'
        @on-popper-hide = 'onpoperhide'
        :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"
            :height="150"
            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: 'shop_title',
              width: 130,
              tooltip: true,
            },
            {
              title: '系统订单号',
              align: 'left',
              key: 'id',
              width: 100,
              render: (h, params) => {
                return h('span', {
                    style: {
                        color: 'rgb(15, 142, 233)',
                        textDecoration: 'underline',
                        cursor: 'pointer',
                        padding: '0px 3px',
                    },
                    props: {
                      value: params.row.id,
                    },
                    on: {
                      'click': (event) => {
                        // 跳转
                        R3.store.commit('global/tabOpen', {
                            type: 'tableDetailAction' || 'C',
                            label: '订单编辑',
                            customizedModuleName: 'OrderManagementEditor',
                            customizedModuleId: params.row.id,
                        });
                      }
                    }
                }, params.row.id);
              }
            },
            {
              title: '平台单号',
              align: 'left',
              key: 'tid',
              width: 110,
              tooltip: true,
            },
            {
              title: '状态',
              align: 'left',
              key: 'orderstatus',
              width: 80,
              tooltip: true,
            },
            {
              title: '预售状态',
              align: 'left',
              key: 'presalestatus',
              width: 80,
              tooltip: true,
            },
            {
              title: '付款时间',
              align: 'left',
              key: 'paytime',
              width: 140,
              tooltip: true,
            },
            {
              title: '计划发货时间',
              align: 'left',
              key: 'presaleplandeliverydate',
              width: 140,
              tooltip: true,
            },
          ],
          goodsList: [],
        };
      },
      methods: {
        onpoppershow() {
          let getListReturnTableList = document.getElementsByClassName('getListReturnTable');
          for (let i = 0; i < getListReturnTableList.length; i++) {
            let objNode = getListReturnTableList[i].parentElement.parentElement.parentElement.parentElement;
            objNode.style.display = 'block';
          }
        },
        onpoperhide() {
          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';
          }
        },
        showPopperList() {
          if (window.location.href.indexOf('FULL_INVENTORY_QUERY_REPORT') > -1) {
            setTimeout(() => {
              this.clearPopTipList();
            }, 1);
          }
        },
        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 = {
              ieswarehouseid: params.data.IESWAREHOUSEID.refobjid,
              sku: params.data.SKU.val,
              iesshopid: params.data.IESSHOPID.refobjid
            };
            network.post('/p/cs/inventory/query/report/item/number_of_unshipped', 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>
  