<template>
  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
    <template v-if="login">
      <a-spin tip="加载中，马上好" :spinning="!isLoaded">
        <a-card>
          <iframe
            ref="singlepage"
            :src="url"
            :name="this.fullPath"
            class="single-page-iframe"
            @load="load">
          </iframe>
        </a-card>
      </a-spin>
    </template>
  </page-toggle-transition>
</template>

<script>
import PageToggleTransition from '@vue2-client/components/transition/PageToggleTransition'
import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
import { mapState, mapMutations } from 'vuex'
import { CASLogin, doOtherValidate } from '@vue2-client/services/api/cas'

export default {
  name: 'SinglePageView',
  components: { PageToggleTransition },
  props: {
    singlePageUrl: {
      type: String,
      default: ''
    },
    fullPath: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      iframe: null,
      url: '',
      isLoaded: false,
    }
  },
  computed: {
    ...mapState('setting', ['animate', 'iframeSrc']),
    ...mapState('account', { login: 'login', currUser: 'user' })
  },
  created () {
    this.isLoaded = false
    window.addEventListener('message', this.messageFunc)
    if (this.singlePageUrl.indexOf('sso:') !== -1) {
      const serviceKey = this.singlePageUrl.substring(4)
      CASLogin(serviceKey, true).then(res => {
        const redirectUrl = res.redirectUrl
        if (redirectUrl.indexOf('logic@') !== -1) {
          const logicName = redirectUrl.substring(6)
          doOtherValidate(logicName, res.st, serviceKey).then(validateRes => {
            this.url = validateRes.redirectUrl
          })
        } else {
          const join = redirectUrl.split('?')[1] ? '&' : '?'
          this.url = redirectUrl + join + 'ticket=' + res.st + '&timestrap=' + new Date().getTime()
        }
      }).catch(msg => {
        console.warn(msg)
        this.$message.error(msg)
      })
    } else if (this.singlePageUrl.indexOf('http') !== -1) {
      if (this.singlePageUrl.indexOf('?goto=') !== -1) {
        this.url = this.singlePageUrl + '&f_user_id=' + this.currUser.username + '&password=' + this.currUser.password
      } else {
        this.url = this.singlePageUrl
      }
    } else {
      this.url = this.iframeSrc
    }
  },
  mounted () {
    if (!this.login) {
      this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
    }
    this.iframe = this.$refs.singlepage.contentWindow
    this.path = this.$route.path
  },
  beforeDestroy () {
    window.removeEventListener('message', this.messageFunc)
  },
  methods: {
    ...mapMutations('account', ['setLogin']),
    load () {
      if (this.singlePageUrl.indexOf('sso:') === -1) {
        const appdata = {
          singleValues: this.$appdata.getSingleValues(),
          params: this.$appdata.getParams()
        }
        const data = {
          token: localStorage.getItem(ACCESS_TOKEN),
          login: this.login,
          appdata: appdata,
          page: this.singlePageUrl
        }
        console.log('发送参数', data)
        if (this.iframe) {
          this.iframe.postMessage(data, '*')
        }
      }
      this.$emit('load', this.fullPath)
      this.isLoaded = true
    },
    mounted () {
      this.$emit('ready')
    },
    sendMessage (methodName, data) {
      const message = {
        method: methodName,
        data: data
      }
      if (this.iframe) {
        this.iframe.postMessage(message, '*')
      }
    },
    messageFunc (event) {
      this.$emit(event.data.method, event.data.data)
    }
  }
}
</script>

<style lang="less">
.single-page-iframe {
  width: 100%;
  height: calc(100vh - 117px);
  border: none;
}
</style>
