<template>
  <div style="height: 100%; width: 100%">
    <router-view></router-view>
    <el-dialog
      :title="$t('components.learnSysLayout.navigation.dialogTitle')"
      :width="dialogWidth"
      :visible.sync="dialogVisible"
      :center="true"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="handleClose"
      v-if="hasDialog"
    >
      <div class="sign">
        <p>
          {{ $t('components.learnSysLayout.navigation.dialogMessage1')
          }}<a :href="$t('components.learnSysLayout.navigation.dialogMessageHref')" target="_blank">{{
            $t('components.learnSysLayout.navigation.dialogMessage2')
          }}</a
          >{{ $t('components.learnSysLayout.navigation.dialogMessage3') }}
        </p>
        <el-checkbox v-model="checked">{{ $t('components.learnSysLayout.navigation.dialogCheckbox') }}</el-checkbox>
      </div>
      <template #footer>
        <el-button type="primary" :disabled="!checked" @click="handlePrimary">{{
          $t('components.learnSysLayout.navigation.dialogButton')
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import cAction from '@/action'

export default {
  metaInfo() {
    return {
      title: this.$t('title')
    }
  },
  data() {
    const UA = navigator.userAgent
    return {
      isMobile: /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA)),
      dialogVisible: false,
      checked: false,
      sign: {},
      documentUrl: '',
      timer: null
    }
  },
  computed: {
    dialogWidth() {
      return this.isMobile ? '90%' : '460px'
    },
    hasDialog() {
      return !['/403'].includes(this.$route.path)
    }
  },
  watch: {
    $route() {
      const user = window.G.UserInfo || {}
      user.need_sign && this.createSign()
    }
  },
  methods: {
    createSign() {
      cAction.Other.createSign().then(response => {
        const { code, data } = response
        if (code === 1) {
          this.sign = data
          data.flowid &&
            this.getSignDocument(data.flowid).then(() => {
              if (!this.documentUrl) {
                this.dialogVisible = true
              }
            })
        } else {
          this.$message.error('处理签名失败')
        }
      })
    },
    getSignDocument(flowid) {
      return cAction.Other.getSignDocument({ flowid }).then(response => {
        const { code, data } = response
        if (code === 1) {
          this.documentUrl = data.url
          this.$store.commit('updateDocumentUrl', data.url)
        }
        return response
      })
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.getSignDocument(this.sign.flowid).then(response => {
          if (response.code === 1) {
            this.clearTimer()
            this.dialogVisible = false
          } else {
            this.dialogVisible = true
          }
        })
      }, 5000)
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
    },
    handlePrimary() {
      this.setTimer()
      this.newWindowPreview(this.sign.shortUrl)
    },
    handleClose() {
      if (!this.documentUrl) {
        window.location.href = webConf.others.loginUrl
      }
    },
    // 新窗口预览
    newWindowPreview(url) {
      const a = document.createElement('a')
      a.href = url
      a.target = '_blank'
      document.body.appendChild(a)
      a.click()
      a.remove()
    }
  },
  destroyed() {
    this.clearTimer()
  }
}
</script>

<style lang="scss" scoped>
.sign {
  p {
    text-indent: 2em;
    line-height: 24px;
  }
}
</style>
