<template>
  <div id="wxcom-panel" class="ms-content" >
    <!-- 二维码将显示在这个容器中 -->
     <!-- <div @click='sendSmsCaptcha' style="cursor: pointer;">登录回调</div> -->
  </div>
 
</template>
  
  <script setup lang="ts">
import { wxComLogin } from "../api/login";
import {
  WWLoginPanelSizeType,
  createWWLoginPanel,
  WWLoginType,
  WWLoginRedirectType,
  WWLoginSuccessResp,
  WWLoginErrorResp,
} from "@wecom/jssdk";
import { onMounted } from "vue";

onMounted(() => {
  showWWLoginPanel();
});
// const sendSmsCaptcha = () => {
//   window.android.setToken('2f83d741039443489c1cc8529de576fc');
// };
const showWWLoginPanel = () => {
  const wxcomPanel = document.getElementById("wxcom-panel");
  if (wxcomPanel) {
    wxcomPanel.innerHTML = "";
  }
  createWWLoginPanel({
    el: "#wxcom-panel",
    params: {
      login_type: WWLoginType.corpApp,
      appid: import.meta.env.VITE_CORP_ID,
      agentid: import.meta.env.VITE_AGENT_ID,
      redirect_uri: import.meta.env.VITE_REDIRECT_URI_WX + '/#/quCode',
      state: "1",
      redirect_type: WWLoginRedirectType.callback,
      panel_size: WWLoginPanelSizeType.small,
    },
    onLoginSuccess: (res: WWLoginSuccessResp) => {
      wxComLogin(res.code).then((res) => {
        console.log(res?.data?.token,'tokentoken');
        try {
           window.android.setToken(res?.data?.token);
        } catch (error) {
          console.log(error);
        }
      });
    },
    onLoginFail: (res: WWLoginErrorResp) => {
      console.error("登录失败:", res.errMsg);
    },
  });
};
</script>
  
  <style scoped>
.login-wrap {
 
  position: relative;
  width: 100vw;
  height: 100vh;
  background: no-repeat;
  /* background-image: url(../assets/img/login-bg.jpg); */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.login-left {
  width: 50%;
  height: 100%;
  background: white;
  position: relative;
}
.login-left .logo {
  width: 400px;
  height: 32px;
  /* border: solid pink 1px; */
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
}
.login-left .logo span {
  font-family: MiSans;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #101828;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 5px;
  margin-bottom: 3px;
}
.centers {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 490px;
  /* border: solid 1px pink; */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.centers > div {
  width: 360px;
  /* border: solid 1px green; */
}
.bs {
  font-size: 14px;
  color: #344054;
}
.center-a {
  font-family: Inter;
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  text-align: left;
  color: #101828;
  margin: 1px 0px;
}
.center-b {
  font-family: MiSans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #475467;
  margin: 7px 0px;
}
.center-c {
  height: 40px;
  padding: 4px;
  gap: 4px;
  background: #f9fafb;
  /* background: pink; */
  margin: 25px 0px;
  border-radius: 10px;
  border: 1px;
  opacity: 0px;
  position: relative;
  z-index: 1;
}
.center-c1 {
  width: 104px;
  height: 24px;
  padding: 8px;
  gap: 8px;
  /* background: #FFFFFF; */
  border-radius: 6px;
  opacity: 0px;
  float: left;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  color: #667085;
  z-index: 9999;
}

.center-c2 {
  background: #ffffff;
  box-shadow: -2px 2px 4px 0px #1018280f;
  position: absolute;
  top: 4px;
  left: 1px;
  z-index: -1;
}
.center-d {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.login-right {
  width: 50%;
  height: 100%;
  background: no-repeat;
  background-image: url("../../public/img.jpg");
  background-size: 100% 100%;
  background-position-x: 160%;
  /* background: pink; */
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; 
  flex-direction: column;
  align-items: center;
  /* padding: 5px 30px; */
}

.input {
  height: 44px;
  padding: 10px, 14px;
  border-radius: 8px;
  border: solid 1px #d0d5dd;
}
.input::placeholder {
  color: #98a2b3;
  font-size: 14px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  border: 0px;
  margin-bottom: 10px;
  background: #d92d20;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>
  