<template>
  <div class="platformorderPop">
    <div
        class="platform"
        style="width: 100%;"
        v-if='!showToolTip'
        @mouseenter="changeShowToolTip(params)"
      >
        <div>
          <component style="display: inline-block;" :is="getLinkUrl(params)? 'a': 'div'" target="_blank" v-for="(item, i) in platformNo" :key="i" :href='getLinkUrl({
            data: {
              PLATFORM: {
                refobjid: params.data.PLATFORM.refobjid,
                val: params.data.PLATFORM.val
              }
            },
            value: item
          })'>{{item}}<span v-if="i !== platformNo.length-1" style="color:#000;">,</span>
          </component>
        </div>
      </div>
    <Tooltip
      transfer
      class="delayTooltip"
      max-width="800"
      theme="light"
      :delay="800"
      @on-popper-show="showPopperList(params)"
      v-if="showToolTip"
    >
      <div
        style="width: 100%;"
      >
      <!-- @click="getOrderDetail(params)" -->
        <div @mouseleave="hide()">
          <component style="display: inline-block;" :is="getLinkUrl(params)? 'a': 'div'" target="_blank" v-for="(item, i) in platformNo" :key="i" :href='getLinkUrl({
            data: {
              PLATFORM: {
                refobjid: params.data.PLATFORM.refobjid,
                val: params.data.PLATFORM.val
              }
            },
            value: item
          })'>{{item}}<span v-if="i !== platformNo.length-1" style="color:#000;">,</span>
          </component>
        </div>
      </div>
      <div slot="content">
        <div class="leftTop">
          <span>订单实付金额：<span class="ACTUALAMOUNT">￥{{ params.data.ACTUALAMOUNT.val }}</span></span>
          <span
            v-if="isMoreFive"
            class="topTip"
          >超过5条明细，请进入订单详情查看</span>
        </div>
        <Table
          :columns="goodsColumns"
          :data="goodsList"
          class="getListReturnTable"
        />
        <div class="markBox tooltipMarkBoxOne">
          <Form
            :label-width="84"
            label-position="left"
          >
            <FormItem label="买家备注">
              <Input
                v-model="params.data.BUYERMESSAGE.val"
                type="textarea"
                :autosize="{minRows:1,maxRows: 3}"
                placeholder="暂无信息"
                disabled
                style="width:100%;"
              />
            </FormItem>
            <FormItem label="卖家备注">
              <Input
                v-model="params.data.SELLERMEMO.val"
                type="textarea"
                :autosize="{minRows:1,maxRows: 3}"
                placeholder="暂无信息"
                disabled
                style="width:100%"
              />
            </FormItem>
            <FormItem label="内部备注">
              <Input
                v-model="params.data.INSIDEREMARK.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">
 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 {
        showToolTip: false,
        goodsColumns: [ // 订单商品详情
          {
              title:'图片',
              key: 'PICPATH',
              render: (h, params) => {
                return h(
                  'div',
                  {
                    class:{
                      imgBox: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)=>{
                          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=($(".imgBox")[params.index].top)+'px'
                          txt3.style.left=($(".imgBox")[0].offsetLeft)+30+'px'
                          $(".imgBox")[params.index].append(txt3)
                        },
                        'mouseleave':(e)=>{
                          $("#enlargeImg").remove();
                        }
                      }
                    },
                    )
                  ]

                )
              }
          },
          {
            title: '商品名称',
            align: 'left',
            key: 'TITLE',
            width: 130,
            tooltip: true,
          },
          {
            title: 'SKU',
            align: 'left',
            key: 'SKU',
            width: 130,
            tooltip: true,
          },
          {
            title: '商品编码',
            align: 'left',
            key: 'PRODUCTCODE',
            width: 100,
            tooltip: true,
          },
          {
            title: '商品状态',
            align: 'left',
            key: 'ORDERSTATUS',
            width: 100,
            render: (h, params) => {
                // const val = params.row.PRODUCTSTATUS.refobjval
                // console.log("🚀 ~ file: platformorderhover.vue:110 ~ data ~ params.row:", params.row)
                // let text = ''
                // switch(val) {
                //   case 1:
                //     text = '正常'
                //     break
                //   case 2:
                //     text = '退款中'
                //     break
                //   case 3:
                //     text = '退款完成'
                //     break
                // }
                return h('span', {}, params.row.PRODUCTSTATUS);
            }
          },
          {
            title: '商品标识',
            align: 'left',
            key: 'GIFT_TYPE',
            width: 100,
            render: (h, params) => {
                console.log("🚀 ~ params:", params.row.GIFT_TYPE, params.row.IS_LACK)
                return h('span',{
                  style: {
                    padding: '4px',
                    display: 'inline-block',
                  }
                } , [
                  h('span', {
                    style: {
                      color: '#ed1a14',
                      border: '1px solid #ed1a14',
                      'margin-right': '4px',
                      display: params.row.IS_LACK === '是' ? 'inline-block' : 'none'
                    }
                  }, '缺'),
                  h('span', {
                    style: {
                      color: '#63BA4E',
                      border: '1px solid #63BA4E',
                      'margin-right': '4px',
                      display: params.row.GIFT_TYPE === '系统赠品' ? 'inline-block' : 'none'
                    }
                  }, '系统赠品'),
                  h('span', {
                    style: {
                      color: '#060',
                      border: '1px solid #060',
                      'margin-right': '4px',
                      display: params.row.GIFT_TYPE === '平台赠品' ? 'inline-block' : 'none'
                    }
                  }, '平台赠品'),
                  h('span', {
                    style: {
                      color: 'var(--primary-color)',
                      border: '1px solid var(--primary-color)',
                      'margin-right': '4px',
                      display: params.row.GROUPTITLE ? 'inline-block' : 'none'
                    }
                  }, '组合')
                ]);
            }
          },
          {
            title: '成交金额',
            align: 'left',
            key: 'ACTUALAMOUNT'
          },
          {
            title: '数量',
            align: 'left',
            key: 'NUM'
          },
          {
            title: '商品规格',
            align: 'left',
            key: 'NORMSDETAILNAMES',
            width: 100,
            render: (h, params) => {
                return h('span', {}, `${params.row.NORMS2NAME},${params.row.NORMS1NAME}`);
            }
          },
          {
            title: '是否赠品',
            align: 'left',
            key: 'ISGIFT'
          },
          {
            title: '可用数',
            align: 'left',
            key: 'QTYFREE'
          },
          {
            title: '计划发货时间',
            align: 'left',
            key: 'PRESALEPLANDELIVERYDATE'
          },
        ],
        goodsList: [],
        isMoreFive: false,
        platformNo: [],
        startTime:0, // 鼠标进入元素的时间戳
        hoverTime: 600, // hover时间阈值，单位为毫秒
      };
    },
    methods: {
      getLinkUrl(params) {
        return utils.getLinkUrl(params)
      },

      showPopperList(params) {
        this.getOrderDetail(params);
        if (window.location.href.indexOf('ORDERMANAGEMENTEDITOR') > -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';
        }
      },
      hide(){
        // this.showToolTip = false;
        this.endTime = Date.now();
        // let duration = this.endTime - this.startTime;
        if(this.timer) {
          clearInterval(this.timer)
        }
      },
      changeShowToolTip() {
        this.showToolTip = true;
        this.startTime = Date.now();
        this.timer = setInterval(()=>{
          let duration = Date.now() - this.startTime;
          // 判断hover时间是否超过阈值
          if (duration >= this.hoverTime) {
            // 执行操作，比如改变背景颜色
            clearInterval(this.timer)
            this.getOrderDetail();
          }
        },1)
      },
      getOrderDetail(params) {
        // if(this.showToolTip){
          if (this.goodsList.length == 0) {
            let virtual = {
              table: 'T_V_GETORDER',
              isdroplistsearch: false,
              range: 5,
              startindex: 0,
              fkdrplist: { searchcols: 'OMSONLINEORDERID' },
              fixedcolumns: { OMSONLINEORDERID: [`=${this.params.data.ID.val}`] }
            };
            network.post('/p/cs/list/query', virtual).then((res) => {
              if (res.data.rows.length > 0) {
                if (res.data.total > 5) {
                  this.isMoreFive = true;
                } else {
                  this.isMoreFive = false;
                }
                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].val){
                        try {
                            let arr=JSON.parse(res.data.rows[i][keyName].val)
                            if(arr instanceof Array){
                              res.data.rows[i][keyName]=arr[0].URL
                            }
                        } catch (error) {
                          res.data.rows[i][keyName]=res.data.rows[i][keyName].val
                        }                        
                      }else {
                        res.data.rows[i][keyName]=''
                      }
                    }else {
                      res.data.rows[i][keyName] = res.data.rows[i][keyName].val;
                    }
                    // res.data.rows[i][keyName] = res.data.rows[i][keyName].val;
                  }
                  data.push(res.data.rows[i]);
                }
                this.goodsList = data;
              } else {
                this.goodsList = [];
              }
            });
          }
        // }
        
      }
    },

    mounted() {
      const value = this.params.value || ''
      this.platformNo = value.split(',')
    }
  };
</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;
  }
  .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.tooltipMarkBoxOne {
    margin-top: -34px;
  }
  // .getListReturnTable {
  //   margin: 8px 0;
  // }
</style>
