<template>
  <div class="login" style="-webkit-app-region: drag" >

<!--    <div class="login-logo">-->
<!--      <img src="../assets/logo/logo.png" alt="Logo" />-->
<!--      <span>模拟交易</span>-->

<!--      <div class="el-login-footer">-->
<!--        <span>-->
<!--          仅供模拟学习使用-->
<!--        </span>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="exitCSS">-->
<!--      <img src="../assets/images/exit.png" alt="exit" @click="exit" />-->
<!--    </div>-->
    <div class="registerLink" style="-webkit-app-region: no-drag;" >
      <router-link class="link-type" :to="'/register'"
      >{{ $t("注册") }}</router-link>
    </div>
    <div class="login-box">

      <div class="pc" v-show="loginType === 1" style="-webkit-app-region: no-drag;">

        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form" style = "display: flex"
        >
          <div style="display: flex;flex-direction: column">
            <el-form-item class="w250" prop="username">
              <el-input
                      v-model="loginForm.username"
                      type="text"
                      auto-complete="off"
                      placeholder=""
                      prefix-icon="el-icon-user-solid"
              >
                <i class="el-icon-share"></i>

              </el-input>
            </el-form-item>
            <el-form-item class="w250" prop="password">
              <el-input
                      v-model="loginForm.password"
                      type="password"
                      auto-complete="off"
                      placeholder=""
                      prefix-icon="el-icon-lock"

                      @keyup.enter.native="handleLogin"
              >

              </el-input>
            </el-form-item>
            <el-form-item class="w250" prop="code" v-if="captchaOnOff">
              <el-input
                      v-model="loginForm.code"
                      auto-complete="off"
                      placeholder=""
                      style="width: 40%"
                      @keyup.enter.native="handleLogin"
              >

              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
            <el-checkbox style="color: white"  v-model="loginForm.rememberMe" >{{ $t("记住密码") }}</el-checkbox>
          </div>
          <div class="loginRight">

            <el-form-item  style="-webkit-app-region: no-drag;width: 100%">
              <el-button
                      :loading="loading"
                      size="default"
                      type="primary"
                      style="line-height:70px; font-size:25px;width: 100px;height:100px;background-color: #0393a7;border-color: #0393a7"
                      @click.native.prevent="handleLogin"
              >
                <span style="font-size: 15px"  v-if="!loading">{{ $t("登 录") }}</span>



                <span style="font-size: 15px" v-else></span>
              </el-button>

            </el-form-item>

          </div>

        </el-form>
      </div>
    </div>
    <!--  底部  -->
    <div class="close-button" @click="exit()">
      <span class="close-dot"></span>
    </div>
    <div  style="position: absolute;bottom: 20px;right: 43px;font-size: 20px;font-weight: bold;color: gray;cursor: pointer;-webkit-app-region: no-drag;" @click="exit()">
      <span  >EXIT</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/utils/request";
import { Notification, MessageBox, Message, Loading } from "element-ui";

import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import "element-ui/lib/theme-chalk/display.css";



// import isElectron  from "is-electron"
// if (isElectron())
// {
//
// }


export default {
  name: "Login",
  data() {
    return {
      loginType: 1,
      wxQrcode: "",
      // wsuri: "ws://127.0.0.1:8088/websocket/message",
      wsuri: "",
      ws: null,
      codeUrl: "",
      isKeyDown:false,
      dinatesX:0,
      dinatesY:0,
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message:  this.$t("请输入您的账号") },
        ],
        password: [
          { required: true, trigger: "blur", message: this.$t("请输入您的密码") },
        ],
        code: [{ required: true, trigger: "change", message: this.$t("请输入验证码") }],
      },
      loading: false,
      // 验证码开关
      captchaOnOff: false,
      // 注册开关
      register: true,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  async created() {
    // this.getCode();
    this.getCookie();

  },
  methods: {

    exit(){
      if (typeof process !== 'undefined' && process.versions && process.versions.electron) {
        const {ipcRenderer} = require('electron');
        ipcRenderer.send('close-window');
      }

    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaOnOff =
          res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {

              if (typeof process !== 'undefined' && process.versions && process.versions.electron) {
                const {ipcRenderer} = require('electron');
                ipcRenderer.send('login-success');
              }
              this.$router.push({ path: this.redirect || "index" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
                this.getCode();
              }
            });
        }
      });
    },
    changeLoginType(type) {
      this.loginType = type;
    },
    mousedown(e){
      this.isKeyDown = true
      this.dinatesX = e.x
      this.dinatesY = e.y

      document.onmousemove = (ev) => {
        if(this.isKeyDown){
          const x = ev.screenX - this.dinatesX
          const y = ev.screenY - this.dinatesY
          //给主进程传入坐标
          if (typeof process !== 'undefined' && process.versions && process.versions.electron) {
            const {ipcRenderer} = require('electron');
            ipcRenderer.send('move-application',{
              appX:x,
              appY:y
            })
          }

        }
      };
      document.onmouseup = (ev) => {
        this.isKeyDown = false
      };
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .login {
    display: flex;
    height: 100%;
    justify-content: right;
    padding-right: 10px;
    background-color: #f0f0f0;
    background-image:   url("../assets/images/login.png");
    background-size: contain;
  }

  .login-box{
    padding-top: 150px;
  }
  .loginRight{

    width: 100px;
  }
  .el-form-item{
    margin-bottom: 0px !important;
  }
  .el-input__inner{
    border-radius:0px;
    height: 50px;
    line-height: 50px;
  }
  .login-logo {
    color: white;
    position: absolute;
    top: 50px;
    left: 50px;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: auto;
      margin-right: 10px;
    }
    span {
      font-size: 24px;
      font-weight: bold;
    }
  }
  .link-type{
    color: white;
    font-weight: bold;
    text-decoration: none; /* Remove underline */

  }
.registerLink{
  text-align: center;
  top: 40px;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
}
.main-title {
  margin: 3% 0 0 0;
  height: 34px;
  text-align: center;
  color: #911717;
  /*background-image: url("../assets/logo/logo_w.png");*/
  /*background-repeat: no-repeat;*/
  /*background-size: auto 34px;*/
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  span {
    line-height: 34px;
    font-size: 58px;
    height: 34px;
    color: white;
    vertical-align: middle;
    font-weight: 500;
  }
}
.sub-title {
  margin: 20px 0 20px 0;
  text-align: center;
  color: white;
  font-size: 18px;
}

.exitCSS{
  app-region: no-drag;position: absolute;right: 2px;top: 2px;border: 3px solid white;width: 40px;height: 40px;
}
.login-tip {
  font-size: 16px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {

  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 10px;
}
.login-code-img {
  height: 40px;
}
  .close-button {
    position: absolute;
    top: 5px; /* 向下移动 */
    right: 5px; /* 向左移动 */
    width: 15px; /* 调整按钮宽度 */
    height: 15px; /* 调整按钮高度 */
    border-radius: 50%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-app-region: no-drag;
  }

  .close-dot {
    width: 6px; /* 调整内部点的宽度 */
    height: 6px; /* 调整内部点的高度 */
    border-radius: 50%;
    background-color: #f00;
    transition: transform 0.2s;
  }

  .close-button:hover .close-dot {
    transform: scale(1.5);
  }
  .w200{
    width: 250px;
  }
</style>
帮我转换为uniapp 移动端