import { defineComponent, computed, reactive, onMounted } from 'vue';
import styles from './index.module.less';
// 底部拖动区域
export default defineComponent({
  name: 'dragBom',
  emits: ["guideDone"],
	props: {
		/** 是否显示引导 */
		showGuide: {
			type: Boolean,
			default: false,
		},
	},
  setup(props, { emit }) {
    const data = reactive({
      guidePos: "bottom" as "bottom" | "top",
    });

    const initGuidePos = () => {
      const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const guideHeight = document.querySelector('.bom_guide')?.getBoundingClientRect().height || 0;
      const dragTop = document.querySelector('.bom_drag')?.getBoundingClientRect()?.top || 0;
      data.guidePos = pageHeight - dragTop < guideHeight ? "top" : "bottom";
    }
    onMounted(() => {
      initGuidePos();
    });
    return () => (
      <>
        <div class={[styles.dragBom, 'bom_drag']}>
          <div class={styles.box}></div>
          <div class={[styles.box, styles.right]}></div>
        </div>
        {
          props.showGuide && 
          <div class={[styles.guide, data.guidePos === "top" && styles.guideTop, 'bom_guide']}>
            <div class={styles.guideBg}></div>
            <div class={styles.guideDone} onClick={() => emit("guideDone")}></div>
          </div>          
        }

      </>
    );
  }
});