<!--
 * @Description  :登录
 * @Autor        : miaofang
 * @LastEditTime : 2023-05-17 15:36:30
-->
<template>
  <div class="bg">
    <div class="title">
      <img src="../../image/bdclogo.png" alt="">
      <h2>{{ BASE_API.TITLE }}</h2>
    </div>
    <div class="login-inner-bg login">
      <div class="user_style">
        <h3>用户登录</h3>
        <el-form :model="user" :rules="rules" ref="user" id="loginform" class="demo-ruleForm">
          <el-form-item prop="account">
            <el-input class="username" v-model="user.account" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" class="password" @keyup.enter.native="login('user')" v-model="user.password"
              placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <!-- <el-form-item prop="yz">
            <div class="flex-container">
              <div class="flex-input">
                <el-input class="yz" @keyup.native="login('user')" v-model="user.yz" placeholder="请输入验证码"></el-input>
              </div>
              <div class="flex-line"></div>
              <div class="flex-img"><canvas id="s-canvas" ref="s-canvas"></canvas></div>
              <div class="flex-renovate">
                <font id="renovate" @click="verification">换一批</font>
              </div>
            </div>
          </el-form-item> -->
          <el-form-item class="login-btn">
            <el-button type="primary" style="width: 100%" @click="login('user')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { getMenuInfo } from "@/api/user";
  import { loginIn } from "@/api/login.js";
  export default {
    name: "sbLogin",
    data () {
      return {
        user: {
          account: "",
          password: "",
          yz: "",
          checkStatus: false,
        },
        productName: "",
        rules: {
          account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
          password: [{ required: true, message: "请填写密码", trigger: "blur" }],
        },
      };
    },
    methods: {
      verification () {
        let str = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ', code = '', i = 0;
        for (; i++ < 4;) code += str[Math.floor(Math.random() * (str.length - 0) + 0)];
        setTimeout(() => {
          let canvas = document.getElementById("s-canvas"), ctx = canvas.getContext("2d");
          canvas.width = 80;
          canvas.height = 28;
          ctx.fillStyle = '#ffffff';
          ctx.fillRect(0, 0, 80, 28);
          for (i = 0; i < code.length; i++) { this.drawText(ctx, code[i], i); }
        }, 0);
      },
      drawText (ctx, txt, i) {
        ctx.fillStyle = this.randomColor(50, 160);
        ctx.font = "18px SimHei";
        let x = (i + 1) * (80 / (4 + 1)), y = this.randomNum(18, 28 - 5);
        ctx.translate(x, y);
        ctx.fillText(txt, 0, 0);
        ctx.rotate((-0 * Math.PI) / 180);
        ctx.translate(-x, -y);
      },
      randomColor (min, max) {
        let r = this.randomNum(min, max);
        let g = this.randomNum(min, max);
        let b = this.randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
      },
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      //记住用户名
      checkUserName: function (flag) {
        this.user.checkStatus = flag;
        if (this.user.checkStatus) {
          localStorage.setItem("accountId", this.user.account);
          let name = localStorage.getItem("accountId");
          if (name === "") {
            return;
          } else {
            this.user.account = name;
          }
        } else {
          this.user.account = localStorage.getItem("accountId");
        }
      },
      login (user) {
        var self = this
        this.$refs[user].validate(async (valid) => {
          if (valid) {
            let res = await loginIn(self.user.account, self.user.password)
            if (res.status == 1) {
              let code = this.BASE_API.CODE;
              localStorage.setItem("token", `Bearer ${res.content}`);
              const { result: getMenuData } = (await getMenuInfo(code)) || [];
              let path1 = JSON.parse(getMenuData[0].metadata)?.path + '/' + JSON.parse(getMenuData[0].children[0].metadata)?.path

              console.log(getMenuData, path1, 'path1path1path1path1path1');
              //登录成功后需判断有无重定向，没有重定向则跳转首页
              const accessRoutes = await this.$store.dispatch(
                "permission/generateRoutes",
                getMenuData
              );
              this.$router.addRoutes([
                ...accessRoutes,
                { path: "*", redirect: "/404", hidden: true },
              ]);
              this.$router.replace(this.$route.query.redirect || path1);
            } else {
              this.$message.error(res.message);
            }
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .username,
  .password,
  .yz {
    position: relative;

    &:before {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      left: 10px;
      top: 7px;
      background-size: 100% 100%;
    }

    /deep/ .el-input__inner {
      color: #000 !important;
      text-indent: 24px;
    }
  }

  .flex-container {
    position: relative;
    display: -webkit-flex;
    display: flex;
  }

  .flex-input {
    width: 100%;
  }

  .flex-line {
    position: absolute;
    width: 1px;
    height: 64%;
    margin: 5px;
    right: 36%;
    background-color: #cccccc;
  }

  .flex-img {
    position: absolute;
    margin: 2px;
    right: 16%;
  }

  .flex-renovate {
    position: absolute;
    margin: 1px;
    right: 3%;
  }

  #renovate {
    color: #3f8fea;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .username::before {
    background-image: url(../../image/userlogo.png);
  }

  .password::before {
    background-image: url(../../image/passlogo.png);
  }

  .yz::before {
    background-image: url(../../image/yzlogo.png);
  }

  .bg {
    width: 100%;
    height: 100%;
    min-width: 1440px;
    min-height: 560px;
    background: url(../../image/loginBoxsb.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
  }

  .title {
    width: 24%;
    height: 6%;
    top: 20%;
    right: 38%;
    position: absolute;

    img {
      width: 60px;
      height: 60px;
      top: 0%;
      left: 2%;
      position: absolute;
    }

    h2 {
      top: 25%;
      left: 22%;
      position: absolute;
      width: 383px;
      height: 42px;
      font-size: 28px;
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0px 4px 4px #002c95;
    }
  }

  .login-inner-bg {
    background: white;
    width: 24.6%;
    min-width: 360px;
    top: 30%;
    right: 38%;
    position: absolute;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 56px;
  }

  .login {
    .user_style {
      h3 {
        font-weight: normal;
        text-align: center;
        margin: -10px auto 28px;
        font-weight: 400;
        width: 125px;
        height: 29px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
    }

    .btn {
      width: 100%;
      height: 6vh;
      background-color: #00c2de;
      border-radius: 5px;
      font-size: 1.4vw;
      color: #000;
    }

    .btn:hover {
      cursor: pointer;
      background-color: #2d8cf0;
    }
  }

  .login #loginform {
    .el-form-item {
      margin-bottom: 24px !important;
    }

    .login-btn {
      margin-top: 30px !important;
    }

    .el-button {
      font-size: 18px;
      border-radius: 0;
      background: #4162d8 !important;
      color: #ffffff !important;
      cursor: pointer !important;
    }

    .el-input__inner {
      width: 100% !important;
    }

    .el-checkbox__label {
      color: #fff;
    }
  }

  .inputUser .ivu-input {
    padding: 6px 24px !important;
    border: 1px solid #9f9f9f !important;
  }
</style>