<template>
  <div class="login-form">
    <div class="login-title">注册</div>
    <div class="form">
      <el-form :model="form" ref="ruleFormRef" label-width="0" :rules="rules">
        <!-- <el-form-item>
          <el-col :span="11">
            <el-input
              v-model="form.username"
              :prefix-icon="User"
              placeholder="账号"
              style="height: 0.2344rem"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500"></span>
          </el-col>
          <el-col :span="11">
            <el-input
              v-model="form.realname"
              :prefix-icon="User"
              placeholder="姓名"
              style="height: 0.2344rem"
            />
          </el-col>
        </el-form-item> -->
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            :prefix-icon="User"
            placeholder="账号"
          />
        </el-form-item>
        <el-form-item prop="realname">
          <el-input
            v-model="form.realname"
            :prefix-icon="User"
            placeholder="姓名"
          />
        </el-form-item>
        <el-form-item prop="workno">
          <el-input
            v-model="form.workno"
            placeholder="工号/学号"
            :prefix-icon="Iphone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-cascader
          v-model="form.department"
            placeholder="选择院系"
            :options="options"
            style="width: 100%; height: 0.2344rem"
          /> -->
          <el-cascader
            :props="props"
            style="width: 100%; height: 0.2344rem"
            v-model="form.department"
            :show-all-levels="false"
            @change="handleChange"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input
            placeholder="手机号码"
            v-model="form.mobile"
            :prefix-icon="Iphone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="密码"
            v-model="form.password"
            :prefix-icon="Lock"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="确认密码"
            v-model="form.confirmPassword"
            :prefix-icon="Lock"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-input
            placeholder="验证码"
            v-model="form.smscode"
            :prefix-icon="Lock"
          ></el-input> -->
          <div class="captcha">
            <el-input
              v-model="form.smscode"
              style="height: 0.2344rem"
              maxlength="4"
              :prefix-icon="Lock"
            />
            <div class="code" @click="getcodeinfo">
              <img :src="codeUrl" alt="" srcset="" />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn">
        <div @click="$emits('backLogin')">返回</div>
        <div class="gradient" @click="ragistered">注册</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { User, Iphone, Lock } from '@element-plus/icons-vue'
