<template>
  <iframe id="v-component wx-login-iframe" scrolling="no" width="100%" height="390" frameBorder="0" allowTransparency="true" :src="src"></iframe>
</template>

<script>
import storage from '../../utils/storage'
export default {
  name: 'WxEwm',
  props: {
    appid: {
      type: String,
      required: true
    },
    redirectUri: {
      type: String,
      required: true
    },
    scope: {
      type: String,
      default: 'snsapi_login'
    },
    href: String
  },
  data () {
    return {}
  },
  computed: {
    src () {
      if (this.href) {
        return `https://open.weixin.qq.com/connect/qrconnect?appid=${this.appid}&redirect_uri=${encodeURIComponent(this.redirectUri)}&response_type=code&scope=${this.scope}&state=${this.makeState()}&href=${this.href}#wechat_redirect`
      } else {
        return `https://open.weixin.qq.com/connect/qrconnect?appid=${this.appid}&redirect_uri=${encodeURIComponent(this.redirectUri)}&response_type=code&scope=${this.scope}&state=${this.makeState()}#wechat_redirect`
      }
    }
  },
  created () {
  },
  methods: {
    makeState () {
      let state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
      storage.setSession('state', state)
      return state
    }
  }
}
</script>