<template>
  <div class="xy">
    <p>学员应仔细阅读《入学协议》以及课程介绍，如对入学协议或课程有异议，请第一时间与课程顾问咨询确认。</p>
    <div class="footer">
      <el-button type="primary" :disabled="disabled" size="medium" @click="handlePrimary">{{ buttonText }}</el-button>
    </div>
  </div>
</template>

<script>
import AppCollapse from './components/collapse'
import * as api from '@/api/my'

export default {
  props: { data: { type: Object, required: true } },
  components: { AppCollapse },
  data() {
    return {
      sign: {},
      documentUrl: '',
      timer: null
    }
  },
  computed: {
    basicInfo() {
      return this.data.material.basic_info || {}
    },
    buttonText() {
      return this.documentUrl ? '签署完成' : '立即签署'
    },
    disabled() {
      return !!this.documentUrl
    }
  },
  methods: {
    createSign() {
      api
        .createSign({
          name: this.basicInfo.real_name_cn,
          id_number: this.basicInfo.id_number,
          email: this.basicInfo.email,
          type: this.basicInfo.admission_agreement_type
        })
        .then(response => {
          const { code, data } = response
          if (code === 1) {
            this.sign = data
            data.flowid && this.getSignDocument(data.flowid)
          } else {
            this.$message.error('处理签名失败')
          }
        })
    },
    getSignDocument(flowid) {
      return api.getSignDocument({ flowid, type: this.basicInfo.admission_agreement_type }).then(response => {
        const { code, data } = response
        if (code === 1) {
          this.documentUrl = data.url
        }
        return response
      })
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.getSignDocument(this.sign.flowid).then(response => {
          if (response.code === 1) {
            this.$message({ type: 'success', message: '入学协议已签署完成' })
            this.clearTimer()
          }
        })
      }, 5000)
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
    },
    handlePrimary() {
      if (!this.sign.shortUrl) {
        this.$message({ type: 'error', message: '缺少签名地址，请联系管理员' })
        return
      }
      this.setTimer()
      this.newWindowPreview(this.sign.shortUrl)
    },
    // 新窗口预览
    newWindowPreview(url) {
      const a = document.createElement('a')
      a.href = url
      a.target = '_blank'
      document.body.appendChild(a)
      a.click()
      a.remove()
    }
  },
  beforeMount() {
    this.createSign()
  },
  destroyed() {
    this.clearTimer()
  }
}
</script>

<style lang="scss" scoped>
.xy {
  h1 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    line-height: 25px;
    text-align: center;
    padding: 0 0 10px;
  }
  p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #222;
  }
  .content {
    height: 248px;
    overflow-x: hidden;
    overflow-y: auto;
    & > p {
      padding-left: 20px;
    }
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f1f1f1;
  }
}
</style>