import { getFaculties } from '@/api/race'
import { ElMessage } from 'element-plus'
import { getCode, sturegister } from '@/api/user'
import { ca } from 'element-plus/es/locales.mjs'
const $emits = defineEmits(['backLogin'])
const form = reactive<any>({
  username: '',
  realname: '',
  workno: '',
  department: '',
  mobile: '',
  password: '',
  confirmPassword: '' /*, policy: false*/,
  smscode: '',
})
const KeyValue: any = {
  username: '账号',
  realname: '姓名',
  workno: '学号',
  department: '院系',
  mobile: '手机号',
  password: '密码',
  confirmPassword: '确认密码' /*, policy: false*/,
  smscode: '验证码',
}
const rules = {
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 6, max: 20, message: '账号长度在6到50个字符', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]+$/,
      message: '姓名只能包含中文、英文',
      trigger: 'blur',
    },
  ],
  realname: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在2到10个字符', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]+$/,
      message: '姓名只能包含中文、英文',
      trigger: 'blur',
    },
  ],
  workno: [
    { required: true, message: '请输入工号/学号', trigger: 'blur' },
    {
      pattern: /^\d{1,20}$/,
      message: '工号/学号必须是8位数字',
      trigger: 'blur',
    },
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 16, message: '密码长度在8到16个字符', trigger: 'blur' },
    {
      pattern:
        /^(?=(.*[a-zA-Z]){2,}|(?=.*[a-zA-Z])(?=.*\d)|(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?])|(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]))[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]{8,16}$/,
      message: '密码必须包含至少两种字符类型：英文字符、数字、特殊字符',
      trigger: 'blur',
    },
  ],
}
const FacultiesList = ref([])
const getFacultiesList = async (data: any) => {
  const res: any = await getFaculties(data)
  console.log(res, 'res')
  FacultiesList.value = res.result
}
// 配置部门级联选择器
const props = {
  lazy: true,
  checkStrictly: true,
  emitPath: false,
   isLeaf: 'isLeaf',

  async lazyLoad(node: any, resolve: any) {
    // console.log(node, '1212')
    // console.log(node.data.isLeaf)

    // if (node.data.isLeaf) { 
    //   console.log(1111)

    //   return resolve([])
    // }
    await getFacultiesList({
      primaryKey: 'key',
      pid: node.value,
    })

    if (node.level == 0 || node.level == 1) {
      const nodes = FacultiesList.value.map((item: any) => ({
        value: item.id,
        label: item.title,
        disabled: true,
        leaf: item.isLeaf,
      }))
      resolve(nodes)
    } else {
      const nodes = FacultiesList.value.map((item: any) => ({
        value: item.id,
        label: item.title,
        leaf: item.isLeaf,
      }))
      resolve(nodes)
    }
  },
}
const cascader = ref()
const handleChange = (e: any) => {
  // console.log(e,cascader.value);
  cascader.value.togglePopperVisible()
}
const ruleFormRef = ref<any>()
const ragistered = async () => {
  try {
    await ruleFormRef.value.validate()
    for (const key in form) {
      if (form[key] === '') {
        ElMessage.warning(`${KeyValue[key]}不能为空`)
        return console.log(KeyValue[key], '不能为空')
      } else {
        if (key === 'mobile') {
          const phoneRegex = /^1[3-9]\d{9}$/
          if (!phoneRegex.test(form[key])) {
            return ElMessage.warning(`手机号格式不正确`)
          }
        }
      }
    }
    if (!(form.password === form.confirmPassword)) {
      return ElMessage.warning(`两次密码不同`)
    }
    console.log(form)
    let data = {
      checkKey: 1629428467008,
      departmentid: form.department,
      password: form.password,
      phone: form.mobile,
      realname: form.realname,
      smscode: form.smscode,
      username: form.username,
      workno: form.workno,
    }
    const res: any = await sturegister(data)
    if (res.code === 200) {
      ElMessage.success(`注册成功`)
      $emits('backLogin')
    } else {
      ElMessage.warning(res.message)
      getcodeinfo()
    }
    console.log(res)
  } catch (error: any) {
    console.log(error, 'error')
    for (const key in error) {
      ElMessage.warning(`${KeyValue[key]}${error[key][0].message}`)
    }
  }
}
const codeUrl = ref('')

// 获取验证码
const getcodeinfo = async () => {
  const res: any = await getCode(1629428467008)
  codeUrl.value = res.result
  console.log(codeUrl.value)
}
getcodeinfo()
</script>

<style lang="scss" scoped>
.login-form {
  width: 640px;
  height: 820px;
  border-radius: 15px;
  background-color: #ffffff1a !important;
  padding: 70px 60px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
  .login-title {
    font-size: 32px;
    font-weight: 700;
  }
  .form {
    margin-top: 45px;
    padding: 0 40px;
    .captcha {
      width: 100%;
      height: 100%;
      position: relative;
      .code {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        width: 105px;
        height: 100%;
        // background-color: pink;
        display: flex;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .submit {
      width: 399px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      color: #fff;
      border-radius: 10px;
      margin-top: 35px;
    }
  }
  .btn {
    display: flex;
    justify-content: space-between;
    margin-top: 45px;
    div {
      width: 210px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 10px;
    }
    div:nth-child(1) {
      border: 1px solid #dbdbdb;
      color: #3c3c3c;
    }
    div:nth-child(2) {
      color: #fff;
    }
  }
}
:deep(.el-form-item) {
  display: flex;
  flex-direction: row !important;
  height: 45px;
  margin-top: 25px;
  .el-input {
    height: 100%;
  }
  input {
    height: 100%;
  }
}
</style>
