<template>
    <div class="presaleStockPop">
      <Poptip
        transfer
        popper-class="delayTooltip"
        max-width="1000"
        placement="top-start"
        width="100%"
        theme="light"
        :delay="600"
      >
      <!-- @on-popper-show="showPopperList" -->
        <div
          style="width: 100%;"
          @click="getOrderDetail(params)"
        >
        <!-- @mouseenter="getOrderDetail(params)" -->
          <div style="width: 100%;color:var(--primary-color)">
            {{params.value}}
          </div>
        </div>
        <div slot="content">
          <Table
            :columns="goodsColumns"
            :data="goodsList"
            class="getListReturnTable"
          />
          <footer v-if="goodsList.length>0" style="display: flex; justify-content: flex-end; margin-top: 16px">
            <Button
              type="posdefault"
              style="margin-right: 8px;"
              @click="submit(params)"
            >
              保存并启用
            </Button>
            <Button
              type="fcdefault"
              @click="clearPopTipList()"
            >
              取消
            </Button>
          </footer>
        </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: '平台sku编码',
              align: 'left',
              key: 'extskuid',
              width: 130,
              tooltip: true,
            },
            {
              title: '平台商品标题',
              align: 'left',
              key: 'title',
              width: 100,
              tooltip: true,
            },
            {
              title: '规格',
              align: 'left',
              key: 'skuspec',
              width: 100,
              tooltip: true,
            },
            {
              title: '上下架状态',
              align: 'left',
              key: 'approveStatus',
              width: 100,
              tooltip: true,
            },
            {
              title: '平台库存',
              align: 'left',
              key: 'platqtyfee',
              width: 100,
              tooltip: true,
            },
            {
              title: '店铺可用数',
              align: 'left',
              key: 'shopqtyfee',
              width: 100,
              tooltip: true,
            },
            {
              title: '预售库存',
              align: 'left',
              key: 'presaleqtyfee',
              width: 100,
              tooltip: true,
            },
            {
              title: '预售拦截数量',
              align: 'left',
              key: 'intercepqtyfee',
              width: 100,
              tooltip: true,
            },
            {
              title: '是否预售',
              align: 'left',
              key: 'ispresale',
              width: 100,
              tooltip: true,
            },
            {
              title: '设置预售库存',
              align: 'left',
              key: 'PRESALEQTY',
              width: 100,
              render: (h, params) => {
                let this_=this
                return h(
                  'Input',
                  {
                    style: {
                      width:'66px',
                    },
                    props: {
                      value: params.row.PRESALEQTY,
                      number: true,
                      disabled:params.row.ispresale=='否'?true:false
                    },
                    on: {
                      'on-blur': (event) => {
                        this.goodsList[params.index].PRESALEQTY = event.target.value
                      }
                    }
                  },
                );
              },
            },
          ],
          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,
              iesstoreid: params.data.IESSTOREID.refobjid,
              iesshopid: params.data.IESSHOPID.refobjid,
              ieswarehouseid: params.data.IESWAREHOUSEID.refobjid
            };
            network.post('/p/cs/inventory/query/presale/stock', 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;
                this.goodsList.forEach(item => {
                  item.PRESALEQTY = ''
                })
              } else {
                this.goodsList = [];
              }
            });
          }
        },
        submit(data) {
          let params = []
          this.goodsList.forEach(item => {
            if(item.PRESALEQTY){
              let obj = {
                "ISACTIVE": "Y",
                "SHOPID": data.data.IESSHOPID.refobjid,
                "SKU": data.data.SKU.val,
                "PRESALEQTY": item.PRESALEQTY,
                "SKU_ID": data.data.IESSKUID.val,
                "EXTSKUID": item.extskuid
              }
              params.push(obj)
            }
          })
          network.post('/p/cs/inventory/query/presale/stock/save', params).then((res) => {
            if(res.data.code == 0){
              // this.$Message.success(res.data.message);
              this.$Modal.fcWarning({
                title: '提示',
                mask: true,
                content: res.data.message
              });
              this.clearPopTipList();
              this.$emit('refreshData');// 刷新列表和单对象界面
              document.querySelector('#refresh').click(); // 标准列表刷新按钮
              // this.$emit('closeActionDialog', true);
            }
          })
        }
      },
  
      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>
  