import { Button, Popup } 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,
      step: 0,
      steps: [
        {
          ele: '',
          eleRect: {} as DOMRect,
          img: getImage('m1.png'),
          btnsStyle: {
            top: '2.4rem',
            left: '-0.1rem'
          },
          handStyle: {
            top: '0.6rem',
            left: '0.1rem',
          },
          imgStyle: {
            top: '0.6rem',
            left: '-0.2rem',
          },
        },
        {
          ele: '',
          eleRect: {} as DOMRect,
          img: getImage('m2.png'),
          btnsStyle: {
            top: '2.2rem',
          },
          handStyle: {
            top: '0.6rem',
            left: '0.1rem',
          },
          imgStyle: {
            width: '2.6rem',
            top: '0.6rem',
            left: '-0.2rem',
          },
        },
        {
          img: getImage('m3.png'),
          btnsStyle: {
            top: '2.6rem',
          },
          handStyle: {
            top: '0.6rem',
            left: '0.1rem',
          },
          imgStyle: {
            width: '2.45333rem',
            top: '0.6rem',
            left: '-0.2rem',
          },
        },
        {
          ele: '',
          eleRect: {} as DOMRect,
          img: getImage('m4.png'),
          btnsStyle: {
            top: '2.5rem',
            left: '-1.5rem',
          },
          handStyle: {
            top: '0.6rem',
            left: '0.1rem',
          },
          imgStyle: {
            width: '2.45333rem',
            top: '0.6rem',
            left: '-1.7rem',
          },
        },
        {
          ele: '',
          eleRect: {} as DOMRect,
          img: getImage('m5.png'),
          btnsStyle: {
            top: '2.2rem',
            left: '-2rem',
            width: '2.93333rem',
            'justify-content': 'space-evenly',
            padding: 0,
          },
          handStyle: {
            top: '0.6rem',
            left: '0.1rem',
          },
          imgStyle: {
            top: '0.4rem',
            left: '-2rem',
            width: '2.93333rem',
          },
        },
      ],
    })
    const getStepELe = () => {
      for (let i = 0; i < data.steps.length; i++) {
        const ele: HTMLElement = document.querySelector(`[data-step='m${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 = '0'
          parentElement.style.borderRadius = '0.1rem'
          parentElement.appendChild(eleNode)
          data.steps[i].ele = parentElement.outerHTML
          data.steps[i].eleRect = eleRect
        }
      }
    }
    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 () => {
      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: number) => (
            <div
              style={{ display: index === data.step ? 'block' : 'none' }}
              onClick={(e: Event) => e.stopPropagation()}
            >
              <div
                onClick={(e: Event) => e.stopPropagation()}
                class={styles.item}
                style={{
                  width: '2.18667rem',
                  left: `${item.eleRect?.left}px`,
                }}
              >
                <img class={styles.img} style={item.imgStyle} src={item.img} />
                <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-hand2.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>
      )
    }
  },
})
