<template>
  <div @keyup.enter.native="handleLogin('loginForm')" class="main-box" style="position: relative">
    <div class="ad-dialog" v-if="adShow">
      <div
        class="showAdImg"
        style=""></div>
    </div>
    <!--  登录-->
    <img src="../../assets/kyy/login-bg.png" alt="">
    <img @click="goHomePage" style="cursor: pointer" class="logo-top1" :src="logoImg" alt="" v-if="isLogo&&isShow">
    <img @click="goHomePage" style="cursor: pointer" class="logo-top" src="../../assets/kyy/LOGONew.png" alt=""
         v-else-if="isShow">
    <!--    <div-->

    <!--      style="position:absolute;top:15px;cursor: pointer;left: 15px;height: 100px!important;width: 250px!important;display: flex"-->
    <!--      v-else>-->
    <!--      <img style="width: 126px!important;height: 58px!important;" @click="goHomePage"-->
    <!--           class="logo-top"-->
    <!--           src="./img/yun.png" alt="">-->
    <!--      <span-->
    <!--        style="margin-left: 8px;display:flex;justify-content:center;align-items:center;font-weight:700;color:#0052a4;margin-top: 53px">opencomputing</span>-->
    <!--    </div>-->

    <div class="login-form" v-if="showWxCode"
         style="display:flex;align-items:center;justify-content:center;"
         id="login_containera"></div>
    <div v-else class="login-form">
      <!--      <div style="width: 535px;height: 85px;">-->
      <div style="width: 100% ;height: 85px;" v-if="false">
        <before-login
          style="margin-top: 15px;width: 100%!important;"
          v-if="isShowSaleProduct"></before-login>
      </div>
      <!--      </div>-->
      <div v-if="true" class="main-content-box"
           style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 25px">
        <span class="login-text">登录</span>
        <div class="login-container login-form-style">
          <div class="login-type">
            <span :class="{activeType:loginType==='0'}" @click="changeLoginType('0')">账号登录</span>
            <span :class="{activeType:loginType==='1'}" @click="changeLoginType('1')">手机号登录</span>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="" name="first"> -->
            <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-l" autocomplete="on"
                     label-position="left">
              <el-form-item prop="username" style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
                <div class="user-input">
                  <span class="svg-container icon-box">
                    <!--                  <svg-icon icon-class="Icon-user2icon" />-->
                    <img src="../../assets/kyy/用户.svg" alt="">
                  </span>
                  <el-input id="uesr-name-id" ref="username" v-model="loginForm.username"
                            placeholder="请输入用户名/手机号" name="username" type="text" class="userInput"/>
                </div>
              </el-form-item>
              <el-tooltip v-if="loginType==='0'" v-model="capsTooltip" style="margin-bottom: 7px"
                          content="Caps lock is On" placement="right"
                          manual>
                <el-form-item prop="password" class="password-mobile"
                              style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
                  <div class="user-input">
                    <span class="svg-container icon-box" style="padding: 2px;color: #9699a0;">
                      <!--                    <svg-icon icon-class="password" />-->
                      <img src="./svg/密码.svg" style="color: #6c7079" alt="">
                    </span>
                    <el-input id="passwordId" :key="passwordType" ref="password" v-model="loginForm.password"
                              :type="passwordType" placeholder="请输入密码" name="password"
                              @keyup.native="checkCapslock" @blur="capsTooltip = false"
                              @keyup.enter.native="handleLogin"/>
                    <span class="show-pwd" @click="showPwd">
                      <svg-icon style="margin-right: 10px;cursor: pointer" :icon-class="
                        passwordType === 'password' ? 'eye' : 'eye-open'
                      "/>
                    </span>
                  </div>
                </el-form-item>
              </el-tooltip>

              <div v-else style="display:flex;margin-top:20px;"
                   v-show="loginForm.username!=='admin'&&loginForm.password!=='admin'">
                <el-form-item prop="" class="invitecode" style="background-color: white; border: 1px solid #d9d9d9;">
                  <div class="user-input">
                    <span class="svg-container icon-box">
                    <img src="./svg/密码.svg" style="color: #6c7079;width: 19px;height: 17px;" alt="">
                    </span>
                    <el-input ref="vcode" v-model="loginForm.vcode" placeholder="请输入验证码" name="vcode"
                              type="text"/>
                  </div>
                </el-form-item>
                <span :disabled="isDisabled" class="getCodeStyleNew" style="height:40px;margin-left:10px"
                      @click="getCode">{{ SendCode_text }}
                </span>
              </div>

              <!--              <div style="display:flex;width: 300px;">-->
              <!--                <span class="tip-word">登录视为您已阅读并同意开元云科技 服务条款 和 隐私政策</span>-->
              <!--              </div>-->
              <div style="display:flex;">
                <el-button @keyup.enter.native="handleLogin('loginForm')" :loading="loading" type="primary"
                           style="width: 300px;margin-top: 30px;margin-bottom: 30px" class="login-btn"
                           @click.native.prevent="handleLogin('loginForm')">立即登录
                </el-button>
              </div>
              <div style="display:flex;margin-bottom: 30px">
                <el-button style="width: 300px;margin-top: 10px;color: #1890ff" class="login-btn"
                           @click.native.prevent="wxBtn">微信登录
                </el-button>
              </div>
              <div class="two-btn">
                <span type="text" class="forget-password" @click="resetPassword()">忘记密码?
                </span>
                <span :loading="loading" type="primary" class="go-register"
                      style="width: 127px; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleRegister"
                      @click="handleRegister">没有账号？<span class="go-register-btn">去注册</span>
                </span>
              </div>
            </el-form>
            <!-- </el-tab-pane> -->
            <!--            <el-tab-pane label="手机号登录" name="second">配置管理</el-tab-pane>-->
          </el-tabs>

          <el-dialog title="重置密码" :visible.sync="dialogVisible" width="25%" class="myDialog">
            <el-form ref="form" :model="form" label-width="100px" :rules="forms">
              <el-form-item label="用户名:" prop="username" class="rePassword" style="background-color: white">
                <el-input v-model="form.username" class="name-input" placeholder="请先输入用户名/手机号"
                          style="background-color: white;border:1px solid #d9d9d9;border-radius: 3px;"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password" style="background-color: white">
                <el-input v-model="form.password" style="border:1px solid #d9d9d9;border-radius: 3px"
                          placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item label="验证码:" prop="vcode" style="background-color: white">
                <div style="display: flex; flex-direction: row">
                  <el-input style="border:1px solid #d9d9d9;border-radius: 3px" ref="vcode" v-model="form.vcode"
                            placeholder="请输入验证码" name="vcode" type="text"/>
                  <el-button type="primary" size="mini" style="height: 40px; margin-left: 10px" :disabled="isDisabled1"
                             @click="getCode1">{{ SendCode_text1 }}
                  </el-button>
                </div>
              </el-form-item>
              <div class="dialog-footer">
                <el-button size="small" @click="cancelReset">取 消</el-button>
                <el-button type="primary" size="small" @click="handleSubmit">确 定</el-button>
              </div>
            </el-form>
          </el-dialog>
          <!--          <el-dialog-->
          <!--            title="提示"-->
          <!--            :visible.sync="showInviteCode"-->
          <!--            width="30%">-->
          <!--            <span slot="footer" class="dialog-footer">-->
          <!--             <promotionalInvitationCode ref="codeRef"></promotionalInvitationCode>-->
          <!--  </span>-->
          <!--            <span slot="footer" class="dialog-footer">-->
          <!--    <el-button @click="showInviteCode = false">取 消</el-button>-->
          <!--    <el-button type="primary" @click="useCodeConfirm">确 定</el-button>-->
          <!--  </span>-->
          <!--          </el-dialog>-->
        </div>
      </div>

    </div>

    <div class="message-footer">
      <div class="item">
        <span class="goPAge"
              @click="goPloic">京公网安备：11010502054007号</span>
        <span class="goPAge" @click="goIPC">京ICP备：2022001945号-1</span>
        <span>增值电信业务经营许可证：京B2 -20232313</span>
        <span>邮箱：Open-computing@kaiyuancloud.cn</span>
      </div>
      <div class="item">
        <!--        <span>地址：北京市朝阳区农展馆南路13号瑞辰国际</span>-->
        <span>电话：4006150805      010-65917875</span>

        <!--        <span> 版权所有 © 2023开元云（北京）科技有限公司</span>-->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCodeAPI,
  getLogoAPI,
  getPasswordCodeAPI,
  logintypeAPI,
  loginUserAPI,
  reqGetAppidAPI,
  reqGetCodeAPI,
  retrieveCodeAPI,
} from "@/api/login";
import store from "@/store";
import {JSEncrypt} from "jsencrypt";
import BeforeLogin from "@/views/beforeLogin/index.vue";
import promotionalInvitationCode from "@/views/customer/promotionalInvitationCode"
import {mapState} from "vuex";
import axios from "axios";
import './js/wxLogin.js'
import {Message} from "element-ui";
import router, {resetRouter} from "@/router";
import {reqNewHomeFestival} from "@/api/newHome";

