<template>
  <div id="login">
    <canvas id="canvas"></canvas>

    <div class="box">
      <transition appear>
        <div class="login">
          <br />
          <br />
          <h1>客服后台</h1>
          <br />
          <el-form :model="user" :rules="rules" ref="userForm">
            <el-form-item class="login-input" label="" prop="username">
              <el-input
                name="username"
                placeholder="账户"
                v-model="user.username"
                @keyup.enter.native="submit"
                :autofocus="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item class="login-input" label="" prop="password">
              <el-input
                name="password"
                type="password"
                placeholder="密码"
                v-model="user.password"
                @keyup.enter.native="submit"
              >
              </el-input>
            </el-form-item>
            <el-form-item class="code-input" label="" prop="vcode">
              <el-input
                class="login-input-code"
                name="vcode"
                placeholder="验证码"
                :loading="sendLoad"
                v-model="user.vcode"
                maxlength="4"
                @keyup.enter.native="submit"
              >
              </el-input>
              <el-button
                class="code-button"
                type="success"
                plain
                @click="sendMail()"
                >{{ text }}</el-button
              >
            </el-form-item>
            <br />
            <el-button
              :loading="ui.loginLoading"
              class="login-btn"
              size="large"
              type="info"
              @click="submit"
              >登录
            </el-button>
          </el-form>
        </div>
      </transition>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import watermark from "watermark-dom";
import watermark from "../../utils/watermark";

