<template>
  <div class="box" ref="box">
    <div
      class="top"
      ref="top"
      :style="{
        height: isfooter && footerShow ? height : '100%',
        userSelect: isMove ? 'none' : 'auto',
      }"
    >
      <slot name="header"></slot>
    </div>
    <template v-if="isfooter">
      <div class="resize" ref="dividingLine">
        <div class="footer-show" ref="resize">
          <span>
            <i class="el-icon-d-caret" title="底部明细"></i>
          </span>
        </div>
      </div>
      <div
        :style="{
          userSelect: isMove ? 'none' : 'auto',
          height: height
            ? `calc(95% - 20px - ${height}) `
            : '',
        }"
        v-show="isfooter && footerShow"
        class="footer"
        ref="footer"
      >
        <slot name="footer"></slot>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'Drag',

  data() {
    return {
      isClick: false,
      footerShow: true,
      boxHeight: 0,
      isMove: false,
      startPosition: 0,
    }
  },
  props: {
    isfooter: {
      type: Boolean,
      default: true,
    },
    elementChange: {
      type: Function,
      default: () => {},
    },
    height: {
      type: String,
      default: 'calc(70% - 20px)',
    },
  },
  mounted() {
    this.topDom = this.$refs.top
    this.footerDom = this.$refs.footer
    const box = this.$refs.box
    this.boxHeight = box.clientHeight
    this.resize = this.$refs.resize
    this.dividingLine = this.$refs.dividingLine
    if (this.resize) {
      this.resize.addEventListener(
        'mousedown',
        this.mousedown,
      )
    }

    document.addEventListener('mousemove', this.mousemove)
    document.addEventListener('mouseup', this.mouseup)
    window.addEventListener('resize', this.onResize)
  },
  destroyed() {
    this.resize &&
      this.resize.removeEventListener(
        'mousedown',
        this.mousedown,
      )
    document.removeEventListener(
      'mousemove',
      this.mousemove,
    )
    document.removeEventListener('mouseup', this.mouseup)
    window.removeEventListener('resize', this.onResize)
  },
  watch: {
    isfooter2(v) {
      if (!v) this.isfooter = true
      else this.isfooter = false
      this.footerTabs()
    },
    isfooter(v) {
      this.resize &&
        this.resize.removeEventListener(
          'mousedown',
          this.mousedown,
        )
      if (v) {
        this.$nextTick(() => {
          this.resize = this.$refs.resize
          this.footerDom = this.$refs.footer
          if (this.resize) {
            this.resize.addEventListener(
              'mousedown',
              this.mousedown,
            )
          }
        })
      }
    },
  },
  methods: {
    onResize() {
      const box = this.$refs.box
      this.boxHeight = box.clientHeight
    },
    mousedown(e) {
      this.resize.setCapture && this.resize.setCapture()
      this.isClick = true
      this.isMove = true
      this.startPosition = e.clientY
    },
    mousemove(e) {
      this.isClick = false
      if (!this.isMove || !this.footerShow) return
      if (this.timer) return
      setTimeout(() => {
        const endY = e.clientY
        const moveLen = endY - this.startPosition
        // let maxT =this.boxHeight - 150
        // if (moveLen < 300) moveLen = 300
        // if (moveLen > maxT) moveLen = maxT
        const topH = this.getheight(this.topDom) + moveLen
        const footerH = this.boxHeight - topH - 20
        if (topH < 150 || footerH < 150) return
        this.topDom.style.height = topH + 'px'
        this.footerDom.style.height = footerH + 'px'
        // this.footerDom.style.height =
        //   this.getheight(this.footerDom) - moveLen + 'px'
        this.startPosition = e.clientY
      }, 16)
    },
    mouseup() {
      if (this.isClick) {
        // this.footerToggle()
        this.isClick = false
      }
      this.isMove = false
      this.resize?.releaseCapture &&
        this.resize.releaseCapture()
    },
    getheight(dom) {
      if (dom) {
        let height = getComputedStyle(dom).height
        height = height.replace(/[^0-9.]/gi, '')
        return Number(height)
      }
    },
    footerToggle() {
      this.footerShow = !this.footerShow
    },
  },
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* border: 1px solid #ff0000; */
}

.top {
  width: 100%;
  border-radius: 10px;
  background: #fff;
  padding-top: 10px;
  overflow: hidden;
  box-sizing: border-box;
  /* background: skyblue; */
}
.top > div,
.footer > div {
  display: flex;
  height: 100%;
  width: 100%;
}
.top > div {
  flex-direction: column;
  /* padding-top: 10px; */
  box-sizing: border-box;
}

.footer {
  width: 100%;
  height: 30%;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  margin-top: 10px;
  /* background: tomato; */
}
.resize {
  width: 100%;
  height: 0px;
}
.footer-show {
  position: relative;
  text-align: center;
  height: 1px;
  cursor: row-resize;
  background-color: #f5f7fa;
  /* border-top: 1px solid #e4e7ed; */
}
.footer-show::after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 223px;
  height: 26px;
  content: '';
  transform: translate(-50%, 0);
  background: linear-gradient(
    to right,
    transparent,
    #eeeeee,
    transparent
  );
}
.footer-show:hover::after {
  display: block;
}
.footer-show span {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 32px;
  z-index: 5;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ddd;
}
.footer-show:hover span {
  display: block;
}
.footer-show i:hover {
  color: #1d8acf;
}

.footer-show i {
  font-weight: bold;
  color: #999;
  font-size: 26px;
  line-height: 32px;
}
</style>
