<script setup lang="ts">
import {onMounted, reactive, Ref, ref} from "vue";
import {Step} from "y-tour/src/TourHandler";
// 引入组件
import Tour from "y-tour";

// 控制导航是否展示
const showTour = ref(false)
// 导航组件实例
const tourRef = ref()

// 定义步骤信息
const steps: Step[] = [{
  el: ()=>document.getElementsByClassName('first-but')[0] as HTMLElement,
  beforeActive:(run)=>{
    // 有些情况dom元素不在窗口内，需要先滚动滚动条，然后调用run方法
    document.getElementsByClassName('tour-text')[0].scrollTo({top: 0})
    run()
  },
  title: '下一步',
  description: '点击这里可进行下一步操作'
},{
  el: ()=>document.getElementsByClassName('step-two')[0] as HTMLElement,
  placement: 'top',
  beforeActive:(run, getRect)=>{
    const {targetRect} = getRect()
    let scroll = targetRect.bottom<0? 10-targetRect.bottom:targetRect.bottom
    document.getElementsByClassName('tour-text')[0].scrollTo({top: scroll})
    run()
  },
  title: '第二部',
  description: '点击这个进入第二步'
},{
  el: ()=>document.getElementsByClassName('logo')[0] as HTMLElement,
},{
  el: ()=>document.getElementsByClassName('step-aaa')[0] as HTMLElement,
  beforeActive:(run, getRect)=>{
    const {targetRect} = getRect()
    let scroll = targetRect.top<0? -targetRect.top-10:targetRect.top
    document.getElementsByClassName('tour-text')[0].scrollTo({top: scroll})
    run()
  },
  title: '取消',
  description: '点击这里可取消操作'
},{
  el: ()=>document.getElementsByClassName('four-but')[0] as HTMLElement,
  beforeActive:(run)=>{
    document.getElementsByClassName('tour-text')[0].scrollTo({top: 0})
    run()
  }
},{
  el: ()=>document.getElementsByClassName('five-step')[0] as HTMLElement,
  beforeActive:(run)=>{
    document.getElementsByClassName('tour-text')[0].scrollTo({top: 0})
    run()
  }
},]

// 必须等页面挂在完成后才可以开始导航，否则获取不到dom节点
onMounted(()=>{
  // 打开导航可以使用v-model:show，也可以直接调用组件的open方法
  showTour.value = true
  // tourRef.value.open()
})
</script>