import { defineComponent } from 'vue'
import { Button } from 'vant'
import { steps as IDSteps } from './constant'
import setpText from './text.json'

const mp3s = (import.meta as any).globEager('../mp3/*.mp3')

import styles from './steps.module.less'

const loop = () => {}

export default defineComponent({
  name: 'DetailTips',
  props: {
    play: {
      type: Function as any,
      default: loop,
    },
    stop: {
      type: Function as any,
      default: loop,
    },
    step: {
      type: Number,
      default: 0
    },
    onNext: {
      type: Function,
      default: (step: number) => {}
    },
    onClose: {
      type: Function,
      default: (step: number) => {}
    }
  },
  data() {
    return {
      audio: new Audio(),
      cloneElement: null as Node | null | undefined
    }
  },
  mounted() {
    this.audio.addEventListener('play', this.play, false)
    this.audio.addEventListener('pause', this.stop, false)
    this.audio.addEventListener('ended', this.stop, false)

    this.setStepContent(this.step)
  },
  unmounted() {
    this.audio.removeEventListener('play', this.play, false)
    this.audio.removeEventListener('pause', this.stop, false)
    this.audio.removeEventListener('ended', this.stop, false)
    if (this.cloneElement) {
      this.cloneElement = null
    }
  },
  methods: {
    setStepContent(step: number) {
      const container = document.getElementById('tips-step-container')
      const steps = container?.querySelectorAll('.' + styles.cloneParent) || []
      for (const step of steps) {
        step.remove()
      }
      this.audio.src = mp3s[`../mp3/${IDSteps[step]}.mp3`].default
      this.audio.play()
      const originElement = document.getElementById('tips-step-' + IDSteps[step])
      this.cloneElement = originElement?.cloneNode(true)
      if (container && originElement && this.cloneElement) {
        const parentElement = document.createElement('div')
        // 此处不要改step
        let pclassName = [styles.cloneParent, styles['step-' + step]].join(' ')
        if (step === 0 || step === 1 || step === 3) {
          pclassName = (originElement.parentElement?.classList.value || '') +  ' ' + pclassName
        }
        console.log(originElement.offsetLeft, originElement.offsetTop)
        parentElement.classList.value = pclassName
        parentElement.appendChild(this.cloneElement)
        parentElement.style.position = 'fixed'
        parentElement.style.top = originElement.offsetTop - 10 + 'px'
        parentElement.style.left = originElement.offsetLeft - 10 + 'px'
        if (step === 0) {
          parentElement.style.top = (originElement.parentElement?.offsetTop || 0) - ((originElement.parentElement?.clientHeight || 0) / 2 ) - 10 + 'px'
          parentElement.style.left = (originElement.parentElement?.offsetLeft || 0) - 10 + 'px'
        }
        if (step === 1) {
          parentElement.style.left = 40 + 'px'
        }
        container.appendChild(parentElement)
      }
    },
    next() {
      this.setStepContent(this.step + 1)
      this.onNext(this.step + 1)
    },
    close() {
      this.audio.pause()
      this.onClose()
    }
  },
  render() {
    // console.log(this.step, this.cloneElement)
    return (
      <div>
        <div class={styles.messagebox}>
          {/* <h3>{setpText[this.step].title}</h3> */}
          <span>{setpText[IDSteps[this.step]].desc}</span>
        </div>
        {this.step < IDSteps.length - 1 ? (
          <Button class={styles.btn} round color="#01C1B5" size="mini" onClick={this.next}>下一步</Button>
        ) : (
          <Button class={styles.btn} round color="#01C1B5" size="mini" onClick={this.close}>知道了</Button>
        )}
      </div>
    )
  }
})
