<template>
  <div class="box">
    <div class="top">
      <div class="box_img"></div>
      <div class="box_school">万载三中</div>
    </div>
    <div class="content">
      <div class="box_wel">
        <span>欢迎使用智慧校园管理平台</span>
      </div>
      <div class="box_login">
        <div class="login_title">绑定账号</div>
        <div class="login_code">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <div class="title">绑定后可以使用账号登录,账号更加安全</div>
            <el-form-item label="" prop="user">
              <el-input
                :prefix-icon="User"
                v-model="ruleForm.user"
                placeholder="请输入登录名"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="" prop="pass">
              <el-input
                :prefix-icon="Lock"
                show-password
                v-model="ruleForm.pass"
                type="password"
                autocomplete="off"
                placeholder="请输入登录密码"
              />
            </el-form-item>
            <el-checkbox v-model="checked" class="remeberPwd el-form-item"
              >记住密码</el-checkbox
            >
            <el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                @click="submitForm(ruleFormRef)"
                color="rgba(0, 97, 255, 1)"
                >确认绑定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onMounted,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import QrcodeVue from "qrcode.vue";
import wxlogin from "vue-wxlogin";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
const ruleFormRef = ref();
const ruleForm = reactive({
  user: "",
  pass: "",
});
const checked = ref(false); // 记住密码

const rules = reactive({
  user: [{ required: true, message: "请填写用户名", trigger: "blur" }],
  pass: [{ required: true, message: "请填写密码", trigger: "blur" }],
});
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      // loading.value = true;
      // let data = {
      //   account: ruleForm.user,
      //   password: ruleForm.pass,
      // };
      // let res = await axios({
      //   method: "post",
      //   url: api.value + "/login/Login",
      //   data: data,
      // });
      // console.log(res);
      // if (res.data.code == 200) {
      //   if (checked.value) {
      //     localStorage.setItem("user", ruleForm.user);
      //     localStorage.setItem("pass", ruleForm.pass);
      //   } else {
      //     localStorage.removeItem("user", ruleForm.user);
      //     localStorage.removeItem("pass", ruleForm.user);
      //   }
      //   sessionStorage.setItem("token", res.data.data.token);
      //   sessionStorage.setItem("userhead", res.data.data.userhead);
      //   sessionStorage.setItem("schoolId", res.data.data.schoolId);
      //   sessionStorage.setItem("username", res.data.data.userName);
      //   sessionStorage.setItem("sidevarItem", 1);
      //   store.commit("indexUp", 1);
      //   store.commit("userName", ruleForm.user);
      //   store.commit("passWord", ruleForm.user);
      //   router.push({
      //     path: `/repairs/home`,
      //   });
      //   ElMessage({
      //     type: "success",
      //     showClose: true,
      //     message: "登录成功",
      //     center: true,
      //   });
      // } else {
      //   ElMessage({
      //     type: "error",
      //     showClose: true,
      //     message: "登录失败",
      //     center: true,
      //   });
      //   loading.value = false;
      // }
    } else {
      return false;
    }
  });
};
// 实例微信js对象
const setWxerwma = async () => {
  //生成微信扫码登录二维码页面
  new WxLogin({
    self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    id: "weixin", //显示二维码容器设置
    appid: "wxa94836d74473fe5c", //应用位置标识appid
    scope: "snsapi_login", //当前微信扫码登录页面已经授权了
    redirect_uri: "https://www.campussmartlife.com/smartManage/#/login", //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
    state: "", //state就是后台服务器重定向的地址携带用户信息
    style: "black",
    href: "data:text/css;base64,LmltcG93ZXJCb3gge3dpZHRoOiAyMDBweDt9Ci5pbXBvd2VyQm94IC5xcmNvZGUge3dpZHRoOiAyMDBweDttYXJnaW46MDt9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5Om5vbmU7fQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9IA==",
  });
};
onMounted(() => {
  // setWxerwma();
});
</script>

<style lang="scss" scoped>
.box {
  // position: relative;
  min-width: 1300px;
  min-height: 750px;
  width: 100vw;
  height: 100vh;
  color: #000;
  background-image: url(@/assets/school/login_bg.png);
  background-size: 100% 100%;
  .top {
    display: flex;
    align-items: center;
    padding: 54px 0 0 62px;

    .box_img {
      // position: absolute;
      // top: 54px;
      // left: 62px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: skyblue;
      margin-right: 20px;
    }

    .box_school {
      // position: absolute;
      // top: 61px;
      // left: 141px;
      font-size: 29px;
      font-weight: bold;
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 110px);
    // margin-top: 40px;
    display: flex;
    // justify-content: space-between;
    .box_wel {
      font-size: 52.5px;
      font-weight: bold;
      margin-top: 20px;
      width: 66%;
      height: 40%;
      span {
        display: block;
        text-align: center;
      }
    }

    .box_login {
      // position: absolute;
      // top: 223px;
      // left: 1286px;
      width: 24%;
      height: 70%;
      box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
      background-color: #fff;
      // border: 1px solid red;
      // margin-top: 100px;
      padding: 60px 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      // width: 426px;
      // height: 536px;

      .login_title {
        font-size: 24px;
        font-weight: bold;
      }

      .login_tips {
        color: #a6a6a6;
        font-size: 16px;
      }

      .login_code {
        // width: 200px;
        // height: 250px;
        .el-form {
          width: 280px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 35px 0;
          border-radius: 16px;
          // background: rgba(255, 255, 255, 1);

          .title {
            color: rgba(0, 185, 170, 1);
            font-size: 14px;
            margin: 0 0 10px 0;
          }

          .el-divider {
            width: 85%;
            margin: 20px 0 30px;
          }

          .el-form-item {
            width: 280px;
            height: 40px;
            // margin-bottom: 0;

            :deep(.el-form-item__content) {
              margin-left: 0 !important;

              .el-input {
                height: 40px;

                .el-input__wrapper {
                  border-radius: 12px;

                  .el-input__prefix {
                    margin: 0 10px 0 12px;
                  }
                }

                // .el-icon {
                //   width: 24px;
                //   height: 24px;

                //   svg {
                //     width: 24px;
                //     height: 24px;
                //   }
                // }

                .el-input__inner {
                  height: 100%;
                  font-size: 14px;
                }
              }

              // .el-form-item__error {
              //   font-size: 16px;
              // }

              .el-button {
                width: 100%;
                height: 40px;
                font-size: 16px;
                border-radius: 12px;
              }
            }

            .el-button--primary {
              width: 280px;
            }
          }

          .remeberPwd {
            height: 30px;
            margin-bottom: 30px;

            // :deep(.el-checkbox__input) {
            //   .el-checkbox__inner {
            //     width: 15px;
            //     height: 15px;
            //   }

            //   .el-checkbox__inner::after {
            //     width: 6px;
            //     height: 12px;
            //     top: 0px;
            //   }
            // }

            :deep(.el-checkbox__label) {
              font-size: 14px;
            }
          }
        }
      }

      .login_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 210px;
        height: 40px;
        display: none;

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 98px;
          height: 40px;
          color: #fff;
          font-size: 16px;
          border-radius: 8px;
          background-color: #0061ff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
