<template>
  <view
    class="zb-tooltip"
    :style="{
      '--theme-bg-color': color,
    }"
  >
    <view class="zb_tooltip_content" @click.stop="handleClick">
      <slot name="reference"></slot>
      <view
        class="zb_tooltip__popper helpTips-animation"
        :style="[
          style,
          {
            opacity: isShow ? 1 : 0,
            color:
              color === 'white' || color === '#fff' || color === '#ffffff'
                ? ''
                : '#fff',
            boxShadow:
              color === 'white' || color === '#fff' || color === '#ffffff'
                ? '0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d'
                : '',
            width: width ? width + 'px' : '',
            'white-space': width ? 'pre-wrap' : 'nowrap',
          },
        ]"
      >
        <slot name="content">{{ content }}</slot>
        <view
          class="zb_popper__icon"
          :style="[arrowStyle]"
          :class="[
            {
              zb_popper__up: placement.indexOf('bottom') === 0,
              zb_popper__arrow: placement.indexOf('top') === 0,
              zb_popper__right: placement.indexOf('right') === 0,
              zb_popper__left: placement.indexOf('left') === 0,
            },
          ]"
        >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import props from "./props.js";

export default {
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],

  data() {
    return {
      isShow: this.visible,
      title: "Hello",
      arrowLeft: 0,
      query: null,
      style: {},
      arrowStyle: {},
    };
  },
  onLoad() {},
  watch: {
    isShow: {
      handler(val) {
        this.$emit("update:visible", val);
      },
      immediate: true,
    },
    visible: {
      handler(val) {
        this.isShow = val;
        if (val) {
          this.$nextTick(() => {
            this.handleClick();
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // #ifdef H5
    window.addEventListener("click", () => {
      this.isShow = false;
    });
    // #endif
  },
  methods: {
    close() {
      this.isShow = false;
      this.$emit("close");
    },
    fixedWrap() {
      this.isShow = false;
    },
    handleClick() {
      uni
        .createSelectorQuery()
        .in(this)
        .selectAll(".zb_tooltip_content,.zb_tooltip__popper")
        .boundingClientRect(async (data) => {
          let { left, bottom, right, top, width, height } = data[0];
          let obj1 = data[1];

          let objStyle = {};
          let objStyle1 = {};
            switch (this.placement) {
              case "top":
                if (obj1.width > width) {
                  objStyle.left = `-${(obj1.width - width) / 2}px`;
                } else {
                  objStyle.left = `${Math.abs(obj1.width - width) / 2}px`;
                }

                objStyle.bottom = `${height + 8}px`;
                objStyle1.left = obj1.width / 2 - 6 + "px";

                break;
              case "top-start":
                objStyle.left = `0px`;
                objStyle.bottom = `${height + 8}px`;
                break;

              case "top-end":
                objStyle.right = `0px`;
                objStyle.bottom = `${height + 8}px`;
                objStyle1.right = `8px`;
                break;

              case "bottom":
                if (obj1.width > width) {
                  objStyle.left = `-${(obj1.width - width) / 2}px`;
                } else {
                  objStyle.left = `${Math.abs(obj1.width - width) / 2}px`;
                }

                objStyle.top = `${height + 8}px`;
                objStyle1.left = obj1.width / 2 - 6 + "px";
                break;

              case "bottom-start":
                objStyle.left = `0px`;
                objStyle.top = `${height + 8}px`;
                objStyle1.left = `8px`;
                break;

              case "bottom-end":
                objStyle.right = `0px`;
                objStyle.top = `${height + 8}px`;
                objStyle1.right = `8px`;
                break;

              case "right":
                objStyle.left = `${width + 8}px`;
                if (obj1.height > height) {
                  objStyle.top = `-${(obj1.height - height) / 2}px`;
                } else {
                  objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`;
                }

                objStyle1.top = `${obj1.height / 2 - 6}px`;
                break;
              case "right-start":
                objStyle.left = `${width + 8}px`;
                objStyle.top = `0px`;
                objStyle1.top = `8px`;
                break;

              case "right-end":
                objStyle.left = `${width + 8}px`;
                objStyle.bottom = `0px`;
                objStyle1.bottom = `8px`;
                break;

              case "left":
                objStyle.right = `${width + 8}px`;

                if (obj1.height > height) {
                  objStyle.top = `-${(obj1.height - height) / 2}px`;
                } else {
                  objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`;
                }

                objStyle1.top = `${obj1.height / 2 - 6}px`;
                break;

              case "left-start":
                objStyle.right = `${width + 8}px`;
                objStyle.top = `0px`;
                objStyle1.top = `8px`;
                break;

              case "left-end":
                objStyle.right = `${width + 8}px`;
                objStyle.bottom = `0px`;
                objStyle1.bottom = `8px`;
                break;
            }

          this.style = objStyle;
          // 三角形箭头
          this.arrowStyle = objStyle1;
          this.isShow = !this.isShow;
          if (this.isShow) {
            this.$emit("open");
          } else {
            this.$emit("close");
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
$theme-bg-color: var(--theme-bg-color);

.zb-tooltip {
  position: relative;
}
.zb_tooltip_content {
  height: 100%;
  /* float: left; */
  position: relative;
  display: inline-block;

  // display: flex;
  // flex-direction: row;
  // align-items: center;
  /* overflow: hidden; */
}
.zb_tooltip__popper {
  /* transform-origin: center top; */
  background: $theme-bg-color;

  // visibility: hidden;
  // color:'#fff';
  position: absolute;
  border-radius: 4px;
  font-size: 12px;
  padding: 10px;
  min-width: 10px;
  word-wrap: break-word;
  display: inline-block;
  white-space: nowrap;
  z-index: 9;
  opacity: 1;
  transition: opacity 1s;
}
.zb_popper__icon {
  width: 0;
  height: 0;
  z-index: 9;
  position: absolute;
}
.zb_popper__arrow {
  bottom: -5px;
  /* transform-origin: center top; */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid $theme-bg-color;
}
.zb_popper__right {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid $theme-bg-color;
  left: -5px;
}

.zb_popper__left {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid $theme-bg-color;
  right: -5px;
}

.zb_popper__up {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid $theme-bg-color;
  top: -5px;
}
.fixed {
  position: absolute;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: auto;
  background: red;
  z-index: -1;
}
</style>
