<template>
  <div class="page-layout">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="center">
        <div class="header">
          <div class="reg_logo">
            <img src="../../../static/images/logo.png" />
          </div>
          <div class="reg_title">{{title}}</div>
          <a class="reg_btn" @click=" returnClick" target="_self">[返回]</a>
        </div>
        <div class="content">
          <a-result v-if="registerSuccess" status="success" :title="registerMsg" :sub-title="subMsg">
          </a-result>
          <div v-if="!registerSuccess">
            <div style="height: 40px; padding-left: 20px; line-height: 40px; font-size: 14px; font-weight: bold;">
              <span style="color: rgb(56, 188, 213);">提醒：</span><span style="color:red">用户注册后需要相关机构审核，审核结果通过手机短信通知，请注意查收！</span>
            </div>
            <div class="card-container">
              <a-tabs type="card" :default-active-key="active" @change="callback">
                <a-tab-pane key="1" tab="用户注册">
                </a-tab-pane>
                <a-tab-pane key="2" tab="单位注册">
                </a-tab-pane>
              </a-tabs>
              <user-register v-if="active=='1'" :check.sync="formData.check" @sub="registerClick" @load="loadClick" />
              <unit-register v-if="active!='1'" :check.sync="formData.check" @sub="registerClick" @load="loadClick" />
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
import userRegister from '@/views/register/components/userRegister'
import unitRegister from '@/views/register/components/unitRegister'

export default {
  name: "PersonRegister",
  components: {
    userRegister, unitRegister
  },
  data () {
    return {
      formData: {
        check: {
          time: 60, title: '获取验证码', count: 60, disabled: false,
        }
      },
      active: '1',
      title: process.env.VUE_APP_SYSTEM_TITLE,
      registerMsg: "注册成功",
      subMsg: "请等待相关机构审核，审核结果通过手机短信通知，请注意查收",
      registerSuccess: false,
      loading: false
    }
  },
  created () {
    this.registerSuccess = false
  },
  methods: {
    callback (key) {
      this.active = key
    },
    returnClick () {
      this.$router.push('/login')
    },
    registerClick (value) {
      this.registerSuccess = true
    },
    loadClick (value) {
      this.loading = value
    },
  }
}
</script>
<style lang="less" scoped>
.page-layout {
  ::v-deep .ant-tabs-bar {
    margin: 0 !important;
  }
  height: 100vh;
  overflow: auto;
  font-family: "Microsoft YaHei";
  color: #333;
  background-color: #ffffff;
  font-size: 16px;
  background-image: url(../../../static/images/htmlbg.jpg);
}
.center {
  width: 900px;
  height: 100vh;
  margin: 0 auto;
  overflow: auto;
  padding: 0px 20px 0px 20px;
  background-color: #ffffff;
  padding: 0px 20px 0px 20px;
}
.header {
  position: relative;
  border-bottom: 1px solid #b1afaf;
  height: 80px;
  text-align: right;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  .reg_logo {
    bottom: 0px;
    left: 0px;
    width: 40px;
    height: 60px;
    line-height: 60px;
    position: absolute;
  }

  .reg_logo img {
    width: 40px;
    height: 40px;
  }

  .reg_title {
    height: 60px;
    line-height: 60px;
    position: absolute;
    bottom: 0px;
    left: 45px;
    width: 500px;
    color: #595959;
    text-align: left;
    font-size: 25px;
  }
  a.reg_btn {
    position: absolute;
    top: 48px;
    right: 6px;
    display: inline-block;
    width: 50px;
    height: 34px;
    line-height: 34px;
    color: #38bcd5;
    font-size: 15px;
  }
}
.content {
  .ant-result-icon {
    margin-bottom: 0px !important;
  }
  .ant-result-title {
    margin-left: 20px !important;
  }
  .ant-result .ant-result-title {
    margin-left: 20px !important;
  }
  .footer {
    background: #f1f1f1;
    margin-top: 20px !important;
    padding: 20px 0 !important;
    width: 100%;
  }
  .code {
    width: 33%;
    display: inline-block;
    height: 38px;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
}
</style>