import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import countdownTimer from './countdownTimer.js'

export default {
  mixins: [countdownTimer],
  data() {
    return {
      intervalDomId: null,
      driverObj: null
    }
  },
  mounted() {
    this.intervalDomId = setInterval(() => {
      if (!this.remainingTime) {
        clearInterval(this.intervalDomId)
        return
      }
      if (!document.getElementById('driver-popover-description')) {
        clearInterval(this.intervalDomId)
      }
      document.getElementById(
        'driver-popover-description-countdownText'
      ).innerHTML = `<span>${this.countdownText}</span>`
    }, 1000)
  },
  beforeDestroy() {
    this.driverObj.destroy()
    clearInterval(this.intervalDomId)
  },
  methods: {
    initDriver() {
      const stepList = []
      if (document.getElementById('new-account')) {
        stepList.push({
          element: '#new-account',
          popover: {
            title: '新建账户',
            description: '超过授权次数或授权失效，请重新进行账户开通'
          }
        })
      }
      if (document.querySelectorAll('.authorization:nth-child(1)').length) {
        stepList.push({
          element: '.authorization:nth-child(1)',
          popover: {
            title: '去授权',
            description: `<div>
              <div>为确保账户真实性及安全性，需法人先进行账户授权</div>
              <div id="driver-popover-description-countdownText">${this.countdownText ? this.countdownText : ''}</div>
            </div>`
          }
        })
      }
      if (document.querySelectorAll('.binding-account:nth-child(1)').length) {
        stepList.push({
          element: '.binding-account:nth-child(1)',
          popover: {
            title: '绑定实体账户',
            description: '请继续绑定实体账户并进行激活，以完成账户的全部设置'
          }
        })
      }
      if (document.querySelectorAll('.activation:nth-child(1)').length) {
        stepList.push({
          element: '.activation:nth-child(1)',
          popover: {
            title: '入金激活',
            description: `<div>
              <div>请继续完成账户激活，以完成账户的全部设置</div>
              <div id="driver-popover-description-countdownText">${this.countdownText ? this.countdownText : ''}</div>
            </div>`
          }
        })
      }
      this.driverObj = driver({
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        steps: stepList
      })
      this.driverObj.drive()
    }
  }
}
