<template>
  <div class="login">
    <img src="../../assets/image/logobg2.png" alt="" class="logobig" />
    <div class="logTit">
      <h2 style="letter-spacing: 0.3vw; color: #333333">智慧红沙湾园区管理</h2>
      <p style="margin-top: 1vw; letter-spacing: 0.3vw; color: #666666">
        （企业端）
      </p>
    </div>
    <div class="loginBox">
      <div class="inputBox">
        <img src="../../assets/image/comicon.png" alt="" />
        <input
          type="text"
          placeholder="请输入企业名称"
          v-model="loginForm.userName"
        />
      </div>
      <div class="inputBox">
        <img src="../../assets/image/pswicon.svg" alt="" />
        <input
          type="password"
          placeholder="请输入密码"
          v-model="loginForm.password"
        />
      </div>
      <div class="inputBox">
        <img src="../../assets/image/yzmicon.svg" alt="" />
        <input
          type="text"
          placeholder="验证码"
          class="yanzhengma"
          v-model="loginForm.code"
        />
        <img
          :src="loginForm.captchaImage"
          @click="captchaImageRefresh(loginForm)"
          class="yanzhengImg"
        />
      </div>
      <div class="pswBox">
        <div @click="forgetPsw">忘记密码？</div>
        <div @click="goLogin()">没有账号？去注册</div>
      </div>
      <div>
        <van-button type="default" size="large" color="#1f1fbe" @click="login"
          >登 录</van-button
        >
        <van-button
          style="margin-top: 4vw"
          type="default"
          size="large"
          color="#1f1fbe"
          @click="goManger()"
          >前往管理端</van-button
        >
      </div>
    </div>
    <div class="bottomTips">
      2022@copyrigtht IOT - Park-tech. supported by 中国移动
    </div>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
import { authLogin, Login } from "@/service/api_login";
import auth from "@/service/auth";
import { initCompanyOpenId } from "@/service/api_fillController";
import wx from "weixin-js-sdk";
import VConsole from "vconsole";

export default {
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
        code: "",
        type: this.$auth.TYPE_FRAME,
        captchaId: "",
        captchaImage: "",
        rememberMe: true,
      },
      userObj: {},
      urlParm: "",
    };
  },
  mounted() {
    this.initUrlParam();
    this.captchaImageRefresh(this.loginForm);
  },
  methods: {
    goLogin() {
      this.$router.push({
        path: "/registerbycpyinfo",
      });
      console.log(123);
    },
    goManger() {
      console.log(wx);
      wx.miniProgram.navigateTo({
        url: "/pages/login/login",
        success: function (res) {
          // 通过eventChannel向被打开页面传送数
        },
        fail: function (res) {
          console.log(res);
          // 通过eventChannel向被打开页面传送数
        },
      });
    },
    initUrlParam() {
      let url = window.location.href;
      let parm = url.split("?");
      console.log("fenge1_:", parm, parm.length);
      if (parm.length > 1) {
        this.urlParm = parm[1];
      } else {
        this.urlParm = "";
      }
    },

    // getUrlParam方法就是使用正则截取地址栏里的code
    getUrlParam: function (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getOpenId(code) {
      // console.log(code)
      // Toast('openId', code)
      // 这里调用后端给的接口吧code传过去就好了
      initCompanyOpenId({ id: auth.currUser().id, openId: code }).then(
        (res) => {
          if (res.code == "200") {
            // Toast(res.msg)
            this.$auth.setUser(this.userObj);
            this.$router.push("/home/home");
            Toast("登录成功");
          } else {
            Toast(res.msg);
          }
        }
      );
    },
    captchaImageRefresh: function (_form) {
      _form.captchaId = this.$common.uuid(8);
      _form.captchaImage =
        this.$constant.BASE_URI +
        "/captcha/captchaImage?type=math&captchaId=" +
        _form.captchaId +
        "&s=" +
        Math.random();
    },
    forgetPsw() {
      Dialog.confirm({
        title: "忘记密码",
        message: "联系客服：15061150110",
        // confirmButtonColor: "#1f1fbe",
        confirmButtonText: "拨打",
      })
        .then(() => {
          // on close
          window.location.href = "tel://" + "15061150110";
        })
        .catch(() => {
          // on cancel
        });
    },
    login() {
      const _this = this;
      if (!this.loginForm.userName || !this.loginForm.password) {
        Toast("请填写账号和密码");
        return false;
      }
      this.$auth.setUserType(this.$auth.TYPE_FRAME);
      let loginForm = { ...this.loginForm };
      console.log("loginForm", loginForm);
      loginForm.userName = loginForm.userName.replaceAll(`（`, `(`);
      loginForm.userName = loginForm.userName.replaceAll(`）`, `)`);
      Login(loginForm).then((res) => {
        console.log(res);
        if (res.msg == "正常") {
          // _this.login(res.data);
          // console.log(res.user_)
          this.$auth.setUser(res.user_);
          this.$router.push("/home/home?" + this.urlParm);
          // this.userObj = res.user
          Toast("登录成功");
          // this.$nextTick(() => {
          //     this.getCode()
          // })
        } else {
          Toast(res.msg);
        }
      });
    },
    onShareAppMessage: function () {},
  },
};
</script>
<style lang="scss">
.login {
  background: white;
  height: 100%;
  overflow: hidden;
  .logTit {
    width: 80vw;
    left: 10vw;
    top: 60vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    color: rgba(51, 51, 51, 1);
    font-size: 4vw;
    p {
      color: rgba(102, 102, 102, 1);
      font-size: 4vw;
      margin-top: 0.5vw;
    }
  }
  .logobig {
    width: 100vw;
    position: absolute;
    left: 0;
    z-index: 0;
  }

  .loginBox {
    width: 70vw;
    left: 15vw;
    padding-top: 80vw;
    position: absolute;
  }
  .inputBox {
    position: relative;
    display: flex;
    align-items: center;
    img {
      position: absolute;
      width: 7vw;
      // padding-top: 40px;
    }
    .yanzhengImg {
      right: 0;
      width: 20vw;
      height: 10vw;
    }
    .yanzhengImgBox {
      height: 50px;
      display: flex;
      align-items: center;
    }
    input {
      width: 100%;
      height: 50px;
      padding: 20px 0 20px 50px;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid rgba(29, 24, 188, 0.05);
      margin: 10px 0;
      font-size: 4vw;
    }
    input::-webkit-input-placeholder {
      color: rgba(153, 153, 153, 1);
    }
    .yanzhengma {
      width: 60%;
    }
  }
  .pswBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    color: rgba(29, 24, 188, 1);
  }
  .van-button {
    border-radius: 60px;

    margin-top: 50px;
  }
  .bottomTips {
    width: 100vw;
    position: fixed;
    bottom: 15px;
    text-align: center;
    color: #999999;
    font-size: 2vw;
  }
  @media screen and (max-height: 454px) {
    .bottomTips {
      display: none;
    }
  }
}
</style>
