<template>
  <view class="scan-login-container">
    <navBar title="扫码登录" />
    
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 连接图标区域 -->
      <view class="connection-area">
        <up-image :src="loginImg" width="420rpx" height="187rpx"></up-image>
      </view>
      
      <!-- 提示文字 -->
      <view class="tips-text">
        <text class="main-tip">确认电脑登录</text>
        <text class="sub-tip">为确保账号安全,请确认是您本人操作</text>
      </view>
      
      <!-- 按钮区域 -->
      <view class="button-area">
        <button class="confirm-btn" @click="toggleLogin(true)">确认登录</button>
        <button class="cancel-btn" @click="toggleLogin(false)">取消登录</button>
      </view>
    </view>
  </view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
    import navBar from '@/components/navBar/navBar.vue';
    import api from '@/api/api.js';
    import  loginImg from '@/static/pcquer.png';
    import navTo from '@/utils/navTo';
    import { encryptAesEcb } from '@/utils/aesEcb.js';
    import OTHER_HOST from '@/utils/otherHost.js';

    // 响应式数据
    const loading = ref(false);
    const code = ref('');
    // 页面加载
    onLoad((options) => {
      console.log('扫码登录页面加载完成', options);
      if (options.code) {
         code.value = options.code;
       }
    });
    const toggleLogin = (status) => {
      let userInfo=uni.getStorageSync('userInfo');
      let str='';
      if(status){
        str='watchliveTo}'+code.value+'}'+userInfo.uuid+','+userInfo.realName+','+userInfo.photo;
      }else{
        str='watchliveCancel}'+code.value+'}'+userInfo.uuid+','+userInfo.realName+','+userInfo.photo;
      }
      let message=encryptAesEcb(str,'deoep09_klodLdAo');
      uni.request({
    url: OTHER_HOST+'/watchlive/sendWebsocketMsg', 
	   method: 'POST',
    data: {
		message: message,
    },
    header: {
     'Content-Type':'application/x-www-form-urlencoded'//自定义请求头信息
    },
    success: (res) => {
      console.log(res);
  	if(res.data.code==1){
  		 uni.navigateBack();
      if(status){
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          });
        }
  	}else{
		uni.showToast({
			title: res.data.message,
			icon: 'none'
		});
	}
    },
  });
    }
    // 确认登录
    const confirmLogin = async () => {
      if (loading.value) return;
      
      try {
        loading.value = true;
        
        // 调用确认登录API
        const result = await api.confirmScanLogin({
          qrCode: loginData.qrCode,
          sessionId: loginData.sessionId
        });
        
        if (result.code === 200) {
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          
          // 登录成功后跳转
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }, 1500);
        } else {
          uni.showToast({
            title: result.message || '登录失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('确认登录失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      } finally {
        loading.value = false;
      }
    };
    
    // 取消登录
    const cancelLogin = () => {
      uni.showModal({
        title: '提示',
        content: '确定要取消登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack({
              fail() {
                uni.switchTab({
                  url: '/pages/index/index'
                });
              }
            });
          }
        }
      });
    };
</script>

<style scoped>
.scan-login-container {
  min-height: 100vh;
  background-color: #ffffff;
}

.main-content {
  padding:220rpx 60rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 连接图标区域 */
.connection-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rpx;
  position: relative;
}

/* 手机图标 */
.phone-icon {
  width: 120rpx;
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  position: relative;
  border: 2rpx solid #e0e0e0;
}

.phone-screen {
  width: 100rpx;
  height: 140rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
}

.phone-home-button {
  width: 20rpx;
  height: 20rpx;
  background-color: #d0d0d0;
  border-radius: 50%;
  position: absolute;
  bottom: 20rpx;
  left: 50rpx;
}

/* 连接信号 */
.connection-signals {
  margin: 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signal-line {
  width: 4rpx;
  background-color: #d0d0d0;
  margin: 4rpx 0;
  border-radius: 2rpx;
}

.signal-1 {
  height: 20rpx;
}

.signal-2 {
  height: 30rpx;
}

.signal-3 {
  height: 40rpx;
}

/* PC图标 */
.pc-icon {
  width: 140rpx;
  height: 100rpx;
  position: relative;
}

.pc-screen {
  width: 140rpx;
  height: 80rpx;
  background-color: #f5f5f5;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pc-text {
  font-size: 24rpx;
  color: #666666;
  font-weight: bold;
}

.pc-stand {
  width: 60rpx;
  height: 20rpx;
  background-color: #e0e0e0;
  border-radius: 0 0 8rpx 8rpx;
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 提示文字 */
.tips-text {
  text-align: center;
  margin-bottom: 100rpx;
}

.main-tip {
  display: block;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.sub-tip {
  display: block;
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
}

/* 按钮区域 */
.button-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.confirm-btn {
  width: 100%;
  height: 88rpx;
  background-color: #8B2316;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.confirm-btn:active {
  background-color: #6B1A0F;
  transform: scale(0.98);
}

.cancel-btn {
  width: 100%;
  height: 88rpx;
  background-color: #ffffff;
  color: #666666;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.cancel-btn:active {
  background-color: #f5f5f5;
  transform: scale(0.98);
}

/* 加载状态 */
.confirm-btn[disabled] {
  background-color: #cccccc;
  color: #999999;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .main-content {
    padding: 60rpx 40rpx;
  }
  
  .connection-area {
    margin-bottom: 60rpx;
  }
  
  .tips-text {
    margin-bottom: 80rpx;
  }
}
</style>