<template>
  <div class="login_container">
    <div class="top">
      <div class="title">{{ setting.title }}</div>
    </div>
    <div class="main-content">
      <div class="middle-content">
        <div class="errorBtn" @click="clickErrorBtn"></div>
        <el-row style="display: flex; justify-content: center">
          <el-col>
            <el-form :rules="rules" :model="formModel" ref="formRef" size="large" autocomplete="off" v-if="isRegister">
              <el-form-item prop="username">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <User />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">用户账号</div>
                  </div>
                  <div class="right">
                    <el-input v-model="formModel.username" placeholder="请输入用户账号"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Lock />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">用户密码</div>
                  </div>
                  <div class="right">
                    <el-input type="password" v-model="formModel.password"
                      placeholder="请输入密码" show-password></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="repassword">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Lock />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">确认密码</div>
                  </div>
                  <div class="right">
                    <el-input type="password" v-model="formModel.repassword" style="border-color: #20bec8"
                      placeholder="请再次输入密码" show-password></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div style="display: flex; align-items: center; color: pink">
                  <div class="left" style="display: flex; align-items: center;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Stamp />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">姓名</div>
                  </div>
                  <div class="right">
                    <el-input v-model="formModel.name" style="border-color: #20bec8;" placeholder="请输入姓名"></el-input>
                  </div>
                </div>
              </el-form-item>

              <el-form-item prop="clssid">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Avatar />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">班级</div>
                  </div>
                  <div class="right">
                    <el-cascader placeholder="请选择所属班级" :props="props" style="width: 142%; height: 0.2344rem"
                      v-model="formModel.clssid" @change="handleChange" />
                  </div>
                </div>
              </el-form-item>
              <!-- <el-cascader :props="props" style="width: 100%; height: 0.2344rem" v-model="formModel.clssid" /> -->
              <el-form-item prop="studentNumb">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Avatar />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">学号</div>
                  </div>
                  <div class="right">
                    <el-input v-model="formModel.studentNumb" style="border-color: #20bec8"
                      placeholder="请输入学号"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="mobile">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Iphone />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">手机号</div>
                  </div>
                  <div class="right">
                    <el-input v-model="formModel.mobile" style="border-color: #20bec8" placeholder="请输入手机号"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Grid />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">验证码</div>
                  </div>
                  <div class="right">
                    <div class="captcha">
                      <el-input v-model="formModel.captcha" style="height: 0.2344rem" maxlength="4" />
                      <div class="code" @click="getcodeinfo">
                        <img :src="codeUrl" alt="" srcset="" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 152px;margin-top: 10px;"
                  class="button" type="primary" auto-insert-space @click="register">
                  注册
                </el-button>
                <el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 155px;margin-top: 10px;"
                  class="button" type="primary" auto-insert-space @click="toLogin">
                  返回到登录页
                </el-button>
              </el-form-item>
              <el-form-item> </el-form-item>
              <!-- <el-form-item class="flex">
                            <el-link type="info" :underline="false" @click="isRegister = false">
                                ← 返回
                            </el-link>
                        </el-form-item> -->
            </el-form>
            <el-form style="margin-bottom: 90px;" :model="formModel" :rules="rules" ref="formRef" size="large"
              autocomplete="off" v-else class="custom-form">
              <el-form-item prop="username">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <User />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">用户名</div>
                  </div>
                  <div class="right">
                    <el-input v-model="formModel.username" style="height: 0.2344rem ;width: 250px;"
                      placeholder="请输入用户名"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="studentNumb">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Avatar />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">学号</div>
                  </div>
                  <div class="right">
                    <el-input v-model="formModel.studentNumb" style="height: 0.2344rem;width: 250px;"
                      placeholder="请输入学号"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Lock />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">密码</div>
                  </div>
                  <div class="right">
                    <el-input type="password" v-model="formModel.password" style="height: 0.2344rem;width: 250px;"
                      placeholder="请输入密码"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="display: flex; align-items: center;">
                  <div class="left" style="display: flex; align-items: center ;width: 90px;">
                    <div style="padding-right: 10px; color: #1084c1">
                      <el-icon class="bold-icon">
                        <Grid />
                      </el-icon>
                    </div>
                    <div style="padding-right: 10px; color: #2592a1">验证码</div>
                  </div>
                  <div class="right">
                    <div class="captcha">
                      <el-input v-model="formModel.captcha" style="height: 0.2344rem;width: 250px;" maxlength="4" />
                      <div class="code" @click="getcodeinfo">
                        <img :src="codeUrl" alt="" srcset="" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!-- <el-form-item label="验证码">
                            <div class="captcha">
                                <el-input v-model="formModel.captcha" style="height: 0.2344rem" maxlength="4" />
                                <div class="code" @click="getcodeinfo">
                                    <img :src="codeUrl" alt="" srcset="" />
                                </div>
                            </div>
                        </el-form-item> -->
              <el-form-item>
                <el-button style="margin:30px 50px 0px 20px;" class="hexagon-button" type="primary" auto-insert-space
                  @click="login">登录</el-button>
                <el-button style="margin:30px 0px 0px 0;" class="hexagon-button" type="primary" auto-insert-space
                  @click="toRegister">去注册</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" :xs="0"></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from "vue"
// import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { ElMessage} from 'element-plus'
import settingStore from "@/store/modules/setting";
import { User, Lock, Avatar, Stamp, Grid, Iphone } from "@element-plus/icons-vue";
import { ref,onMounted} from "vue";
import userStore from "@/store/modules/user";
import { getCode, sturegister, getFaculties } from '@/api/user'
import { useRouter } from "vue-router";
const router = useRouter()
const setting = settingStore();
const user = userStore();
console.log(setting.title);

