<template>
  <view class="device-tab">
    <!-- 设备列表入口按钮 -->
    <view class="device-entry" @click="openDeviceList">
      <view class="entry-content">
        <uni-icons type="list" size="24" color="#2A68FF" />
        <text class="entry-text">查看设备列表</text>
      </view>
      <uni-icons type="right" size="16" color="#999" />
    </view>

    <!-- 设备列表弹窗 -->
    <DeviceListPopup ref="deviceListPopup" />
  </view>
</template>

<script>
import DeviceListPopup from '@/pages/ucenter/components/DeviceListPopup.vue';

export default {
  name: 'DeviceTab',
  components: {
    DeviceListPopup,
  },
  methods: {
    // 打开设备列表弹窗
    openDeviceList() {
      if (this.$refs.deviceListPopup) {
        this.$refs.deviceListPopup.open();
      }
    },
    // 对外暴露的"加载更多"方法，供页面 onReachBottom 调用（保留接口兼容性）
    loadMore() {
      // 弹窗内部已处理滚动加载，这里不需要额外处理
    },
  },
};
</script>

<style>
.device-tab {
  padding: 148rpx 32rpx 32rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.device-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  margin-bottom: 24rpx;
}

.entry-content {
  display: flex;
  align-items: center;
}

.entry-text {
  margin-left: 16rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}
</style>


