import { Button } from 'vant'
import {} from 'vant'
import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
import styles from './index.module.less'
import { getImage } from './images'

export default defineComponent({
  name: 'tips-tip1',
  emits: ['hanldeStop'],
  setup(props, { emit }) {
    const contentRef = ref<HTMLElement>()
    const data = reactive({
      show: false,
      steps: [
        {
          ele: '',
          eleRect: {} as DOMRect,
          img: getImage('step0.png'),
          btnsStyle: {
            top: '-2.13333rem',
          },
          handStyle: {
            top: '-0.42667rem',
          },
          imgStyle: {
            top: '-2.4rem',
          },
        },
        {
          ele: '',
          img: getImage('step1.png'),
          btnsStyle: {
            top: '-2.2rem',
          },
          handStyle: {
            top: '-0.42667rem',
          },
          imgStyle: {
            top: '-2.4rem',
          },
        },
        {
          ele: '',
          img: getImage('step2.png'),
          btnsStyle: {
            top: '-0.7rem',
            left: '-2.5rem',
            'justify-content': 'space-evenly',
            padding: 0,
          },
          handStyle: {
            top: '-0.42667rem',
          },
          imgStyle: {
            top: '-2.7rem',
            left: '-2.3rem',
          },
        },
      ],
      step: 0,
    })

    const getStepELe = () => {
      for (let i = 0; i < data.steps.length; i++) {
        const ele: HTMLElement = document.querySelector(`[data-step='step${i}']`)!
        if (ele) {
          const eleNode: any = ele.cloneNode(true)
          const eleRect = ele.getBoundingClientRect()
          const parentElement = document.createElement('div')
          parentElement.classList.add(styles.parent)
          parentElement.style.left = eleRect?.left - 10 + 'px'
          parentElement.style.top = eleRect?.top - 10 + 'px'
          parentElement.style.width = eleRect?.width + 20 + 'px'
          parentElement.style.height = eleRect?.height + 20 + 'px'
          parentElement.appendChild(eleNode)
          data.steps[i].ele = parentElement.outerHTML
          data.steps[i].eleRect = eleRect
        }
      }
      // console.log(data.steps)
    }
    onMounted(() => {
      getStepELe()
    })

    const handleNext = (step?: number) => {
      if (step !== undefined) {
        data.step = step
      } else {
        if (data.step + 1 >= data.steps.length) {
          handleStop()
          return
        }
        data.step += 1
      }
    }
    const handleStop = () => {
      emit('hanldeStop')
    }
    return () => (
      <div class={styles.content} ref={contentRef} onClick={() => handleNext()}>
        <div
          class={styles.backBtn}
          onClick={(e: Event) => {
            e.stopPropagation()
            handleStop()
          }}
        >
          跳过引导
        </div>
        {data.steps.map((item: any, index) => (
          <div style={{ display: index === data.step ? 'block' : 'none' }} onClick={(e: Event) => e.stopPropagation()}>
            <div
              class={styles.item}
              style={{
                left: `${item.eleRect?.left}px`,
                top: `${item.eleRect?.top}px`,
              }}
            >
              <img class={styles.img} style={item.imgStyle} src={item.img} />
              <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-header.png')} />
              <div class={styles.btns} style={item.btnsStyle}>
                {data.step + 1 == data.steps.length ? (
                  <>
                    <Button
                      class={styles.btn}
                      round
                      color="transparent"
                      style={{ 'border-color': '#fff' }}
                      type="primary"
                      onClick={() => handleNext(0)}
                    >
                      再看一遍
                    </Button>
                    <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
                      完成
                    </Button>
                  </>
                ) : (
                  <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
                    下一步 ({data.step + 1}/{data.steps.length})
                  </Button>
                )}
              </div>
            </div>
            <div innerHTML={item.ele}></div>
          </div>
        ))}
      </div>
    )
  },
})