const isRegister = ref(false);
const formRef = ref();
const formModel = ref({
  username: "",
  password: "",
  repassword: "",
  name: "",
  clssid: '',
  studentNumb: "",
  mobile: '',
  captcha: "",
});

const FacultiesList = ref([])
const getFacultiesList = async (data: any) => {
  const res: any = await getFaculties(data)
  console.log(res, 'res11')
  FacultiesList.value = res.result
}
const deepValues = ref([])
// 配置部门级联选择器
const props = {
  lazy: true,
  checkStrictly: true,
  emitPath: false,
  async lazyLoad(node: any, resolve: any) {
    console.log(node);
    deepValues.value = node.pathValues
    await getFacultiesList({
      primaryType: node.level + 1,
      pid: node.value,
    })
    const nodes = FacultiesList.value.map((item: any) => ({
      value: item.id,
      label: item.name,
    }))
    resolve(nodes)
  },
}

const handleChange = (e: any) => {
  console.log(e);
  formModel.value.clssid = e
}


// 添加校验规则
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 5,
      max: 30,
      message: "用户名长度最小五位最大三十位",
      trigger: ["change", "blur"],
    },
  ],
  studentNumb: [
    { required: true, message: "请输入学号", trigger: "blur" },
    {
      min: 5,
      max: 11,
      message: "学号长度最小五位最大十一位",
      trigger: ["change", "blur"],
    },
  ],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      pattern: /^\S{6,15}$/,
      message: "密码长度最小六位最大十五位",
      trigger: ["change", "blur"],
    },
  ],
  repassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      max: 15,
      min: 6,
      pattern: /^\S{6,15}$/,
      message: "密码长度最小六位最大十五位",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  clssid: [
    { required: true, message: "请选择所属班级", trigger: "blur" },
  ],
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号格式不正确",
      trigger: ["change", "blur"],
    },
  ]
};
const register = async () => {
  await formRef.value.validate();
  console.log("开始注册请求");
  let data = {
    clssid: formModel.value.clssid,
    mobile: formModel.value.mobile,
    captcha: formModel.value.captcha,
    checkKey: 1629428467008,
    password: formModel.value.password,
    username: formModel.value.username,
    realname: formModel.value.name,
    workno: formModel.value.studentNumb,
    depid: deepValues.value.slice(0, 2).join(',')
  };
  try {
    const res: any = await sturegister(data)
    formModel.value = {
      username: "",
      password: "",
      repassword: "",
      name: "",
      clssid: '',
      studentNumb: "",
      mobile: '',
      captcha: "",
    }
    ElMessage.success(`注册成功`)
    isRegister.value = false
    

  } catch (error) {
    console.log(error);
    
    getcodeinfo()

  }
    
    // getcodeinfo()
};
const codeUrl = ref("");
const getcodeinfo = async () => {
  const res: any = await getCode(1629428467008);
  codeUrl.value = res.result;
  console.log(codeUrl.value);
};
getcodeinfo();
// 登录
const login = async () => {
  await formRef.value.validate();
  let data = {
    captcha: formModel.value.captcha,
    checkKey: 1629428467008,
    password: formModel.value.password,
    username: formModel.value.username,
  };
  const res = await user.logIn(data);
  if (res) {
    router.push('/')
  }

};
const toRegister = () => {
  isRegister.value = true
  getcodeinfo();
}
const toLogin = () => {
  isRegister.value = false
  getcodeinfo();
}

const clickErrorBtn=()=>{
  console.log('aaa');
}
onMounted(()=>{
  getcodeinfo();
})
</script>

<style lang="less" scoped>
.login_container {
  position: relative;
  width: 100%;
  // height: 1080px;
  min-height: 100vh;
  background-color: #091d22;
  background: url("../assets//images/bg1.png") no-repeat;
  background-size: cover;

  .top {
    width: 100%;
    // height: 75px;
    text-align: center;
    font-size: 42px;
    line-height: 75px;
    font-style: italic;
    background: url("../assets/images/topbgc.png") no-repeat;
    // background-position: center bottom -10px;
    background-size: cover;

    .title {
      color: #fff;
    }
  }

  .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1000px;
    min-height: 100vh;
    // margin: 0;
    .middle-content{
    position: relative;
      width: 60%;
      height:80%;
      display: flex;
        justify-content: center;
        align-items: center;
      // background-color: pink;
      background: url("../assets/images/login.png") no-repeat;
      background-position: 59% -7px;
      background-size: 75% auto;
    }
    .errorBtn{
      position: absolute;
      top: 30px;
      right: 122px;
      width: 50px;
        height: 50px;
        background-color: transparent;
      clip-path: polygon(100% 0, 0 0, 100% 100%);
      cursor: pointer;
    }
  }

  .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%;
      }
    }
  }
}

.hexagon-button {
  margin-top: 30px;
  /* 应用clip-path属性来创建六边形形状 */
  width: 180px;
  height: 50px;
  /* 使用clip-path定义按钮形状 */
  // clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
  /* 模拟边框效果 */
  box-shadow: 0 0 0 2px cyan;
  background-color: #14213d;
  color: #3ad7e2;
  background-color: #0e2e5e;
  font-size: 18px;
}

// .el-form-item__label {
//   color: #0e2e5e;
// }
// .el-form-item__error {
//   left: 80px;
// }
.el-input {
  width: 300px;
  height: 36px;
  
}

:deep(.el-form-item__error) {
  left: 110px;
}
</style>
