<template>
  <view class="message-center-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="navBack">
        <text class="nav-title">小策技术</text>
        <text class="arrow">▶</text>
      </view>
      <view class="nav-right">
        <text class="nav-btn" @click="clearUnread">清除未读</text>
        <text class="divider">|</text>
        <text class="nav-btn" @click="openSetting">通知设置</text>
      </view>
    </view>

    <!-- 系统通知提示条 -->
    <view class="notice-bar" @click="goToOpen">
      <view class="notice-left">
        <text class="notice-icon">✕</text>
        <text class="notice-text">系统通知未开启，报警消息无法通知</text>
      </view>
      <view class="notice-btn">去开启</view>
    </view>

    <!-- 功能入口区 -->
    <view class="func-wrap">
      <view class="func-item" @click="goToSubscribe">
        <view class="func-icon">🗨️</view>
        <view class="func-title">消息订阅</view>
        <view class="func-desc">成员收不到设备/应用消息?</view>
      </view>
      <view class="func-item" @click="goToAI">
        <view class="func-icon">🤖</view>
        <view class="func-title">AI识别</view>
        <view class="func-desc">AI识别精准过滤无效报警</view>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="message-list">
      <view
          v-for="(item, index) in messageList"
          :key="index"
          class="message-item"
          @click="handleItemClick(item)"
      >
        <view class="item-icon-wrap">
          <view class="item-icon" :style="{ backgroundColor: item.iconBg }">
            <text class="icon-text">{{ item.icon }}</text>
          </view>
          <view v-if="item.badge" class="item-badge"></view>
        </view>
        <view class="item-content">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-desc">{{ item.desc }}</view>
        </view>
        <view class="item-time">{{ item.time }}</view>
      </view>
    </view>

    <!-- 底部提示 -->
    <uni-divider-text margin="10rpx 0"
                      width="50%"
                      font-size="24rpx"
                      lineText="只展示最近7天的消息"/>
  </view>
</template>

<script>
import UniDividerText from "../../components/uni-divider/uni-divider-text.vue";
export default {
  components: {
    UniDividerText
  },
  data() {
    return {
      messageList: [
        {
          icon: '🎬',
          iconBg: '#4285F4',
          title: '视频中心',
          desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW1167...',
          time: '11:51',
          badge: true
        },
        {
          icon: '🖥️',
          iconBg: '#4285F4',
          title: '设备状态',
          desc: '[设备在线] 十方',
          time: '26/03/21',
          badge: true
        },
        {
          icon: '🔔',
          iconBg: '#FFA726',
          title: '系统通知',
          desc: '没有新的消息',
          time: '',
          badge: false
        }
      ]
    }
  },
  methods: {
    navBack() {
      console.log('返回上一页')
    },
    clearUnread() {
      console.log('清除未读')
    },
    openSetting() {
      console.log('打开通知设置')
    },
    goToOpen() {
      console.log('去开启系统通知')
    },
    goToSubscribe() {
      console.log('进入消息订阅')
    },
    goToAI() {
      console.log('进入AI识别')
    },
    handleItemClick(item) {
      console.log('点击消息:', item.title)
    },
    switchTab(tab) {
      console.log('切换到:', tab)
      // 实际项目中用 uni.switchTab 跳转对应页面
    }
  }
}
</script>

<style lang="scss" scoped>
.message-center-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120rpx; /* 给底部Tab栏预留位置 */
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44rpx 30rpx 20rpx;
  // #ifdef MP-WEIXIN
  padding-top: var(--status-bar-height);
  // #endif
  // #ifdef H5
  padding-top: 44px;
  // #endif
  background-color: #fff;
  .nav-left {
    display: flex;
    align-items: center;
    .nav-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
    }
    .arrow {
      font-size: 24rpx;
      color: #666;
      margin-left: 8rpx;
    }
  }
  .nav-right {
    display: flex;
    align-items: center;
    .nav-btn {
      font-size: 28rpx;
      color: #666;
      padding: 0 12rpx;
    }
    .divider {
      font-size: 28rpx;
      color: #e5e5e5;
    }
  }
}

/* 系统通知提示条 */
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20rpx 30rpx;
  padding: 20rpx;
  background-color: #FFF3E0;
  border-radius: 12rpx;
  .notice-left {
    display: flex;
    align-items: center;
    .notice-icon {
      font-size: 24rpx;
      color: #FF6D00;
      margin-right: 12rpx;
    }
    .notice-text {
      font-size: 28rpx;
      color: #E65100;
    }
  }
  .notice-btn {
    padding: 8rpx 20rpx;
    background-color: #FF9800;
    color: #fff;
    font-size: 26rpx;
    border-radius: 20rpx;
  }
}

/* 功能入口区 */
.func-wrap {
  display: flex;
  margin: 0 30rpx 20rpx;
  gap: 20rpx;
  .func-item {
    flex: 1;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 12rpx;
    .func-icon {
      font-size: 32rpx;
      margin-bottom: 12rpx;
    }
    .func-title {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 8rpx;
    }
    .func-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
}

/* 消息列表 */
.message-list {
  background-color: #fff;
  .message-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    .item-icon-wrap {
      position: relative;
      margin-right: 24rpx;
      .item-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-text {
          font-size: 32rpx;
          color: #fff;
        }
      }
      .item-badge {
        position: absolute;
        top: -6rpx;
        right: -6rpx;
        width: 20rpx;
        height: 20rpx;
        background-color: #f5222d;
        border-radius: 50%;
        border: 2rpx solid #fff;
      }
    }
    .item-content {
      flex: 1;
      .item-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      .item-desc {
        font-size: 26rpx;
        color: #999;
        line-height: 1.4;
      }
    }
    .item-time {
      font-size: 26rpx;
      color: #999;
    }
  }
}


</style>