import { defineComponent } from 'vue'
import store from 'store'
import Childs from './child/index.json'
import styles from './index.module.less'

import ZeroStep from './steps/zero-step'

let timer: any = null
let needStop = false

export default defineComponent({
  name: 'DetailTipsContent',
  props: {
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      activeImgNo: 0,
      step: -1,
    }
  },
  mounted() {
    if (store.get('tips-status') !== 'showed') {
      this.step = 0
    }
  },
  methods: {
    startPlay() {
      needStop = false
      clearTimeout(timer)
      timer = setTimeout(() => {
        let n = this.activeImgNo + 1
        if (n > 30) {
          n = 0
        }
        if (!(needStop)) {
          this.activeImgNo = n
          this.startPlay()
        } else {
          needStop = false
        }
      }, 40.3333)
    },
    stopPlay() {
      console.log('stop')
      needStop = true
    },
    close() {
      this.step = -1
      this.onClose()
      // store.set('tips-status', 'showed')
    }
  },
  render() {
    return (
      <div class={styles.content} id="tips-step-container">
        {this.step > -1 ? (
          <ZeroStep
            class={styles.step}
            play={this.startPlay}
            stop={this.stopPlay}
            step={this.step}
            onNext={(step: number) => this.step = step}
            onClose={this.close}
          />
        ) : null}
        <img class={styles.child} src={Childs[this.activeImgNo]}/>
      </div>
    )
  }
})
