<template>
  <span class="bi-tableheader">
    <el-popover
      v-if="popperData.content||popperData.imgs"
      placement="top-start"
      min-width="260"
      popper-class="bi-tableheader-popper"
      trigger="hover"
    >
      <div class="tableheader-popper-box">
        <div class="tableheader-popper-content-box">

          <div
            class="tableheader-popper-content"
            v-html="popperData.content||''"
          ></div>

          <div
            v-if="fisrtImg"
            class="tableheader-popper-img-box"
          >
            <div class="tableheader-popper-img">
              <el-image
                style="width: 60px; height: 60px"
                :src="fisrtImg"
                :preview-src-list="popperData.imgs"
                alt="点击查看大图"
                title="点击查看大图"
              ></el-image>
              <span>(1/{{ imgsLenght }})</span>
            </div>
          </div>
        </div>
        <div
          v-if="popperData.update_time"
          class="tableheader-popper-time"
        >
          更新日期: {{ popperData.update_time }}
        </div>
      </div>
      <i
        slot="reference"
        class="tableheader-popver-reference el-icon-question-fill"
        style="color: rgb(134, 144, 156);"
      ></i>
    </el-popover>
  </span>
</template>

<script>
import { h } from 'vue'
export default {
  nama: 'BiTableHeaderPopper',
  props: {
    prop: {
      type: String,
      default: ''
    }
  },
  inject: ['biTable'],
  data() {
    return {
      popoperTagNode: null
    }
  },
  computed: {
    popperData() {
      // let str = ''
      // const column = this.biTable.tbColumns.find((item) => item.prop === this.prop) || {}
      // if (column.headerRender) {
      //   const vNode = column.headerRender(h, column.headerRender)
      //   this.getTagForPopoper([vNode])
      //   // 先去props里面拿content的值如果没拿到就去插槽里面去看下
      //   if (this.popoperTagNode) {
      //     str = this.popoperTagNode.componentOptions.propsData.content || ''
      //   }
      //   // 去插槽里面拿文字，如果插槽里面有多个dom对象的话递归遍历
      //   if (this.popoperTagNode && this.popoperTagNode.componentOptions.children && this.popoperTagNode.componentOptions.children instanceof Array) {
      //     const item = this.popoperTagNode && this.popoperTagNode.componentOptions.children.find((item) => item.data && item.data.slot === 'content')
      //     if (item) str = this.getTextForSlot(item)
      //   }
      // }

      const propInfo = this.biTable.headerPopper.findPopperData(this.prop) || {}

      // if (propInfo && !propInfo.content) propInfo.content = str

      return propInfo

      // return this.biTable.headerPopper.findPopperData(this.prop) || { }
    },
    fisrtImg() {
      if (this.popperData.imgs && this.popperData.imgs.length) {
        return this.popperData.imgs[0]
      }
      return ''
    },
    imgsLenght() {
      if (this.popperData.imgs && this.popperData.imgs.length) {
        return this.popperData.imgs.length
      }
      return 0
    }
  },
  methods: {
    getTagForPopoper(vNodeList) {
      const whitePopoperTagName = ['ElTooltip']
      vNodeList.forEach((e) => {
        if (whitePopoperTagName.every((element) => e.tag && e.tag.includes(element))) {
          this.popoperTagNode = e
        }

        if (e.children) {
          this.getTagForPopoper(e.children)
        }
      })
    },
    getTextForSlot(item) {
      let str = ''
      const getText = (obj) => {
        if (obj.children) {
          obj.children.forEach((e) => {
            if (e.text) {
              str += e.text
            }
            if (e.tag === 'br') {
              str += '</br>'
            }
            if (e.children) {
              e.children.forEach((el) => {
                getText(el)
              })
            }
          })
        } else {
          if (obj.tag === 'br') {
            str += '</br>'
          }
          if (obj.text) {
            str += obj.text
          }
        }
      }
      getText(item)
      return str
    }
  }
}
</script>