<template>
  <div class="platformorderPop">
    <Tooltip
      placement="right"
      transfer
      class="delayTooltip"
      max-width="880"
      theme="light"
      :delay="600"
      @on-popper-show="showPopperList"
    >
      <div
        style="width: 100%;"
        @mouseenter="getOrderDetail(params)"
      >
        {{ params.value }}
      </div>
      <div slot="content">
        <div class="leftTop">
          <span
            v-if="isMoreFive"
            class="topTip"
          >超过5条明细，请进入退换货单详情查看</span>
        </div>
        <Table
          :columns="goodsColumns"
          :data="goodsList"
          class="getListReturnTable"
        />
        <div class="markBox tooltipMarkBox">
          <Form
            :label-width="84"
            label-position="left"
          >
            <FormItem label="内部备注">
              <Input
                v-model="params.data.REMARK.val"
                type="textarea"
                :autosize="{minRows:1,maxRows: 3}"
                placeholder="暂无信息"
                disabled
                style="width:100%"
              />
            </FormItem>
            <FormItem label="系统备注">
              <Input
                v-model="params.data.SYSREMARK.val"
                type="textarea"
                :autosize="{minRows:1,maxRows: 3}"
                placeholder="暂无信息"
                disabled
                style="width:100%"
              />
            </FormItem>
          </Form>
        </div>
      </div>
    </Tooltip>
  </div>
</template>
 <script type="text/ecmascript-6">
  // 折叠面板组件
  const R3 = window.R3;

  const { network, urlSearchParams, store } = R3;
  export default {
    name: '',
    props: {
      params: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        goodsColumns: [ // 订单商品详情
          {
            title: '明细类型',
            align: 'left',
            key: 'TYPE',
            tooltip: true,
          },
          {
            title: 'sku',
            align: 'left',
            key: 'SKU',
            width: 90,
            tooltip: true,
          },
          {
            title: '商品编码',
            align: 'left',
            key: 'PRODUCTCODE',
            width: 90,
            tooltip: true,
          },
          {
            title: '商品名称',
            align: 'left',
            key: 'TITLE',
            width: 130,
            tooltip: true,
          },
          {
            title: '规格',
            align: 'left',
            key: 'NORMSDETAILNAMES'
          },
          {
            title: '颜色',
            align: 'left',
            key: 'COLOR'
          },
          {
            title: '尺寸',
            align: 'left',
            key: 'SIZE'
          },
          {
            title: '退款/换货金额',
            align: 'left',
            key: 'REFUND_FEE'
          },
          {
            title: '退货/换货数量',
            align: 'left',
            key: 'REFUNDNUM'
          },
          {
            title: '入库数量',
            align: 'left',
            key: 'INSTORENUM'
          },
        ],
        goodsList: [],
        isMoreFive: false,
      };
    },
    methods: {
      showPopperList() {
        if (window.location.href.indexOf('REFUNDUPDATE') > -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 = {
            table: 'T_V_OMSRECEDEORDERPRODUCT',
            isdroplistsearch: false,
            range: 5,
            startindex: 0,
            // fkdrplist: { searchcols: 'OMSONLINEORDERID' },
            fixedcolumns: { OMSRefundOrderId: [`=${params.data.ID.val}`] }
          };
          network.post('/p/cs/list/query', virtual).then((res) => {
            if (res.data.rows.length > 0) {
              console.log("🚀 ~ file: returnAllskuhover.vue:157 ~ network.post ~ res.data:", res.data)
              if (res.data.total > 5) {
                this.isMoreFive = true;
              } else {
                this.isMoreFive = false;
                this.getExchangeDetail(params);
              }
              let data = [];
              res.data.rows.forEach(item => {
                let obj = {
                  TYPE: '退货',
                  SKU: item.SKU.val,
                  PRODUCTCODE: item.PRODUCTCODE.val,
                  TITLE: item.TITLE.val,
                  NORMSDETAILNAMES: item.NORMSDETAILNAMES.val,
                  REFUND_FEE: item.REFUND_FEE.val,
                  REFUNDNUM: item.REFUNDNUM.val,
                  INSTORENUM: item.INSTORENUM ? item.INSTORENUM.val : '',
                  COLOR: `${item.NORMS1NAME.val || ''} ${item.NORMS1CODE.val || ''}`,
                  SIZE: `${item.NORMS2NAME.val || ''} ${item.NORMS2CODE.val || ''}`
                };
                data.push(obj);
              });
              this.goodsList = data;
            } else {
              this.goodsList = [];
            }
          });
        }
      },
      getExchangeDetail(params) {
        let virtual = {
          table: 'T_V_OMSCHANGEORDERPRODUCT',
          isdroplistsearch: false,
          range: 5,
          startindex: 0,
          fixedcolumns: { OMSRefundOrderId: params.data.ID.val }
        };
        network.post('/p/cs/list/query', virtual).then((res) => {
          let data = [];
          res.data.rows.forEach(item => {
            let obj = {
              TYPE: '换货',
              SKU: item.SKU.val,
              PRODUCTCODE: item.PRODUCTCODE.val,
              TITLE: item.TITLE.val,
              NORMSDETAILNAMES: item.NORMSDETAILNAMES.val,
              REFUND_FEE: item.REFUND_FEE.val,
              REFUNDNUM: item.REFUNDNUM.val,
              INSTORENUM: '',
              COLOR: `${item.NORMS1NAME.val || ''} ${item.NORMS1CODE.val || ''}`,
              SIZE: `${item.NORMS2NAME.val || ''} ${item.NORMS2CODE.val || ''}`
            };
            data.push(obj);
          });
          this.goodsList = [...this.goodsList, ...data];
          if (this.goodsList.length > 5) {
            this.isMoreFive = true;
            this.goodsList = this.goodsList.slice(0, 5);
          } else {
            this.isMoreFive = false;
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  .markBox.tooltipMarkBox {
    margin-bottom: 6px;
  }
  .markBox.tooltipMarkBox .ark-form-item {
    display: flex;
    align-items: center;
    margin-bottom: -8px !important;
    .ark-form-item-content {
      width: 100%;
      max-width: 600px;
      margin-left: 0px !important;
    }
  }
  .markBox.tooltipMarkBox textarea.ark-input {
    height: 26px;
  }
  .platformorderPop .ark-tooltip {
    width: 100%;
  }
  .platformorderPop .ark-tooltip-inner {
    max-width: 600px;
  }
  .getListReturnTable.ark-table-wrapper {
    border: none !important;
    margin-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.tooltipMarkBox {
    margin-top: -34px;
  }
  // .getListReturnTable {
  //   margin: 8px 0;
  // }
</style>
