<template>
  <view class="container">
    
    <view class="counter-warp">
      <view class="header-content">
        <image :src="avatarUrl" class="icon-box" v-if="avatarUrl"/>
        <view class="text-header">用户登录</view>
      </view>
      <view class="box">
        <view class="list-item">
          <label class="list-item-label">用户ID</label>
          <input
            class="input-box"
            type="text"
            v-model="userID"
            placeholder="请输入用户ID"
            placeholder-style="color:#BBBBBB;"
          />
        </view>
        <view class="login"
          ><button class="loginBtn" @click="loginHandler">登录</button></view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref,onMounted,getCurrentInstance  } from "vue";
// 2. 获取组件实例，通过 proxy 访问全局属性
const { proxy } = getCurrentInstance()
import * as GenerateTestUserSig from "../../debug/GenerateTestUserSig-es.js";
import { CallManager } from "../../TUICallKit/src/TUICallService/serve/callManager";
let userID = ref("4");
let avatarUrl = ref("");  // 声明为响应式变量
uni.CallManager = new CallManager();

onMounted(() => {
	uni.login({
	  provider: 'weixin',
	  success: function (loginRes) {
	    console.log('xx');
      console.log(loginRes.code);
      wxcode(loginRes.code)
	    // 获取用户信息 
	    uni.getUserInfo({
	      provider: 'weixin',
        withCredentials:true,
	      success: function (infoRes) {
			avatarUrl.value = infoRes.userInfo.avatarUrl;  // 使用 .value 赋值
			console.log('头像URL:', avatarUrl.value);
	        console.log(infoRes.userInfo);
	      }
	    });
	  }
	});

	console.log('---------进入onMounted')
})
const wxcode = async (code) => {

    try {
    // 通过 proxy 调用全局的 apiUrl
    const res = await proxy.apiUrl({
      url: '/api/login/mnpLogin',
      method: 'POST',
      data: {
        code: code
      },
    }, false) // 不显示加载中
    } catch (err) {
      uni.showToast({ title: '请求失败', icon: 'none' })
      console.error(err)
    }

}
const loginHandler = async () => {
	// 从后端获取签名
	const signatureData = await getSignatureFromServer(patientId.value);
	
	console.log('获取签名成功:', signatureData);
	
	const {userId } = signatureData;
	
  const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
    userID: userId.value,
  });
  console.warn('--- ', SDKAppID);

  getApp().globalData.userID = userId.value;
  getApp().globalData.userSig = userSig;
  getApp().globalData.SDKAppID = SDKAppID;

  await uni.CallManager.init({
    sdkAppID: SDKAppID, // 替换为用户自己的 sdkAppID
    userID: userId.value, // 替换为用户自己的 userID
    userSig: userSig, // 替换为用户自己的 userSig
    globalCallPagePath: "TUICallKit/src/Components/TUICallKit", // 替换为步骤一里注册的全局监听页面
  });
  uni.navigateTo({
    url: "./index",
  });
};
// 从后端获取签名
const getSignatureFromServer = async (patientId) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'https://api.zzzhengyangtang.cn/api/tcm/getPatientSignature',  // 后端接口地址  // 替换为你的后端地址
      method: 'GET',
      data: {
        patient_id: patientId
      },
      success: (res) => {
        if (res.data && res.data.code === 1) {
          resolve(res.data.data);
        } else {
          reject(new Error(res.data.msg || '获取签名失败'));
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f4f5f9;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.counter-warp {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.background-image {
  width: 100%;
}

.header-content {
  display: flex;
  width: 100vw;
  padding: 50px 20px 10px;
  box-sizing: border-box;
  top: 100rpx;
  background-color: #000;
  align-items: center;
}

.icon-box {
  width: 56px;
  height: 56px;
}

.text-header {
  height: 72rpx;
  font-size: 48rpx;
  line-height: 72rpx;
  color: #ffffff;
  margin: 40px auto;
}

.text-content {
  height: 36rpx;
  font-size: 24rpx;
  line-height: 36rpx;
  color: #ffffff;
}

.box {
  width: 80%;
  height: 50vh;
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding: 30px 20px;
}

.input-box {
  flex: 1;
  display: flex;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 0;
}

.login {
  display: flex;
  box-sizing: border-box;
  margin-top: 15px;
  width: 100%;
}

.login button {
  background: rgba(0, 110, 255, 1);
  border-radius: 30px;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  /* text-align: center; */
  font-weight: 500;
}

.loginBtn {
  margin-top: 64px;
  background-color: white;
  border-radius: 24px;
  border-radius: 24px;
  /* display: flex;
	  justify-content: center; */
  width: 100% !important;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
}

.list-item {
  display: flex;
  flex-direction: column;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #333333;
  border-bottom: 1px solid #eef0f3;
}

.input-container {
  width: 90%;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #333333;
  border-bottom: 1px solid #eef0f3;
}

/* 	.input-box {
		height: 20px;
		padding: 5px;
		width: 100%;
		border: 1px solid #999999;;	
	} */
.list-item .list-item-label {
  font-weight: 500;
  padding: 10px 0;
}

.guide-box {
  width: 100vw;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.single-box {
  flex: 1;
  border-radius: 10px;
  background-color: #ffffff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.icon {
  display: block;
  width: 180px;
  height: 144px;
}

.single-content {
  padding: 36px 30px 36px 20px;
  color: #333333;
}

.label {
  display: block;
  font-size: 18px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 500;
}

.desc {
  display: block;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 500;
}

.logo-box {
  position: absolute;
  width: 100vw;
  bottom: 36rpx;
  text-align: center;
}
</style>
