<!-- @format -->

<template>
  <div style="height: 100%">
    <a-layout style="height: 100%">
      <a-layout-content class="center-content">
        <div class="lg_card">
          <a-page-header style="border: 1px solid rgb(235, 237, 240)" @back="$router.back()">
            <template #backIcon>
              <div class="back_icon"><left-outlined style="font-size: 20px" /><h1>返回</h1></div>
            </template>
            <template #title>
              <h1 class="lg_card_title">注册党建知识答题平台</h1>
            </template>
          </a-page-header>
          <ns-form
            :labelWrap="true"
            style="margin: 32px auto 0; width: 50%"
            ref="mainRef"
            formLayout="vertical"
            :schemas="formSchema"
            :model="data"
            v-bind="$attrs" />
          <a-button
            @click="submit"
            :loading="loading"
            :disabled="!mainRef?.validateResult"
            type="primary"
            style="
              width: 420px;
              height: 52px;
              border-radius: 4px;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
            "
            >注册</a-button
          >
          <div class="login_link" @click="$router.push({ name: 'login' })">
            登录已有账号<right-outlined style="font-size: 14px" />
          </div>
        </div>
        <div class="footer">Copyright 2021 鼎云科技 All Rights Reserved</div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import { NsMessage } from '/nerv-lib/component/message';
  import { http } from '/nerv-lib/util/http';
  import { router } from '/nerv-lib/saas/router';
  export default defineComponent({
    name: 'UserRegister',
    components: {
      LeftOutlined,
      RightOutlined,
    },
    setup() {
      const mainRef = ref();
      let data = ref({});
      let loading = ref(false);
      watch(
        () => data.value.password,
        () => {
          if (data.value.confirmPassword) mainRef.value.formElRef.validateFields('confirmPassword');
        },
        { deep: true },
      );
      let formSchema = ref([
        {
          field: 'telNum',
        },
        {
          label: '手机号码',
          field: 'accountName',
          component: 'NsInput',
          componentProps: {
            placeholder: '请输入手机号作为登录账号',
          },
          rules: [
            {
              required: true,
              validator: async (rule, value) => {
                data.value.telNum = value;
                if (!value) return Promise.reject('请输入手机号码');
                if (!/^[1][3456789][\d]{9}$/.test(value))
                  return Promise.reject('请输入正确的手机号码');
              },
            },
          ],
        },
        {
          label: '学员姓名',
          field: 'userName',
          component: 'NsInput',
          componentProps: {
            placeholder: '请输入真实姓名',
          },
          rules: [
            {
              required: true,
              validator: async (rule, value) => {
                const _reg = /^[^\x00-\xff]$/;
                if (!value) return Promise.reject('请输入真实姓名');
                if (value.includes(' ')) return Promise.reject('不支持空格');
                if (value) {
                  let strLength = 0;
                  let strArray = value.split('');
                  strArray.forEach((item) => {
                    if (_reg.test(item)) {
                      strLength += 2;
                    } else {
                      strLength += 1;
                    }
                  });
                  if (strLength > 32) {
                    return Promise.reject('不支持空格，长度不得超过32个字符，中文占两个字符');
                  }
                }
              },
            },
          ],
        },
        {
          label: '用户密码',
          field: 'password',
          component: 'NsInputPassword',
          componentProps: {
            placeholder: '请输入登录密码，密码6~18位，支持字母、数字、特殊字符!@#$%^&*',
          },
          rules: [
            {
              required: true,
              validator: async (rule, value) => {
                let reg = /^[0-9a-zA-Z!@#$%^&*]{6,18}$/;
                if (!value) return Promise.reject('请输入登录密码');
                if (!reg.test(value))
                  return Promise.reject('支持数字、字母、特殊字符!@#$%^&*，6~18位字符');
              },
            },
          ],
        },
        {
          label: '确认密码',
          field: 'confirmPassword',
          component: 'NsInputPassword',
          componentProps: {
            placeholder: '请再次输入密码',
          },
          rules: [
            {
              required: true,
              validator: async (rule, value) => {
                if (value !== data.value.password) return Promise.reject('两次密码输入不一致');
              },
            },
          ],
        },
      ]);
      const submit = () => {
        loading.value = true;
        mainRef.value
          .triggerSubmit()
          .then((data) => {
            http
              .post('/api/exam_op/objs/admin/WorkUser/register', data)
              .then((res) => {
                loading.value = false;
                NsMessage.success('注册成功', 1, () => {
                  router.push({ path: '/login' });
                });
              })
              .catch((err) => {
                loading.value = false;
              });
          })
          .catch((err) => {
            loading.value = false;
          });
      };
      return {
        data,
        formSchema,
        mainRef,
        submit,
        loading,
      };
    },
  });
</script>

<style lang="less" scoped>
  :deep(.center-content) {
    background: url('./img/background.png') center center no-repeat;
    background-size: cover;

    // background-position-y: -120px;
    margin: 0;
  }
  .ant-layout-content {
    height: calc(100vh - 112px);
    width: 100%;
    min-height: 400px;
  }
  .lg_card {
    width: 1200px;
    height: 560px;
    position: absolute;
    left: 50%;
    top: 23%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  .ant-page-header {
    border: none !important;
    border-bottom: 1px solid rgb(235, 237, 240) !important;
    height: 84px;
  }
  .back_icon {
    display: flex;
    align-items: center;
    h1 {
      margin: 0;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .lg_card_title {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 36px;
    text-align: center;
    color: #172e3d;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
  }
  :deep(.ant-page-header-heading) {
    height: 100%;
    align-items: center;
  }
  .login_link {
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    &:hover {
      color: #c50001;
    }
  }
  .footer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 48px;
    color: rgba(0, 0, 0, 0.4);
    font-family: 'PingFang';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
  }
  :deep(.ant-input-affix-wrapper) {
    height: 52px;
  }
  :deep(.ant-form-item-label-wrap) {
    line-height: 52px;
  }
  :deep(.ant-col-6) {
    flex: 0 0 20%;
  }
</style>