export default {
  name: "indexNew",
  components: {BeforeLogin, promotionalInvitationCode},
  data() {
    return {
      wechat_openid: '',
      wxState: ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)),
      getCodeTimer: null,
      showWxCode: false,
      isShow: false,
      logoUrlOut: '',
      loginType: '0',//0 账号密码 1 手机号登录
      showInviteCode: false,//使用邀请码
      adShow: false,
      logoImg: require("../../assets/kyy/LOGO.png"),
      logoText: "开元云",
      photosUrl: null,
      url: window.location.href,
      SendCode_text: "获取验证码",
      SendCode_text1: "获取验证码",
      isDisabled: false,
      isDisabled1: false,
      dialogVisible: false,
      loading: false,
      loginForm: {
        username: "",
        password: "",
        vcode: "",
        codeid: ""
      },
      activeName: 'first',
      rules: {
        username: [{required: true, message: "请输入用户名/手机号", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        code: [{required: true, message: "请输入验证码", trigger: "blur"}],
      },
      capsTooltip: false,
      passwordType: "password",
      form: {
        username: "",
        vcode: "",
        password: "",
        id: "",
        codeid: "",
      },
      forms: {
        username: [{required: true, message: "请输入姓名", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        vcode: [{required: true, message: "请输入验证码", trigger: "blur"}],
      },
      isLogo: false,
      isShowSaleProduct: false,
      vedioObj: {}
    }
  },
  created() {
    this.init()
    // this.testFn()
    store.commit('tagsView/resetBreadcrumbState');
    if (window.location.href.includes("kaiyuancloud") && window.location.href.includes("domain_name") || !window.location.href.includes("kaiyuancloud")) {
      this.$store.commit('setLogoutUrl', window.location.href)
    } else {
      this.$store.commit('setLogoutUrl', "")
    }
    let url = window.location.href
    // https://www.kaiyuancloud.cn/?domain_name=Yr8wFg7AbfxM7wlv_4ORN#/login
    // 'https://www.kaiyuancloud.cn/?domain_name=Yr8wFg7AbfxM7wlv_4ORN#/login'.split('domain_name=')[1].split('#/login')[0]
    // console.log("本页面的是", url)
    let params = {
      domain_name: url.includes('domain_name') ? url.split('domain_name=')[1].split('#/login')[0] : ''
    }

    this.$store.dispatch('getSaleLoginMessage', params).then(res => {
      // console.log("执行了", params)
      this.isShowSaleProduct = res
    })
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.getCodeTimer)
    window.removeEventListener('keydown', this.handleEnter);
  },
  mounted() {
    window.addEventListener('keydown', this.handleEnter);
    window.addEventListener('message', (event) => {
      // this.$message.success("event.data.type",event)
      if (event.data.type === 'wx_login_success') {
        const {code} = event.data
        console.log(event.data)
        // 处理微信返回的code
        this.$message.success("code", code)
      }
    })

    // this.audioElement = new Audio('https://www.kaiyuancloud.cn/dev/idfile?path=/batch_upload/phone-ring.mp3');
    // // 设置音频循环播放
    // this.audioElement.loop = true;
// if (window.location.href.includes("ncmatch")) {
//   this.$store.commit('login/setLogoutUrl',window.location.href)
// }
  },

  methods: {
    goBaidu(listUrl, url) {
      this.$store.commit('setRedirectUrl', url)
      localStorage.setItem('redirectUrl', url)
      localStorage.setItem('userRescourseUrl', listUrl)
      // console.log("边度item", )
      this.$router.push({
        name: 'baiduProductShow',
        params: {
          listUrl: listUrl,
          url: url
        }
      })
      // this.$router.push({path: '/product/baiduProduct',})

    },
    goAliyun() {
      reqNewHomeFestival().then(res => {
        if (res.status) {
          window.open(res.data)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },

    handleEnter(e) {
      if (e.key === 'Enter') {
        this.handleLogin('loginForm');
      }
    },
    open2(msg) {
      this.$notify.info({
        title: '提示',
        message: msg,
        duration: 0
      });
    },
    pollWxCode() {

      this.getCodeTimer = setInterval(async () => {
        try {
          const res = await reqGetCodeAPI({state: this.wxState});
          if (!res.status) return;

          clearInterval(this.getCodeTimer); // 清理定时器
          this.showWxCode = true;

          const response = await loginUserAPI({wechatCode: res.code});
          console.log("response:", response);

          if (response.status) {
            this.$message.success("登录成功");

            // 处理角色信息
            if (response.roles === "None") {
              this.$message.error("请联系管理员给您配置角色哦~");
              return;
            }

            const {data, admin, user, userId, org_type} = response;

            // 存储用户信息
            localStorage.setItem("user_info", JSON.stringify(user));
            sessionStorage.setItem("userId", userId);
            sessionStorage.setItem("user", user);
            sessionStorage.setItem("orgid", user.orgid);
            sessionStorage.setItem("org_type", org_type);
            sessionStorage.setItem("username", user.username); // 存储用户名

            // 处理角色
            if (admin !== 1) {
              sessionStorage.setItem("juese", response.roles[0]);
              sessionStorage.setItem("jueseNew", response.roles);
              if (response.roles.includes("销售")) {
                this.initWebSocket(userId);
              }
            } else {
              sessionStorage.setItem("juese", "admin");
              sessionStorage.setItem("jueseNew", "admin");
            }

            // 生成路由并跳转
            const accessRoutes = await this.$store.dispatch("permission/generateRoutes", {
              user: user.username,
              auths: data,
              admin: admin || "",
            });
            resetRouter();
            console.log("生成的路径是", accessRoutes);
            router.addRoutes(accessRoutes);

            // 根据角色跳转到不同页面
            if (org_type === "2" || org_type === "3") {
              // this.$router.push({ name: "productHome" });
              this.$router.push("/product/productHome");
            } else if (response.roles.includes("运营")) {
              this.$router.push("/operation/supplierManagement");
            } else if (response.roles.includes("销售")) {
              // this.$router.push('/sales/distributorManagement');
            } else if (response.roles.includes("运维")) {
              this.$router.push("/operationAndMaintenance/workOrderProcessing");
            } else {
              this.$router.push({path: "/"});
            }
          } else if (response.action === "redirect") {
            this.open2(response.msg)
            // 处理重定向逻辑
            localStorage.setItem("wechat_openid", response.wechat_openid);
            this.wechat_openid = response.wechat_openid;

            const domWx = document.getElementById("login_containera");
            const iframe = domWx?.querySelector("iframe");
            if (iframe) iframe.remove(); // 移除 iframe 元素

            this.loginType = "1";
            this.showWxCode = false;
          }
        } catch (error) {
          console.error("登录失败:", error);
          // this.$message.error(response.msg);
        } finally {
          this.loading = false;
        }
      }, 800);

    },


    initWxCode(appid) {
      let origin_uri = window.location.href.includes("dev") ? "https://www.kaiyuancloud.cn/dev" : "https://www.kaiyuancloud.cn"
      let obj = new WxLogin({
        self_redirect: true,       // 登录后是否跳转到当前页面
        id: "login_containera",     // 绑定的div容器id
        appid: appid,      // 填入你的微信公众号或小程序的APPID
        scope: "snsapi_login",     // 微信登录的权限范围，snsapi_login表示微信扫码登录
        redirect_uri: encodeURIComponent(origin_uri + "/kpi/update_code_state.dspy"),  // 微信授权回调的URL，用户授权后重定向的地址
        state: this.wxState,       // 防止CSRF攻击的随机字符串，用于保证请求的一致性
        style: "border:none;",     // 登录框样式，可以调整
        href: "https://www.kaiyuancloud.cn/"          // 点击登录按钮后的跳转链接（通常是授权登录后的跳转）
      });
    },
    wxBtn() {
      reqGetAppidAPI().then(res => {
        if (res.status) {
          this.showWxCode = true
          this.pollWxCode()
          this.$nextTick(() => {
            this.initWxCode(res.appid)
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })

    },
    changeLoginType(loginType) {
      this.loginType = loginType
    },
    testFn() {
      // let params = {
      //   url_link: this.GetQueryString(window.location.href)
      //   // url_link: 'https://www.baidu.com'
      // }
      // getLogoAPI(params).then((res) => {
      //   console.log("测试的值时", res)
      // })
      axios.get('https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy', {
        params: {
          url_link: 'https://www.kaiyuancloud.cn/dev/?domain_name=TqXo2VbiB47nzUrB_ZLxq'  // 这里设置查询参数 a: 1
        }
      })
    },
    goPloic() {


      window.open('https://beian.mps.gov.cn/#/query/webSearch')
    },
    goIPC() {

      window.open('https://beian.miit.gov.cn/')
    },
    playAudio() {
      console.log("开始按钮点击了")
      this.audioElement.play();
    },
    pauseAudio() {
      this.audioElement.pause();
      this.audioElement.currentTime = 0; // 将音频的播放位置设置为0，以便下次播放从头开始
    },
    callIn() {
      this.pauseAudio()

      console.log("接通电话被点击了")
      this.$store.commit('setShowVideo', false)
      this.$router.push({
        path: '/sales/chat',
        query: {
          chatIsOn: this.vedioObj.chatIsOn,
          vedioIsOn: this.vedioObj.vedioIsOn,
          audioIsOn: this.vedioObj.audioIsOn,
        }
      })
    },
    callOff() {
      this.pauseAudio()
      console.log("挂断电话被点击了")
      this.$store.commit('setShowVideo', false)
    },
    initWebSocket(userId) {
      // let webSocketUrl = 'wss://www.kaiyuancloud.cn/dev/wss/pub/rtcc.ws'
      let webSocketUrl = 'wss://www.kaiyuancloud.cn/pub/rtcc.ws'
      console.log(webSocketUrl)
      this.socket = new WebSocket(webSocketUrl)
      // this.$store.commit('setSocket', new WebSocket('wss://120.92.102.27:27017/wss'))
      this.socket.onopen = (event) => {
        console.log('WebSocket连接已打开');
        this.socket.send(JSON.stringify({
          'type': 'send',
          'from': userId,
          'uuid': '',
          'content': {}
        }));
      };
      let p = {}

      this.socket.onmessage = (event) => {
        // console.log("登录的evebt", event)
        this.userId = sessionStorage.getItem('userId')
        //先判断当前是不是销售角色
        if (sessionStorage.getItem('juese') === '销售') {
          let data = JSON.parse(JSON.parse(event.data).data)
          // console.log("报错的位置",typeof  data.content)
          let content = JSON.stringify(data.content) !== '{}' ? JSON.parse(data.content) : {}
          if (event.data !== undefined && content.value === 'customer') {
            // console.log("传来的uuid是", JSON.parse(JSON.parse(event.data).content).uuid)
            if (data.uuid === this.userId) {
              // Object.assign(this.vedioObj, JSON.parse(event.data))
              this.$store.commit('setShowVideo', true)
              // this.playAudio()
              this.audioElement.playAudio()
              console.log("走了if")
            }
          } else {
            console.log("走了里的else")
          }
        } else {
          console.log("websocket走了else")
        }

      };

      this.socket.onclose = (event) => {
        console.log('WebSocket连接已关闭');
      };
      // this.$store.commit('setSocket')
    },
    passwordEncryption(passwordUser) {
      let publicKey = "-----BEGIN PUBLIC KEY-----\n" +
        "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApJ3ThUWT3CgvH0O8rrT6\n" +
        "qycpqX0NTq4Q3CxBrvNxo9//qX2bKvhomoLNd+vdti8xNOK6/3zuTJIVt0RoNKwE\n" +
        "0HWMR8H0jgp7ING54DtT5B8bhmUpbs/hownGzIBGOedhqeOPiv0Q5oSi9OIEE+PK\n" +
        "2L8KdgFF2Z6Q1DQdv5Y1qvD/t2mJVjR+NPTwcwBIT8UJ0Cfu8lqHjjJbNF//smTj\n" +
        "Q8v2pnqp19jItuHeD4G4u7a8fWC3/IGEv4+uc5rq5qhwdzRxHUveNmoE+nyh0T8R\n" +
        "C8Y8/XLkEiD0nMvZZjBn7Bof6f1st0aqJX8R1VGvzdTJ8eTvJuyMNsR4wLoF5Pvx\n" +
        "hQIDAQAB\n" +
        "-----END PUBLIC KEY-----" // 从后台获取公钥，这个保存一下，在这里用。
      // console.log('后台公钥---------> ', publicKey)
      let encryptor = new JSEncrypt()  // 新建JSEncrypt对象
      encryptor.setPublicKey(publicKey)  // 设置公钥
      let passwordEncryp = encryptor.encrypt(passwordUser)  // 对密码进行加密
      return passwordEncryp
    },
    //使用邀请码
    useCode() {
      this.showInviteCode = true
    },
    //邀请码确认按钮
    useCodeConfirm() {
      this.$refs.codeRef.onsubmit('form')

      if (this.isSuccessCode) {
        this.showInviteCode = false
      }
      // this.showInviteCode = false
    },
    goHomePage() {
      // this.$router.push('/homePage')
      // if (this.logoUrlOut) {
      //   window.location.href = this.logoUrlOut
      // } else {
      //   window.location.href = 'https://www.opencomputing.cn/';
      // }
      this.$router.push('/homePage/index')
    },
    init() {
      // let params = {
      //   url_link: this.GetQueryString(window.location.href)
      // }
      let remoteUrl = ''
      if (window.location.href.includes("dev")) {
        remoteUrl = 'https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy'
      } else if (window.location.href.includes("localhost")) {
        remoteUrl = 'http://localhost:9527/'
      } else {
        remoteUrl = 'https://www.kaiyuancloud.cn/reseller/get_ipc_logo.dspy'
      }
      // axios.get(remoteUrl, {
      //   params: {
      //     url_link: params.url_link // 这里设置查询参数 a: 1
      //   }
      // }).then(res => {
      //   console.log(res.status == true)
      //   console.log(res.data)
      //   console.log(res.data.length > 0)
      //   if (res.status == true && res.data && res.data.length > 0) {
      //     this.photosUrl = res.data[0];
      //     if (this.photosUrl.orgname != '业主机构') {
      //       this.isLogo = true
      //       this.logoImg = this.photosUrl.logo;
      //       this.logoText = this.photosUrl.orgname;
      //     }
      //   } else {
      //     console.log("sdsddas@@@")
      //     this.$message({
      //       // message: res.msg,
      //       message: "获取ipc失败~",
      //       type: "error",
      //     });
      //   }
      // })

      // getLogoAPI(params).then((res) => {

      let params = {
        url_link: this.GetQueryString(this.url)
        // url_link: 'https://www.baidu.com'
      }
      // axios.get(remoteUrl, {
      //   params: {
      //     url_link: params.url_link
      //   }
      // })
      getLogoAPI(params).then((res) => {
        // if (res.data.status == true && res.data.data && res.data.data.length) {
        //   this.photosUrl = res.data.data[0];

        if (res.status == true && res.data && res.data.length) {
          this.$store.commit('setLogoInfo', res.data[0]);
          this.isShow = true
          if (res.data[0].orgname == '中关村数智人工智能产业联盟') {
            this.logoUrlOut = 'https://www.ncmatch.cn'
          }

          this.photosUrl = res.data[0];
          if (this.photosUrl.orgname != '业主机构') {
            this.isLogo = true
            this.logoImg = this.photosUrl.logo;

            this.$store.commit('setLogo', this.photosUrl.logo)
            this.logoText = this.photosUrl.orgname;
          } else {
            this.$store.commit('setLogo', "")
          }
        } else {
          console.log("sdsddas@@@")
          this.$message({
            // message: res.msg,
            message: "获取ipc失败~",
            type: "error",
          });
        }
      });
    },
    GetQueryString(name) {
      if (name.indexOf("#") != -1) {
        const params = name.split("#")[0];
        return params;
      }
    },
    getCode() { //获取验证码
      getCodeAPI({username: this.loginForm.username}).then((res) => {
        console.log(res);
        if (res.status) {
          this.loginForm.codeid = res.codeid;
          let that = this;
          clearInterval(that.timer)
          this.time_count = 59
          this.SendCode_text = "重新发送" + this.time_count + "s";
          this.timer = setInterval(() => {
            if (this.time_count > 0) {
              this.isDisabled = true;
              this.time_count--;
              this.SendCode_text = "重新发送" + this.time_count + "s";
            } else {
              this.SendCode_text = "获取验证码";
              clearInterval(this.timer);
              this.timer = null;
              this.isDisabled = false;
              this.time_count = 60;
            }
          }, 1000);

          this.$message({
            message: "验证码获取成功",
            type: "success",
          });
        } else {
          if (res.action === 'redirect') {
            this.$message({
              message: res.msg,
              type: "error",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }

        }
      });
    },
    getCode1() {
      retrieveCodeAPI({username: this.form.username}).then((res) => {
        if (res.status == true) {
          this.form.id = res.userid;
          this.form.codeid = res.codeid;
          let that = this;
          if (!that.timer1) {
            that.timer1 = setInterval(() => {
              if (that.time_count1 > 0) {
                this.isDisabled1 = true;
                that.time_count1--;
                that.SendCode_text1 = "重新发送" + that.time_count1 + "s";
              } else {
                that.SendCode_text1 = "获取验证码";
                clearInterval(that.timer1);
                that.timer1 = null;
                this.isDisabled1 = false;
                that.time_count1 = 60;
              }
            }, 1000);
          }
          this.$message({
            message: "验证码已发送，请注意查收。",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    checkCapslock(e) {
      const {key} = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    handleLogin(formName) {  //登录

      this.$refs[formName].validate((valid) => {
        if (valid) {
          let apiOneIphone = {
            username: this.loginForm.username,
            domain_name: this.photosUrl?.domain_name ? this.photosUrl.domain_name : '',
            vcode: this.loginForm.vcode,
            codeid: this.loginForm.codeid,
            wechat_openid: this.wechat_openid
          }
          let apiOne = {
            username: this.loginForm.username,
            domain_name: this.photosUrl?.domain_name ? this.photosUrl.domain_name : '',
            password: this.passwordEncryption(this.loginForm.password),
            wechat_openid: this.wechat_openid
            // password: this.loginForm.password,
          }
          let apiTwoIphone = {
            username: this.loginForm.username,
            vcode: this.loginForm.vcode,
            codeid: this.loginForm.codeid,
            wechat_openid: this.wechat_openid
          }
          let apiTwo = {
            username: this.loginForm.username,
            password: this.passwordEncryption(this.loginForm.password),
            // password: this.loginForm.password,
          }

          logintypeAPI(this.loginType === '0' ? apiOne : apiOneIphone).then(res => {
            // logintypeAPI({ username: this.loginForm.username, password: this.loginForm.password }).then(res => {
            if (res.status == true) {
              // debugger

              this.loading = true;
              this.$store
                .dispatch("user/login", this.loginType === '0' ? apiTwo : apiTwoIphone)
                .then((res) => {
                  this.loading = false;
                  // try {
                  //   if (res.roles.includes('客户')) {
                  //     this.$store.dispatch('user/getCustmoersMoney')
                  //   }
                  // } catch (e) {
                  //   console.log("登录保存信息报错", e)
                  // }

                  localStorage.setItem("user_info", JSON.stringify(res.user));
                  if (res.admin != 1) {
                    sessionStorage.setItem("juese", res.roles[0]);
                    sessionStorage.setItem("jueseNew", res.roles);
                    if (res.roles.includes('销售')) {
                      this.initWebSocket(res.userId)
                    }

                  } else {
                    sessionStorage.setItem("juese", 'admin');
                    sessionStorage.setItem("jueseNew", 'admin');
                  }

                  if (res.status == true) {
                    this.$store.commit('setLoginState', true)
                    this.loading = false;
                    sessionStorage.setItem("userId", res.userId);
                    sessionStorage.setItem("orgid", res.user.orgid);
                    sessionStorage.setItem("org_type", res.org_type);
                    sessionStorage.setItem("username", res['user'].username);//就这行代码,注释就能登录上了,我想存的就是这个
                    if (res.admin === 1) {
                      console.log("走了admin", res)
                      this.$router.push({path: "/"});
                    } else if (
                      sessionStorage.getItem("org_type") == "2" ||
                      sessionStorage.getItem("org_type") == "3"
                    ) {
                      if (this.$route.query.fromPath === 'homePage') {
                        // this.$router.push({path: "/homePage/index"});
                        if (this.$route.query.type === 'bd') {
                          // this.$router.push('/product/baiduProduct')
                          this.goBaidu(this.$route.query.listUrl, this.$route.query.url)

                        } else if (this.$route.query.type === 'ali') {
                          this.$router.push("/homePage/index");
                          this.goAliyun()
                        } else if (this.$route.query.type === 'rqy') {
                          this.$router.push("/product/productHome/k8s/createK8s");
                        } else {
                          this.$router.push("/homePage/index");
                        }

                      } else {
                        this.$router.push({name: "productHome"});
                      }

                    } else if (res.roles.includes('运营')) {
                      this.$router.push('/operation/supplierManagement');
                    } else if (res.roles.includes('销售')) {
                      this.$router.push('/sales/distributorManagement');
                    } else if (res.roles.includes('运维')) {
                      this.$router.push('/operationAndMaintenance/workOrderProcessing');
                    } else {
                      this.$router.push({path: "/"});
                    }
                    this.$message({
                      message: "登录成功~",
                      type: "success",
                    });
                  } else {
                    console.log("zoule874")
                    this.loading = false
                    this.$message({
                      message: res.msg,
                      type: "error",
                    });
                  }
                })
                .catch((res) => {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                  this.loading = false;
                });
            } else {
              this.$message({
                message: "登录失败~",
                type: "error",
              });
            }
          })

        } else {
          this.$message({
            message: "请查看登录信息格式",
            type: "error",
          });

          this.$refs.loginForm.resetFields();
          return false;
        }
      });
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    resetPassword() {
      this.dialogVisible = true;
      this.$refs.loginForm.resetFields();
    },
    handleRegister() {
      console.log("注册按钮被点击了")
      //注册
      this.$router.push({name: "registrationPage"});
    },
    cancelReset() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    handleSubmit() {
      let parmas = {
        id: this.form.id,
        password: this.form.password,
        codeid: this.form.codeid,
        vcode: this.form.vcode,
      };
      getPasswordCodeAPI(parmas).then((res) => {
        // console.log(res);
        if (res.status == true) {
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
          this.isDisabled1 = false;
          this.dialogVisible = false;
          that.SendCode_text1 = "获取验证码";
          clearInterval(that.timer1);
          that.timer1 = null;
          that.time_count1 = 60;
          this.$refs.form.resetFields();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
  computed: {
    ...mapState({
      isSuccessCode: state => state.login.isSuccessCode,
      audioElement: state => state.sales.audioElement,

    })
  }
}
</script>

<style scoped lang="scss">
$cursor: black;
$light_gray: #eee;
$dark_gray: #889aa4;
.main-box {
  position: relative;
  width: 100vw;
  height: 100vh;
  //border:1px solid red;
  img {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-input__inner {
  padding: 0 !important;
  border: 1px solid red;
}

.login-form {
  padding-left: 52px;
  padding-right: 49px;
  position: absolute;
  top: 10%;
  right: 15%;
  width: 481px;
  height: 521px;
  mix-blend-mode: normal;
  background-color: white;
  border-radius: 24px;
}

.user-input {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.login-text {
  margin-top: 20px;
  mix-blend-mode: normal;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-size: 24px;
  letter-spacing: 1.1px;
}

.el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background-color: #dfe4ed;
  z-index: -999;
}

.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 21px;
  margin-top: 8px;
  margin-left: 5px;
  margin-right: 5px;
}

.userInput .el-input__inner {
  background-color: white;
}

.login-form-style {
  background-color: transparent;
  //padding-top: 70px;
  .el-input {
    input {
      //background: transparent;

      //backdrop-filter: blur(15px); /* 应用模糊效果 */
      border: 0px;
      border: 0px;
      //-webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      caret-color: $cursor;

      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #fff inset !important;

        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}

.el-input ::v-deep .el-input__inner {
  border: none;
  background-color: white;

  &:-webkit-autofill {
    background-color: white;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: $cursor !important;
  }
}

.tip-word {
  mix-blend-mode: normal;
  color: rgba(65, 70, 79, 1);
  font-family: PingFang SC;
  font-size: 12px;
  margin-top: 10px;
  line-height: 17px;
  text-indent: 0.5em;
}

.two-btn {
  margin-top: 20px;
  width: 300px;
  display: flex;
  justify-content: space-between;
}

.forget-password {
  mix-blend-mode: normal;
  color: rgba(65, 70, 79, 1);
  font-family: PingFang SC;
  font-size: 14px;
  height: 100%;
  padding-left: 7px;
}

.go-register {
  padding-right: 7px;
  mix-blend-mode: normal;
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-size: 14px;
  letter-spacing: 0.7px;
}

.go-register:hover {
  cursor: default;
}

.forget-password:hover {
  color: blue;
  cursor: pointer;
}

.login-btn {
  mix-blend-mode: normal;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-size: 16px;
}

.main-content-box {
  //padding-top: 5px;
  margin-top: -10px;
}

.login-container {
  margin-top: 10px;
}

.login-container ::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}

.go-register-btn {
  display: inline-block;
  color: blue;
  border-bottom: 2px solid blue !important;
  cursor: pointer;
}

#uesr-name-id:-webkit-autofill {
  background-color: white;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: $cursor !important;
}

.rePassword {
  background-color: white;
  //border: 1px solid red;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 15px;

}

.logo-top {
  width: 200px !important;
  height: 70px !important;
  position: absolute;
  top: 2%;
  left: 2%;
}

.logo-top1 {
  width: 220px !important;
  height: 80px !important;
  position: absolute;
  top: 3%;
  left: 3%;
}

::v-deep .el-tabs__nav-scroll {
  height: 0px;
}

@media screen and(max-width: 760px) {
  .password-mobile {
    //border: 5px solid red !important;
    //width: 95% !important;
  }
  .login-form {
    width: 90% !important;
    //border: 5px solid red !important;
    position: absolute;
    top: 13%;
    right: 5%;
  }
  .go-register {
    padding-right: 10px;
    //border:1px solid red;
    width: 174px;
  }
}

.ad-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
  width: 500px;
  height: 500px;
  border: 1px solid red;
  z-index: 999999999999;
}

.showAdImg {
  width: 100%;
  height: 100%;
  background-color: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("./images/ad.jpg");
  background-size: cover;
}


//::v-deep input:-webkit-autofill {
//  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* 添加透明背景色 */
//  transition: background-color 5000s ease-in-out 0s !important; /* 添加过渡效果，确保样式生效 */
//  font-size: 28px !important;
//}
//
//.userInput {
//  ::v-deep .el-input__inner {
//    font-size: 28px !important;
//  }
//}
.message-footer {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 10;
  color: #9c9c9c;

  item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }

  span {
    margin: 0 10px;
    font-size: 12px;
  }
}

.goPAge {
  transition: all .3s ease-in-out;

  &:hover {
    cursor: pointer;
    color: blue;
  }
}

.login-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #41464f;
  font-size: 16px;
  margin: 25px 0 10px;

  span {
    position: relative;
    padding-bottom: 3px;
    display: inline-block;
    margin-right: 20px;

    &:hover {
      cursor: pointer;
      color: rgb(22, 100, 255);

    }

    &:before {
      transition: all .2s ease-in-out;
      content: "";
      position: absolute;
      bottom: 0;
      width: 0;
      height: 2px;
      background: rgb(22, 100, 255);
    }
  }
}

.activeType {
  color: rgb(22, 100, 255);

  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100% !important;
    height: 2px;
    background: rgb(22, 100, 255);
    transition: all .2s ease-in-out;
  }
}

.getCodeStyleNew {
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  color: #41464f;
  border: 1px solid #dde2e9;
  background: #f6f8fa;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  border-radius: 4px;
  transition: all .1s linear;

  &:hover {
    transition: all .1s linear;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
    color: #41464f;
    border-color: rgb(66, 129, 255);
    background: #fafbfc;
  }
}
</style>
