<template>
  <view class="contai_warp">
    <view class="top_area_warp">
      <view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="top_nav_warp">
        <view>选择设备</view>
        <view class="back_button_warp" @click="goBack()">
          <image class="back_button_icon" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
        </view>
      </view>
    </view>

    <view class="content_warp">
      <view class="model_warp">
        <view class="content_title">设备名称</view>
        <view class="content_data_warp">
          <!-- 设备列表容器 -->
          <div v-for="(item, index) in deviceList" :key="index" class="content_data_item">
            <!-- 设备项左侧内容 -->
            <div class="data_item_left">
              <image class="data_item_icon" src="https://online.totustec.com/upload/selectDevice/data_item_icon.png">
              </image>
              <div class="data_item_txt">{{ item.brand }}</div>
            </div>

            <!-- 设备项右侧操作 -->
            <div class="data_item_right" @click="handleView(item.deviceCode, item.status)">查看</div>

            <!-- 设备使用状态图标（根据状态显示） -->
            <image v-if="item.isInUse" class="in_use_warp"
              src="https://online.totustec.com/upload/selectDevice/in_use_warp.png"></image>
          </div>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  BASE_API_URL,
  BASE_STOKECT_URL,
  BASE_IMG_URL
} from "@/config.js";
export default {
  data () {
    return {
      title: "Hello",
      statusBarHeight: 0,
      searchList: {
        page: 1,
        size: 10000,
      },
      deviceList: [],


      // WebSocket 相关状态
      socketTask: null, // uni-app 的 WebSocket 任务实例
      isSocketConnected: false, // 连接状态
      reconnectTimer: null, // 重连定时器
      reconnectInterval: 5000 // 重连间隔（5秒）
    };
  },
  onLoad () {
    const systemInfo = wx.getSystemInfoSync();
    const {
      statusBarHeight, // 状态栏高度（单位：px）
    } = systemInfo;

    this.statusBarHeight = statusBarHeight;


    this.connectWebSocket(); // 初始化 WebSocket 连接
  },
  onUnload () {
    this.closeWebSocket(); // 页面卸载时关闭连接
  },
  onShow () {
    this.getDeviceList(); // 每次显示页面时调用
  },
  methods: {
    // ---------------------- WebSocket 核心方法 ----------------------
    connectWebSocket () {
      const wsUrl = BASE_STOKECT_URL;

      // 初始化 WebSocket 连接（使用 uni-app 接口）
      this.socketTask = uni.connectSocket({
        url: wsUrl,
        success: () => {
          console.log('WebSocket 连接成功');
          this.isSocketConnected = true;
          this.listenSocketMessage(); // 监听消息
        },
        fail: (err) => {
          console.error('连接失败:', err);
          this.tryReconnect(); // 尝试重连
        }
      });
    },

    listenSocketMessage () {
      // 监听 WebSocket 消息
      uni.onSocketMessage((event) => {
        console.log('event', event);

        const message = JSON.parse(event.data);
        console.log('收到实时消息:', message);
        this.getDeviceList();
        // this.updateDeviceStatus(message); // 更新设备状态
      });
    },

    closeWebSocket () {
      // 关闭连接并清理资源
      if (this.socketTask) {
        uni.closeSocket();
        this.socketTask = null;
        this.isSocketConnected = false;
      }
      clearTimeout(this.reconnectTimer);
    },

    tryReconnect () {
      // 自动重连机制
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = setTimeout(() => {
        console.log('尝试重连 WebSocket...');
        this.connectWebSocket();
      }, this.reconnectInterval);
    },

    updateDeviceStatus (message) {
      console.log('实时消息');

    },
    goBack () {
      uni.navigateBack();
    },
    handleView (deviceCode, status) {
      if (status == -1) {
        uni.showToast({
          title: '设备处于断开状态，暂不支持查看',
          icon: 'none'
        });
        return
      }
      console.log("data", deviceCode);
      uni.navigateTo({
        url: `/pages/deviceManage/index?deviceCode=${deviceCode}`
      });
    },
    async getDeviceList () {
      try {
        // 从本地缓存获取用户信息
        const userInfo = uni.getStorageSync("userInfo") || {};
        const res = await uni.request({
          url: BASE_API_URL + "/api/front/user/myDevice",
          method: "GET",
          data: this.searchList,
          header: {
            "Content-Type": "application/x-www-form-urlencoded", // 关键配置
            "Authorization": userInfo.token || ""
          },
        });

        if (res.statusCode == 200) {
          this.deviceList = res.data.content
          console.log('this.deviceList', this.deviceList);

        }
      } catch (error) {
        console.log('请求接口失败', error);

      }
    },
  },
};
</script>
<!-- 临时样式 -->
<style scoped>
.in_use_warp {
  position: absolute;
  top: 0;
  left: 0;
  width: 69rpx;
  height: 67rpx;
}

.data_item_right {
  width: 114rpx;
  height: 48rpx;
  background: #f2c141;
  border-radius: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
}

.data_item_txt {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 26rpx;
  color: #333333;
  margin-left: 18rpx;
}

.data_item_left {
  display: flex;
  align-items: center;
}

.data_item_icon {
  width: 70rpx;
  height: 70rpx;
}

.content_data_item {
  height: 100rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22rpx 0 53rpx;
  position: relative;
}

.content_data_warp {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content_title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 6rpx;
}

.content_warp {
  width: 100%;
}

.model_warp {
  padding: 16rpx 12rpx 0 28rpx;
}

.back_button_icon {
  transform: rotate(180deg);
  width: 28rpx;
  height: 28rpx;
}

.back_button_warp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
}
</style>

<style scoped>
.contai_warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: PingFang SC, PingFang SC !important;
  min-height: 100vh;
  background-color: #f1f6fc;
  overflow-x: hidden !important;
}

.top_area_warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.top_status_area {
  width: 100%;
}

.top_nav_warp {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
  position: relative;
  z-index: 5;
  position: relative;
}
</style>
