import { defineComponent, reactive, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { setGuidanceShow, guidanceShow } from './useDragGuidance';
// 底部拖动区域
export default defineComponent({
  name: 'dragBom',
  setup() {
    const data = reactive({
      guidePos: 'bottom'
    });
    const guidanceShowDela = ref(false);
    const initGuidePos = () => {
      const pageHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const pageWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      const guideHeight =
        document.querySelector('.bom_guide')?.clientHeight || 0;
      const guideWidth = document.querySelector('.bom_guide')?.clientWidth || 0;
      const dragBBox = document
        .querySelector('.bom_drag')
        ?.getBoundingClientRect();
      const dragTop = dragBBox?.top || 0;
      const dragLeft = dragBBox?.left || 0;
      // 引导页出现在下边
      if (pageHeight - dragTop > guideHeight) {
        data.guidePos = 'bottom';
      } else {
        // 引导页出现在左边or右边
        data.guidePos = dragLeft > guideWidth ? 'left' : 'right';
      }
    };
    onMounted(() => {
      if (guidanceShow.value) {
        const _itme = setTimeout(() => {
          clearTimeout(_itme);
          initGuidePos();
          guidanceShowDela.value = true;
        }, 300);
      }
    });
    return () => (
      <>
        <div class={[styles.dragBom, 'bom_drag']}>
          <div class={styles.box}></div>
          <div class={styles.box}></div>
        </div>
        {guidanceShow.value && (
          <div
            onClick={setGuidanceShow}
            class={[
              styles.guide,
              data.guidePos === 'left' && styles.guideLeft,
              data.guidePos === 'right' && styles.guideRight,
              !guidanceShowDela.value && styles.hideGuide,
              'bom_guide'
            ]}>
            <div class={styles.guideBg}></div>
            <div
              class={styles.guideDone}
              onClick={e => {
                e.stopPropagation();
                setGuidanceShow();
              }}></div>
          </div>
        )}
      </>
    );
  }
});
