<!--
 * @Date: 2024-10-18 18:00:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-12-11 17:36:10
 * @FilePath: /hager/src/views/user/register.vue
 * @Description: 文件描述
-->
<template>
  <div :class="['hager-register-page', is_xs ? 'xs' : '']">
    <div class="input-title">用户注册</div>
    <div style="padding: 1rem 1.5rem 1rem 1rem;">
      <hagerInput type="email" required v-model="email" placeholder="请输入注册邮箱地址" />
      <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
      <hagerInput type="username" v-model="username" placeholder="请输入姓名" />
      <hagerInput type="tel" v-model="tel" placeholder="请输入联系电话" />
      <hagerInput type="corp" v-model="corp" placeholder="请输入公司名称" />
      <hagerInput type="department" v-model="department" placeholder="请输入所属部门和职位" />
    </div>
    <div class="register-footer">
      <div class="submit-btn" @click="onSubmit">提交</div>
      <div class="register-subsidiary">
        <div class="privacy"><span @click="checkPrivacy" :class="[is_check ? 'is-check' : '']"><i class="el-icon-circle-check" style="font-size: 1rem;"></i>&nbsp;我已同意</span>&nbsp;<span class="text" @click="openPrivacy">隐私政策</span></div>
        <div class="login">已有账号，<span class="text" @click="goToLogin">立即登录</span></div>
      </div>
    </div>
    <el-dialog :title="privacyInfo.post_title" :visible.sync="dialogVisible" top="10vh" width="60%">
      <privacy :content="privacyInfo.post_content" style="overflow-y: scroll; height: 70vh;"></privacy>
    </el-dialog>

    <el-drawer
      :title="privacyInfo.post_title"
      size="100%"
      :visible.sync="drawer"
      :direction="direction">
      <privacy :content="privacyInfo.post_content" style="padding: 1rem;"></privacy>
    </el-drawer>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';
import $ from 'jquery';
import { registerAPI, getArticleAPI } from '@/api/hager';
import { MessageBox, Message } from 'element-ui';
import privacy from '@/components/privacy.vue';

export default {
  mixins: [mixin.init],
  data () {
    return {
      email: '',
      pwd: '',
      username: '',
      tel: '',
      corp: '',
      department: '',
      dialogVisible: false,
      drawer: false,
      direction: 'rtl',
      is_check: false,
      privacyInfo: {
        post_title: '',
        post_content: '',
      }
    }
  },
  mounted () {
    if ($('#router-view').outerHeight() < $('.user-box').height()) {
      $('#router-view').height($('.user-box').outerHeight())
    }
    // 获取隐私信息
    this.getPrivacyInfo();
  },
  methods: {
    async getPrivacyInfo () {
      const { code, data } = await getArticleAPI({ id: '84775' });
      if (code === 1) {
        this.privacyInfo = data;
      }
    },
    async onSubmit () {
      if (!this.is_check) {
        Message({
          type: 'error',
          message: '请勾选同意隐私政策'
        });
        return;
      }
      if (!this.email) {
        Message({
          type: 'error',
          message: '邮箱地址不能空'
        });
        return;
      }
      // 检验邮箱地址有效性
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
        Message({
          type: 'error',
          message: '邮箱地址格式不正确'
        });
        return;
      }
      if (!this.pwd) {
        Message({
          type: 'error',
          message: '登录密码不能空'
        });
        return;
      }
      const { code, msg } = await registerAPI({ email: this.email, password: this.pwd, username: this.username, mobile: this.tel, company: this.corp, department: this.department });
      if (code) {
        Message({
          type: 'success',
          message: msg
        });
        this.goToLogin()
      }
    },
    goToLogin () {
      this.$router.push('/user/login');
    },
    openPrivacy () {
      if (this.is_xs) {
        this.drawer = true;
      } else {
        this.dialogVisible = true;
      }
    },
    checkPrivacy () {
      this.is_check = !this.is_check;
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-register-page {
    padding: 2rem 0.5rem 0;
    box-sizing: border-box;
    &.xs {
      background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://cdn.ipadbiz.cn/hager/img/user/l-bg.png');
      background-size: 80% 50%;
      background-position: bottom;
      background-repeat: no-repeat;
      padding-top: 0;
      padding-bottom: 5rem;
    }
    .input-title {
      color: @secondary-color;
      font-weight: bold;
      font-size: 1.25rem;
      text-align: center;
    }
    .submit-btn {
      background-color: @secondary-color;
      color: #FFF;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 5px;
      &:hover {
        cursor: pointer;
      }
    }
    .register-footer {
      padding: 0 1rem 1rem 2rem;
      .register-subsidiary {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        margin-top: 1rem;
        span {
          &.text {
            color: @primary-color;
            text-decoration: underline;
            font-weight: bold;
          }
          &.is-check {
            color: @primary-color;
            font-weight: bold;
          }
          &:hover {
            cursor: pointer;
          }
        }
        .privacy {
          display: flex;
          align-items: center;
        }
        .login {

        }
      }
    }
  }
</style>