<template>
  <a-popover
      :visible="visible"
      :placement="placement"
      overlayClassName="j-vxe-popover-overlay"
      :overlayStyle="overlayStyle">

    <template #title>
      <div class="j-vxe-popover-title">
        <div>子表</div>
        <div class="j-vxe-popover-title-close" @click="close">
          <a-icon type="close"/>
        </div>
      </div>
    </template>

    <template #content>
      <transition name="fade">
        <slot v-if="visible" name="subForm" :row="row" :column="column"/>
      </transition>
    </template>

    <div ref="divRef" class="j-vxe-popover-div"></div>

  </a-popover>
</template>
<script lang="ts">
import { ref, reactive, nextTick, defineComponent } from 'vue'
import domAlign from 'dom-align'
import { getParentNodeByTagName } from '../utils/vxeUtils'
import { triggerWindowResizeEvent } from '/@/utils/common/compUtils'
import { cloneDeep } from 'lodash-es'
import { useMessage } from '/@/hooks/web/useMessage'
import { isString } from '/@/utils/is'

export default defineComponent({
  name: 'JVxeSubPopover',
  setup() {
    const visible = ref(false)
    const row = ref<any>(null)
    const column = ref<any>(null)
    const overlayStyle = reactive<{
      width?: number | string,
      maxWidth?: number | string,
      zIndex: number,
    }>({
      zIndex: 100,
    })
    const placement = ref('bottom')
    const divRef = ref<HTMLElement>()
    const { createMessage } = useMessage()

    function toggle(event) {
      if (document.body.clientHeight - event.$event.clientY > 350) {
        placement.value = 'bottom'
      } else {
        placement.value = 'top'
      }
      if (row.value == null) {
        open(event)
      } else {
        row.value.id === event.row.id ? close() : reopen(event)
      }
    }

    function open(event, level = 0) {
      if (level > 3) {
        createMessage.error('打开子表失败')
        console.warn('【JVxeSubPopover】打开子表失败')
        return
      }

      let { row: $row, column: $column, $table, $event: { target } } = event
      row.value = cloneDeep($row)
      column.value = $column

      let className = target.className || ''
      className = isString(className) ? className : className.toString()

      // 点击的是expand，不做处理
      if (className.includes('vxe-table--expand-btn')) {
        return
      }
      // 点击的是checkbox，不做处理
      if (className.includes('vxe-checkbox--icon') || className.includes('vxe-cell--checkbox')) {
        return
      }
      // 点击的是radio，不做处理
      if (className.includes('vxe-radio--icon') || className.includes('vxe-cell--radio')) {
        return
      }
      let parentElem = $table.getParentElem()
      let tr = getParentNodeByTagName(target, 'tr')
      if (parentElem && tr) {
        let clientWidth = parentElem.clientWidth
        let clientHeight = tr.clientHeight
        divRef.value!.style.width = clientWidth + 'px'
        divRef.value!.style.height = clientHeight + 'px'
        overlayStyle.width = Number.parseInt(`${(clientWidth - clientWidth * 0.04)}`) + 'px'
        overlayStyle.maxWidth = overlayStyle.width
        //let realTable = getParentNodeByTagName(tr, 'table')
        //let left = realTable.parentNode.scrollLeft
        let h = event.$event.clientY
        if (h) {
          h = h - 140
        }
        let toolbar = divRef.value!.nextElementSibling
        domAlign(divRef.value, toolbar, {
          points: ['tl', 'tl'],
          offset: [0, h],
          overflow: {
            alwaysByViewport: true,
          },
        })
        nextTick(() => {
          visible.value = true
          nextTick(() => {
            triggerWindowResizeEvent()
          })
        })
      } else {
        let num = ++level
        console.warn('【JVxeSubPopover】table or tr 获取失败，正在进行第 ' + num + '次重试', { event, table: parentElem, tr })
        window.setTimeout(() => open(event, num), 100)
      }
    }

    function close() {
      if (visible.value) {
        row.value = null
        visible.value = false
      }
    }

    function reopen(event) {
      open(event)
    }

    return {
      divRef,
      row,
      column,
      visible,
      placement,
      overlayStyle,
      close,
      toggle,
    }
  },
})
</script>
<style scoped lang="less">
.j-vxe-popover-title {
  .j-vxe-popover-title-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 31px;
    height: 31px;
    text-align: center;
    line-height: 31px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 300ms;

    &:hover {
      color: rgba(0, 0, 0, 0.8);
    }
  }
}

.j-vxe-popover-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 31px;
  z-index: -1;
}
</style>
<style lang="less">
.j-vxe-popover-overlay.ant-popover {
  .ant-popover-title {
    position: relative;
  }
}

.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>