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

export default defineComponent({
  name: 'tips-step',
  setup(props, ctx) {
    const tipShow = ref(false)
    const guide = reactive({
        tip1: false,
        tip2: false
    })
    watch(
      () => state.initRendered,
      () => {
        const isFirstTip = localStorage.getItem('isFirstTip')
        if (state.initRendered && !isFirstTip) {
        //   tipShow.value = true
        //   guide.tip1 = true
        // guide.tip2 = false
          console.log('首次渲染结束')
        }
      }
    )
    watch(modelType, () => {
        console.log(modelType.value)
        const isFirstModel = localStorage.getItem('isFirstModel')
        if(modelType.value === 'practice' && !isFirstModel){
            // tipShow.value = true
            // guide.tip1 = false
            // guide.tip2 = true
            console.log('模式更改')
        }
    })
    const setLocalData = (key: string) => {
        localStorage.setItem(key, 'ok')
    }
    return () => (
      <Popup teleport="body" closeOnClickOverlay={false} class={styles.tipsContainer} v-model:show={tipShow.value}>
        {guide.tip1 && <Tip1 onHanldeStop={() => {
            tipShow.value = false
            setLocalData('isFirstTip')
        }} />}
        {guide.tip2 && <Tip2 onHanldeStop={() => {
            tipShow.value = false
            setLocalData('isFirstModel')
        }} />}
      </Popup>
    )
  },
})