<template>
  <div class="xy">
    <div class="content">
      <h1>入学协议</h1>
      <p>
        本入学协议（以下简称“本协议”）由清控紫荆（北京）教育科技股份有限公司（以下简称“紫荆教育”或“我们”）和学员（以下简称“学员”或“您”）签订。
      </p>
      <p>
        1.
        <b>请先仔细阅读本协议内容，尤其是字体加粗部分。</b>如您对本协议内容或页面提示信息有疑问，请勿进行下一步操作。<b
          >您通过页面点击或其他方式确认，即表示您已同意并签署了入学协议。本协议自您成功缴纳学费之日起生效。</b
        >
      </p>
      <p>
        2.
        请悉知本协议相关的课程介绍、入学相关规章制度等资料、注册协议、所报考项目院校的规章制度、本协议明确援引的其他协议及紫荆教育已经发布的或将来可能发布的各类协议和规则，系本协议的重要组成部分，与本协议具有同等法律效力。
      </p>
      <p>
        3. 我们有权根据需要不时地制定、修改本协议或各类规则，如本协议有任何变更，<b
          >我们将通过www.ezijing.com网站公告的方式提前予以公布，变更后的协议在公告届满30日起生效。</b
        >
      </p>
      <br />
      <p><b>入学须知</b></p>
      <app-collapse>
        <template #title>1.本协议可能涉及以下专用词语：</template>
        <p><b>项目院校</b>（是指学员通过紫荆教育所报名的学位项目的合作大学）；</p>
        <p>
          <b>学分</b
          >（学员学习完每一门课程后所获得的分数。不同的课程有不同的分数值。学分是判断学员是否完成课程的标准。根据您所选择的项目课程具体情况予以具体要求，每门课程的考核会因为课程内容和教授的教学要求而不同，具体考核将会结合作业、作业、考试或报告、课程讨论等多部分综合评判，课程任课老师、紫荆教育与学位项目合作大学有是否通过考核的最终评判权）；
        </p>
        <p>
          <b>学制</b
          >（是指项目院校对学习年限的规定。根据您所选择的项目课程具体情况予以具体要求；学员应保证充足的学习时间，在规定年限内完成项目课程。）；
        </p>
        <p>
          <b>学位证书</b
          >（学员获取项目院校的学位证书，需满足以下条件：符合项目院校学位证书规定的学分数量、通过项目院校学位授予标准及紫荆教育有关考核、不存在违反项目院校的规章制度的行为。另，项目院校不同及学位证书不同，则最低学分要求可能也不同。项目院校及所在的国家地区可能会有附加要求。项目院校对获取学位证书的要求具有最终解释权。）；
        </p>
        <p><b>校友会</b>（是紫荆教育官方发起的“紫荆校友会”，学员自愿参加。）；</p>
        <p>
          <b>知识产权</b
          >（本协议项下的知识产权包括但不限于商标、专利、著作权。我们对紫荆教育的商号、商标、logo等享有知识产权。为履行本协议，我们在线上平台及线下课程中向您提供的各种形式，包括但不限于文字、软件、声音、图片、录像、表格等的作品，我们都拥有前述作品完整的知识产权；未经我们许可，您不得擅自使用、修改、复制、录像、传播、改变、散布、发行或发表上述内容，无论是否以营利为目的；您的线上课程的账号，只供您本人使用。）。
        </p>
      </app-collapse>
      <p>2.<b>入学项目：</b></p>
      <p>
        <b
          >项目课程为【紫荆教育-索菲亚金融方向工商管理硕士（FMBA）2021年春季班】。该项目学制为【2】年，自当期项目课程开课之日起计算。</b
        >如学员因个人原因需要延长学习期限的，须至少提前<b>【3】</b>个月申请延期，批准后方可延期毕业。最长可延期<b>【12】</b>个月,自所报名的项目课程原定毕业之日起算。
      </p>
      <p>
        <b>课程的总学分为【48】学分，其中必修课【48】学分。先修课3门，不计入学分。</b
        >课程成绩未通过需要重修或选修其它课程。重修或选修超规定的学分的，需按学分单价缴纳相关费用。
      </p>
      <app-collapse>
        <template #title>3.<b>教学说明：</b></template>
        <p>
          （1）课程安排及调整。以我们和项目院校的具体安排为准。为了确保学员获得更好的课程，我们将在认为必要时，可能更新课程安排。
        </p>
        <p>（2）授课教师安排及调整。我们可能会调整相关课程的任课教师，该教师如与宣传材料不符以实际任课教师为准。</p>
      </app-collapse>
      <app-collapse>
        <template #title>4.<b>费用。</b>本项目学费共计人民币【71000】元整，包含授课费用、证书费用，不包含：</template>
        <p>学习期间的交通费、食宿费、邮寄费、书本费等费用；</p>
        <p>海外学习、海外毕业典礼等费用；</p>
        <p>毕业服装、纪念品、校友会活动等相关费用；</p>
        <p>其他本协议未明示包括在学费内的费用。</p>
        <p>
          贷款。如您需贷款参加学习的，请自行向第三方银行或金融机构申请。请悉知，无论何种情形，我们不会为您与第三方的借贷关系承担连带或担保责任。
        </p>
        <p>
          退费。自缴纳学费成功之日起10个自然日内，因个人原因申请退学的，我们将退还学费的80%。若超过10个自然日再提出退费申请的，将不予退费。
        </p>
      </app-collapse>
      <app-collapse>
        <template #title>5.<b>校友会及社群管理（以下将校友会及社群统称为“校友平台”）</b></template>
        <p>
          <b>自愿参与官方活动。</b
          >为了促进学员之间的交流，我们可能分班、分期、分项目组建官方联络组，并组织各种校友线上、线下活动，您可视情况自愿选择参加。
        </p>
        <p>
          <b>活动许可。</b
          >为避免涉嫌未经审批的非法聚会的法律风险，未经我们许可，您不得以紫荆教育校友会或社群的官方名义开展各类活动。我们不干预学员之间的非官方交流。但学员不得在类似交流活动中使用紫荆教育的商号、商标、未经注册的标识等能与紫荆教育建立直接关联的素材。学员不得自行申请紫荆教育、项目院校相关的公众号、视频号、头条号等自媒体。
        </p>
        <p>
          <b>禁止事项。</b
          >您不得利用校友平台发布任何非法的或违反社会风序良俗的信息及资料，不发布损害紫荆教育声誉及商业利益的信息；不利用校友平台恶意透露其他学员他人隐私、个人信息或资料的；不误导、欺骗其他学员；不从事违反法律法规规定或干扰校友平台正常运营的行为等。
        </p>
      </app-collapse>
      <p>6.<b>双方的权利义务</b></p>
      <p>
        <b>您需保证：</b
        >自愿报名本项目并攻读该项目的学位；所提供的证件及填写的相关信息真实有效；严格遵守项目学校及紫荆教育的各项规章制度；按照紫荆教育专业培养方案的要求积极完成课程学习，并通过考核；不得做出有损项目学校及紫荆教育形象的行为和言论。
      </p>
      <p>
        <b>我们将为您提供以下服务：</b
        >就读期间，提供学习指导、学位授予及其他与学习相关的支持与协调工作；负责与项目院校协调、沟通学习情况；在现有技术基础上保障线上课程得以顺利进行。
      </p>
      <app-collapse>
        <template #title>
          7.<b>协议的解除与终止。</b>在下列情形下，我们有权终止本协议，已缴纳的学费不予退还。学员因下列行为给我们造成损失的，还应赔偿损失。
        </template>
        <p>（1）学员报名时伪造身份、学历证件的；</p>
        <p>（2）学员违反学术纪律及规章制度的；</p>
        <p>（3）学员违反本协议知识产权条款的，包括但不限于违规倒卖课程、违规使用听课账号等；</p>
        <p>（4）学员违反校友会、社群规则给紫荆教育或其他学员造成损失或不良声誉的；</p>
        <p>（5）其他严重影响紫荆教育或项目院校的声誉或利益的行为。</p>
      </app-collapse>
      <p>
        8.
        <b>不可抗力。</b
        >因台风、地震、洪水、雷电、恐怖袭击、疫情防控、政治因素、院校调整等不可抗力原因导致线下课程、海外学习等活动无法正常开展的，我们将免于承担一切责任：
      </p>
      <p>
        9.
        <b>适用法律与管辖。</b>本协议的订立、效力、解释、履行和争议的解决均受中华人民共和国法律的管辖。<b
          >因本协议的解释和履行产生争议的，均应提交北京市海淀区人民法院审理。</b
        >
      </p>
      <p>
        10.<b>通知。</b>所有发给学员的通知都可通过电子邮件、常规的信件或在紫荆教育平台网站显著位置公告的方式进行传送。
      </p>
    </div>
    <div class="footer">
      <el-checkbox size="medium" v-model="checked" :disabled="!!documentUrl">已阅读并同意上述合同</el-checkbox>
      <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 {
  components: { AppCollapse },
  data() {
    return {
      checked: false,
      sign: {},
      documentUrl: '',
      timer: null
    }
  },
  watch: {
    documentUrl: {
      immediate: true,
      handler(value) {
        this.checked = !!value
      }
    }
  },
  computed: {
    buttonText() {
      return this.documentUrl ? '签署完成' : '立即签署'
    },
    disabled() {
      return !this.checked || !!this.documentUrl
    }
  },
  methods: {
    createSign() {
      api.createSign({ type: 'marywood-agreement' }).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: 'marywood-agreement' }).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>
