<template>
  <!-- 点击式按钮建议高度介于36px与46px  -->
  <div id="vaptchaContainer" style="width: 300px;height: 36px;">
    <!--vaptcha-container是用来引入VAPTCHA的容器，下面代码为预加载动画，仅供参考-->
    <div class="vaptcha-init-main">
      <div class="vaptcha-init-loading">
        <a href="/" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background: new 0 0 50 50; width: 14px; height: 14px; vertical-align: middle" xml:space="preserve">
            <rect x="0" y="9.22656" width="4" height="12.5469" fill="#CCCCCC">
              <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
              <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
            </rect>
            <rect x="10" y="5.22656" width="4" height="20.5469" fill="#CCCCCC">
              <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
              <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
            </rect>
            <rect x="20" y="8.77344" width="4" height="13.4531" fill="#CCCCCC">
              <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
              <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
            </rect>
          </svg>
        </a>
        <span class="vaptcha-text">Vaptcha Initializing...</span>
      </div>
    </div>
  </div>
</template>

<script>
const extend = function (to, _from) {
  for (const key in _from) {
    to[key] = _from[key];
  }
  return to;
}

export default {
  props: {
    type: {
      type: String,
      default: 'click'
    },
    scene: {
      type: String,
      default: ''
    },
    vpStyle: {
      type: String,
      default: 'dark'
    },
    color: {
      type: String,
      default: '#3C8AFF'
    },
    lang: {
      type: String,
      default: 'zh-CN'
    }
  },
  mounted() {
    var config = extend({
      vid: '6121123db849dfa2f02958c6',
      container: this.$refs.vaptcha,
      style: this.vpStyle
    }, this.$props)
    this.loadV2Script().then(() => {
      window.vaptcha(config).then(obj => {
        this.$emit('input', obj)
        obj.render()
      })
    })
  },
  methods: {
    loadV2Script() {
      if (typeof window.vaptcha === 'function') { //如果已经加载就直接放回
        return Promise.resolve()
      } else {
        return new Promise(resolve => {
          var script = document.createElement('script')
          script.src = 'https://v-cn.vaptcha.com/v3.js'
          script.async = true
          script.onload = script.onreadystatechange = function () {
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
              resolve()
              script.onload = script.onreadystatechange = null
            }
          }
          document.getElementsByTagName("head")[0].appendChild(script)
        })
      }
    }
  }

}
</script>

<style>
.vaptcha-init-main {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}
.vaptcha-init-loading {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.vaptcha-init-loading > a {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: none;
}

.vaptcha-init-loading .vaptcha-text {
  font-family: sans-serif;
  font-size: 12px;
  color: #cccccc;
  vertical-align: middle;
}
</style>