import { Button, Popup } from 'vant'
import {} from 'vant'
import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
import styles from './index.module.less'
import Tip1 from './tip1'
import Tip2 from './tip2'
import { modelType } from '../buttons'
import { useOriginSearch } from '../uses'

export default defineComponent({
  name: 'tips-step',
  setup(props, ctx) {
    const tipShow = ref(false)
    const guide = reactive({
      tipStep: 1,
      tip1: false,
      tip2: false,
    })
    watch(modelType, () => {
      if (modelType.value !== 'practice') return
      handleChange()
    })
    const setLocalData = (key: string) => {
      localStorage.setItem(key, 'ok')
    }
    /** 触发器 */
    const handleChange = () => {
      const search = useOriginSearch()
      // 如果为课后作业 和 单元测验 不引导
      if (search.questionId || search.lessonTrainingId) {
        return
      }
      const isFirstTip = localStorage.getItem('isFirstTip')
      const isFirstModel = localStorage.getItem('isFirstModel')
      if (modelType.value == 'init' && !isFirstTip) {
        tipShow.value = true
        guide.tipStep = 1
      } else if (modelType.value == 'practice' && !isFirstModel) {
        tipShow.value = true
        guide.tipStep = 2
      }
    }
    onMounted(() => {
      handleChange()
    })
    return () => (
      <Popup teleport="body" closeOnClickOverlay={false} class={styles.tipsContainer} v-model:show={tipShow.value}>
        {guide.tipStep == 1 && (
          <Tip1
            onHanldeStop={() => {
              tipShow.value = false
              setLocalData('isFirstTip')
            }}
          />
        )}
        {guide.tipStep == 2 && (
          <Tip2
            onHanldeStop={() => {
              tipShow.value = false
              setLocalData('isFirstModel')
            }}
          />
        )}
      </Popup>
    )
  },
})
