<template>
  <view class="message-center-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="navBack">
        <text class="nav-title">{{ title }}&nbsp;</text>
        <text class="arrow"> ▶</text>
      </view>
      <view class="nav-right">
        <!-- 把文字 + 图标放在同一个 nav-btn 内 -->
        <view class="nav-btn" @click="clearUnread">
          <text>清除未读</text>
          <uni-icons type="trash" size="24" color="#666" />
        </view>
        <text class="divider">  |  </text>
        <text class="nav-btn" @click="openSetting">通知设置</text>
      </view>
    </view>

    <!-- 系统通知提示条 -->
    <view class="notice-bar" >
      <view class="notice-left">
        <uni-icons @click="goToClose" style="margin-right: 12rpx" type="closeempty" color="#FF6D00" size="15"/>
        <text class="notice-text">系统通知未开启，报警消息无法通知</text>
      </view>
      <view class="notice-btn" @click="goToOpen">去开启</view>
    </view>

    <!-- 功能入口区 -->
    <view class="func-wrap">
      <view class="func-item" @click="goToSubscribe">
        <view class="func-icon">
          <image style="width: 40rpx; height: 30rpx; "
                 src="https://img.xiaoces.com/photos/news/new2.png"/>
        </view>
        <view class="func-title">消息订阅</view>
        <view class="func-desc">成员收不到设备/应用消息?</view>
      </view>
      <view class="func-item" @click="goToAI">
        <view class="func-icon">
          <image style="width: 40rpx; height: 30rpx; "
                 src="https://img.xiaoces.com/photos/news/ai1.png"/>
        </view>
        <view class="func-title">AI识别</view>
        <view class="func-desc">AI识别精准过滤无效报警</view>
      </view>
    </view>

    <uni-swipe-action ref="swipeAction" class="message-list">
      <uni-swipe-action-item
          v-for="(item, index) in messageList"
          :right-options="options"
          :key="index"
          @click="deleteItem($event, index)"
      >
        <view class="message-item" @click="handleItemClick(item)">
          <view class="item-icon-wrap">
            <view class="item-icon" :style="{ backgroundColor: item.iconBg }">
              <image mode="aspectFit" :style="{width: item.width,
            height: '70rpx' }" :src="item.imgUrl" />
            </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-right">
            <view class="item-time">
              <uni-dateformat :date="item.time" :format="isTodayDate(item.time)?'hh:mm':'yyyy-MM-dd hh:mm:ss'"
                              :threshold="[60000, 3600000]"></uni-dateformat>
            </view>
            <view v-if="item.numBadge">
              <uni-badge :text="item.numBadge" type="error" size="mini" />
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 底部提示 -->
    <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";
import {isTodayDate} from "../../utils/agri";
export default {
  components: {
    UniDividerText
  },
  data() {
    return {
      title: '消息中心',
      isShowNumBadge: true,
      messageList: [
        {
          // video111 / camera_
          imgUrl: 'https://img.xiaoces.com/photos/news/camera_.png', // 对应视频中心
          title: '视频中心',
          desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW116231321313123123123132312dgvbdfg7...',
          time: Date.now(),
          badge: true,
          numBadge: null, // 有值则显示角标
          width: '60rpx'
        },
        {
          // device imei1 device_status3
          imgUrl: 'https://img.xiaoces.com/photos/news/device_status3.png', // 对应设备状态
          // iconBg: '#4285F4',
          title: '设备状态',
          desc: '[设备在线] 十方',
          time: Date.now()-3200000,
          badge: true,
          numBadge: null,
          width: '60rpx'
        },
        {
          // notice_1 notice_2  notice_
          imgUrl: 'https://img.xiaoces.com/photos/news/notice_.png', // 对应系统通知
          iconBg: '#FFA726',
          title: '系统通知',
          desc: '没有新的消息',
          time: Date.now()-3900000,
          badge: false,
          numBadge: 5, // 无值则不显示
          width: '40rpx'
        },
        {
          // play1 play
          imgUrl: 'https://img.xiaoces.com/photos/news/play1.png',
          // iconBg: '#FFA726',
          title: '活动中心',
          desc: '没有新的消息',
          time: Date.now()-9900000,
          badge: false,
          numBadge: 25, // 无值则不显示
          width: '100rpx'
        }
      ],
      options: [{
        text: '置顶',
        style: {
          backgroundColor: '#FFA726'
        }
      },
        {
          text: '删除',
          style: {
            backgroundColor: '#E83A30'
          }
        }
      ],
    }
  },
  methods: {
    isTodayDate,
    navBack() {
      this.$modal.showToast('模块建设中~')
      console.log('返回上一页')
    },
    clearUnread() {
      this.$modal.showToast('模块建设中~')
      console.log('清除未读')
    },
    openSetting() {
      this.$modal.showToast('模块建设中~')
      console.log('打开通知设置')
    },
    goToOpen() {
      this.$modal.showToast('模块建设中~')
      console.log('去开启系统通知')
    },
    goToClose() {
      this.$modal.showToast('模块建设中~')
      console.log('关闭系统通知')
    },
    goToSubscribe() {
      this.$modal.showToast('模块建设中~')
      console.log('进入消息订阅')
    },
    goToAI() {
      this.$modal.showToast('模块建设中~')
      console.log('进入AI识别')
    },
    handleItemClick(item) {
      this.$modal.showToast('敬请期待~')
      console.log('点击消息:', item.title)
    },
    deleteItem(event, index) {
      this.$modal.showToast('敬请期待~')
      console.log('删除消息:', event, index)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 页面全屏 + 禁止横向滚动 */
.message-center-page {
  min-height: 100vh;
  height: calc(100vh - 180rpx);
  /* #ifdef MP-WEIXIN */
  height: calc(100vh - var(--status-bar-height) - 180rpx);
  /* #endif */
  background: linear-gradient(180deg, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
  padding-bottom: 120rpx;
  box-sizing: border-box;
  overflow-x: hidden; /* 禁止横向滚动条 */
  width: 100%;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44rpx 30rpx 20rpx;
  // #ifdef MP-WEIXIN
  padding-top: calc(140rpx + var(--status-bar-height));
  // #endif
  // #ifdef H5
  padding-top: 44px;
  // #endif

  .nav-left {
    display: flex;
    align-items: center;
    color: #333;
    .nav-title {
      font-size: 36rpx;
      font-weight: 500;
    }
    .arrow {
      font-size: 24rpx;
      margin-left: 8rpx;
    }
  }

  .nav-right {
    display: flex;
    align-items: center;

    /* 核心：文字+图标同行+居中 */
    .nav-btn {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #666;

      uni-icons {
        margin-left: 8rpx;
      }
    }

    .divider {
      margin: 0 20rpx;
      color: #c5c3c3;
      font-size: 28rpx;
    }
  }
}

/* 系统通知提示条 */
.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-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 {
      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;
  border-radius: 12rpx;
  .message-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    width: 100%;
    box-sizing: border-box;

    .item-icon-wrap {
      position: relative;
      margin-right: 24rpx;
      flex-shrink: 0; /* 图片不被挤压 */
      .item-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .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;
      min-width: 0; /* 必须加，防止flex溢出 */
      .item-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      .item-desc {
        font-size: 26rpx;
        color: #999;
        line-height: 1.4;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    /* 右侧时间 + 角标 固定区域 */
    .item-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0; /* 时间不被挤压 */
      margin-left: 20rpx;
      .item-time {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}
</style>