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,
      tableAuthStep: []
    }
  },
  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: {
    getTipCondition(outerIndex, innerIndex) {
      if (this.companyList[outerIndex].customerStatus === '生效' &&
        this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].accountStatusReal === '生效'
      ) {
        if (this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].authorizationStatus === 0 &&
          this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].legalAuthorizationStatus === 0) {
          return true
        }
        if (this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].authorizationStatus === 0 &&
          this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].legalAuthorizationStatus === 4) {
          return true
        }
        if (this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].authorizationStatus === 4 &&
          this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].legalAuthorizationStatus === 0) {
          return true
        }
      }
      return false
    },
    initDriver(outerIndex, innerIndex) {
      console.log(this.companyList)
      const stepList = []
      // 去授权引导 -- 客户状态生效且登记薄状态为未失效
      const tipDom = document.querySelectorAll(`.authorization-${outerIndex}-${innerIndex}:nth-child(1)`)
      const tipCondition = this.getTipCondition(outerIndex, innerIndex)

      console.log(tipDom)
      if (tipDom && tipCondition) {
        stepList.push({
          element: `.authorization-${outerIndex}-${innerIndex}:nth-child(1)`,
          popover: {
            title: '去授权',
            description: `<div>
              <div>为确保账户真实性及安全性，需法人先进行账户授权</div>
              <div id="driver-popover-description-countdownText">${this.countdownText ? this.countdownText : ''}</div>
            </div>`,
            opacity: 0
          }
        })
      }

      // 入金激活次数超时引导
      const tipAcitveTimeout = this.companyList[outerIndex].customerStatus === '生效' &&
      this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].accountStatusReal === '生效' &&
      this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].authorizationStatus === 4 && this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].bindAccountInfoList.length && this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].bindAccountInfoList[0].bindSts === 8
      if (tipDom && tipAcitveTimeout) {
        stepList.push({
          element: `.authorization-${outerIndex}-${innerIndex}:nth-child(1)`,
          popover: {
            title: '入金失效',
            description: `<div>
              <div>超过入金激活次数或时效，请重设入金激活金额</div>
            </div>`,
            opacity: 0
          }
        })
      }

      // 客户状态&登记簿状态非失效，授权成功，未绑定任何实体账户
      const tipBind = document.querySelectorAll(`.binding-account-${outerIndex}-${innerIndex}:nth-child(1)`).length
      const tipBindCondition = this.companyList[outerIndex].customerStatus === '生效' &&
      this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].accountStatusReal === '生效' &&
      this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].authorizationStatus === 4 && this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].bindAccountInfoList.length === 0

      if (tipBind && tipBindCondition) {
        stepList.push({
          element: `.binding-account-${outerIndex}-${innerIndex}:nth-child(1)`,
          popover: {
            title: '绑定实体账户',
            description: '请继续绑定实体账户并进行激活，以完成账户的全部设置',
            opacity: 0
          }
        })
      }

      // 客户状态&登记簿状态未失效，登记簿创建后，且入金激活状态未成功
      const tipActive = document.querySelectorAll('.activation:nth-child(1)').length
      const tipActiveCondition = this.companyList[outerIndex].customerStatus === '生效' &&
      this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].accountStatusReal === '生效' &&
      this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].bindAccountInfoList.length &&
      [0, 2].includes(this.companyList[outerIndex].vipAccountBasicInfoList[innerIndex].bindAccountInfoList[0].bindSts)

      if (tipActive && tipActiveCondition) {
        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>`,
            opacity: 0
          }
        })
      }
      this.driverObj = driver({
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        steps: stepList,
        overlayOpacity: 0,
        showButtons: ['close']
      })
      this.driverObj.drive()
    },
    // 生成授权认证超时引导
    createAuthorizationTimeoutGuide(index) {
      const stepList = []
      if (document.getElementById(`new-account-${index}`)) {
        stepList.push({
          element: `#new-account-${index}`,
          popover: {
            title: '授权认证超时',
            description: '超过授权次数或授权失效，请重新进行账户开通'
          }
        })
      }
      this.driverObj = driver({
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        steps: stepList,
        overlayOpacity: 0,
        showButtons: ['close']
      })
      this.driverObj.drive()
    },
    // 生成入金失效引导
    createDepositInvalidGuide(index) {
      const stepList = []
      if (document.getElementById(`new-account-${index}`)) {
        stepList.push({
          element: `#new-account-${index}`,
          popover: {
            title: '入金失效',
            description: '超过入金激活次数或时效，请重新进行账户开通',
            opacity: 0
          }
        })
      }
      this.driverObj = driver({
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        steps: stepList,
        overlayOpacity: 0,
        showButtons: ['close']
      })
      this.driverObj.drive()
    },
    // 表格授权中+绑卡引导
    createTableAuthorizationGuide(parentIndex, index) {
      if (document.querySelectorAll(`.authorization-${parentIndex}-${index}:nth-child(1)`)) {
        this.tableAuthStep.push({
          element: `.authorization-${parentIndex}-${index}:nth-child(1)`,
          popover: {
            title: '去授权',
            description: `<div>
              <div>为确保账户真实性及安全性，需法人先进行账户授权</div>
              <div id="driver-popover-description-countdownText">${this.countdownText ? this.countdownText : ''}</div>
            </div>`,
            opacity: 0,
            showButtons: ['close']
          }
        })
      }
      if (document.querySelectorAll(`.binding-account-${parentIndex}-${index}:nth-child(1)`).length) {
        this.tableAuthStep.push({
          element: `.binding-account-${parentIndex}-${index}:nth-child(1)`,
          popover: {
            title: '绑定实体账户',
            description: '请继续绑定实体账户并进行激活，以完成账户的全部设置',
            showButtons: ['close']
          }
        })
      }
      this.activeDriver()
    },
    activeDriver() {
      this.driverObj = driver({
        // nextBtnText: '下一步',
        // prevBtnText: '上一步',
        // doneBtnText: '完成',
        steps: this.tableAuthStep,
        overlayOpacity: 0,
        showButtons: ['close']
      })
      this.driverObj.drive()
    }
  }
}