export default {
  name: "SisLogin",
  data() {
    return {
      show: true,
      sendLoad: false,
      time: "获取验证码",
      ui: {
        loginLoading: false,
        errorAlert: { isShow: false, title: "" },
      },
      rules: {
        username: [
          { required: true, message: "请输入账户", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        vcode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
      },
      user: {
        userId: "",
        password: "",
        username: "",
        vcode: "",
        smsType: "backLogin",
      },
    };
  },

  methods: {
    submit() {
      this.$refs["userForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.ui.loginLoading = true;

        this.$cacheUtils.cleanCache();
        this.$$post("/login", this.user).then((res) => {
          if (res.data.code === "200") {
            // console.log(res.data.result,'登录成功返回的结果');
            localStorage.setItem("userName", res.data.result.userName);
            localStorage.setItem("agentNo", res.data.result.extensionNumber);
            localStorage.setItem("loginName", res.data.result.loginName);
            localStorage.setItem("userCell", res.data.result.userCell);
            localStorage.setItem("userCellFour", res.data.result.userCellFour);
            // console.log(res.data.result.userCell,'返回的手机号');

            let userRolePermission = this.userRolelistToStringUtils(
              res.data.result.userRole
            );
            localStorage.setItem("userRole", userRolePermission);

            let btnPermission = this.listToStringUtils(
              res.data.result.buttonList
            );
            localStorage.setItem("btnPermission", btnPermission);
            if (res.data.result.buttonList != []) {
              localStorage.setItem("btnUrl", res.data.result.buttonList);
            } else {
              localStorage.setItem("btnUrl", null);
            }
            localStorage.setItem(
              "authaaaa",
              JSON.stringify(res.data.result.menuList)
            );

            const uName = res.data.result.loginName;

            let canvas = document.getElementById("canvas");
            canvas.width = 300;
            canvas.height = 300;
            let context = canvas.getContext("2d");
            context.translate(-85, 125);
            context.rotate((-35 * Math.PI) / 180);
            context.font = "normal 30px Arial";
            context.fillStyle = "#d1d1d1";
            context.fillText(uName, 50, 150);

            localStorage.setItem("bg", context.canvas.toDataURL());

            this.$router.push("/index");
            const nowDate = new Date();
            const nowMonth = nowDate.getMonth() + 1;
            const nowDay =
              nowDate.getDate() > 10
                ? nowDate.getDate()
                : "0" + nowDate.getDate();
            setTimeout(() => {
              watermark.load({
                watermark_txt:
                  res.data.result.loginName +
                  res.data.result.userCellFour +
                  nowMonth+nowDay,
                watermark_color: "#aaa",
                watermark_angle: 30,
                watermark_width: 400,
              });
            }, 100);
          } else {
            this.ui.loginLoading = false;
            this.$message({
              message: `${res.data.message}`,
              type: "warning",
            });
          }
        });
      });
    },

    sendMail() {
      if (!this.user.username) {
        this.$message({
          message: `用户名不能为空`,
          type: "warning",
        });
        return;
      }

      if (!this.user.password) {
        this.$message({
          message: `密码不能为空`,
          type: "warning",
        });
        return;
      }

      if (this.sendLoad) {
        return;
      }
      //java发送验证码接口
      this.$$post("/login/sendLoginSms", this.user).then((res) => {
        if (res.data.code === "200") {
          this.sendLoad = true;
          this.time = 60;
          this.timer();
          this.$message({
            message: "验证码发送成功，请查看",
            type: "success",
          });
        } else {
          this.sendLoad = false;
          this.$message({
            message: `${res.data.message}`,
            type: "warning",
          });
        }
      });
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        setTimeout(this.timer, 1000);
      }
    },

    listToStringUtils(list) {
      var returnStr = "";
      for (var num in list) {
        if (num === list.length - 1) {
          returnStr = returnStr + list[num].code;
        } else {
          returnStr = returnStr + list[num].code + ",";
        }
      }
      return returnStr;
    },

    userRolelistToStringUtils(list) {
      var returnStr = "";
      for (var num in list) {
        if (num === list.length - 1) {
          returnStr = returnStr + list[num].roleCode;
        } else {
          returnStr = returnStr + list[num].roleCode + ",";
        }
      }
      return returnStr;
    },

    showErrorAlert(err) {
      this.$message.error(err.msg === undefined ? "404" : err.msg);
      this.ui.loginLoading = false;
    },
  },
  computed: {
    text: function () {
      if (this.time === 0) {
        this.sendLoad = false;
      }
      return this.time > 0 ? this.time + "s 后重新获取" : "获取验证码";
    },
  },
};
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
#login {
  width: 100%;
  height: 100%;
  background-image: url('../../../public/image/backimg20190828.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: rgba(30, 30, 30, 0.6);
    width: bw = 700px;
    height: bh = 600px;
    margin-left: -(bw / 2);
    margin-top: -(bh / 2);

    .slide-fade-left-enter-active {
      transition: all 2s ease;
    }

    .slide-fade-left-leave-active {
      transition: all 2s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-left-enter, .slide-fade-left-leave-to {
      transform: translateX(-150px);
      opacity: 0;
    }

    .slide-fade-right-enter-active {
      transition: all 2s ease;
    }

    .slide-fade-right-leave-active {
      transition: all 2s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-right-enter, .slide-fade-right-leave-to {
      transform: translateX(150px);
      opacity: 0;
    }

    .slide-fade-top-enter-active {
      transition: all 2.5s ease;
    }

    .slide-fade-top-leave-active {
      transition: all 2.5s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-top-enter, .slide-fade-top-leave-to {
      transform: translateY(100px);
      opacity: 0;
    }

    .right {
      position: absolute;
      top: 0;
      right: 0;
      width: bw - 120;
      height: bh - 60;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 3px;
    }

    .left {
      position: absolute;
      bottom: 0;
      left: 0;
      width: bw - 120;
      height: bh - 60;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 3px;
    }

    .login {
      position: absolute;
      top: 60px;
      left: 150px;
      z-index: 10;
      width: 400px;
      height: 480px;

      h1 {
        color: white;
        text-align: center;
      }

      .login-input {
        width: 90%;
        margin: 20px;

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

      .code-input {
        width: 95%;
      }

      .login-input-code {
        margin-left: 1.4em;
        width: 50%;
        margin-right: 15px;
        float: left;
      }

      .code-button {
        float: right;
      }

      .login-btn {
        display: block;
        width: 80%;
        margin: auto;
        background-color: #3592FE;
        border-color: #162938;
      }
    }
  }
}

#canvas {
  position: fixed;
  left: 0;
  top: 15vh;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 8888;
  display: none;
}
</style>


