<template>
  <view class="message-page">
    <!-- 消息列表 -->
    <scroll-view :scroll-y="true"
                 class="message-list"
                 @scrolltolower="onLoadMore"
                 v-if="messageList.length>0">
      <view
          v-for="(item, index) in messageList"
          :key="index"
          @click="gotoDetail(item)"
          class="message-item"
      >
        <!-- 图片区域（带未读角标 + 渐变遮罩） -->
        <view class="img-box">
          <image class="bg-img" :src="item.image" mode="aspectFill"></image>
          <!-- 新增：底部渐变遮罩层 -->
          <view class="gradient-mask"></view>
          <view class="unread-tag" v-if="item.unread">未读</view>
          <text class="img-title">{{ item.title }}</text>
        </view>

        <!-- 额外描述文本（仅第三条有） -->
        <view class="desc-text" v-if="item.desc">
          <text>{{ item.desc }}</text>
          <text class="link-btn" @click="handleLink">立即认证✅</text>
        </view>

        <!-- 底部信息栏 -->
        <view class="info-bar">
          <view class="sender-info">
            <image class="sender-icon" src="https://picsum.photos/32/32" mode="aspectFill"></image>
            <text class="sender-name">{{ item.sender }}</text>
          </view>
          <text class="send-time">{{ item.time }}</text>
        </view>
      </view>
      <uni-load-more v-if="messageList.length>4" iconType="auto" :status="status" :content-text="contentText" />
    </scroll-view>
    <view class="empty__item tn-margin-top" v-else>
      <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
                text="近7天暂无消息，可下拉查看历史消息" :imgWidth="200"
                :imgHeight="200"></tn-empty>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      messageList: [
        {
          id: 1,
          image: "https://picsum.photos/id/1031/800/400", // 城市建筑图
          title: "下班时间到了，勿浪费公司水电，请滚",
          sender: "图鸟官方团队",
          time: "2024-02-28 18:00",
          unread: true,
          desc: ""
        },
        {
          id: 2,
          image: "https://picsum.photos/id/1059/800/400", // 新年装饰图
          title: "新年新气象，除夕快乐",
          sender: "图鸟官方团队",
          time: "2024-02-09 16:28",
          unread: false,
          desc: ""
        },
        {
          id:3,
          image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
          title: "企业认证，到期后企业使用将受限",
          sender: "图鸟官方团队",
          time: "2024-01-22 16:28",
          unread: false,
          desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
        },
        {
          id:4,
          image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
          title: "企业认证，到期后企业使用将受限",
          sender: "图鸟官方团队",
          time: "2024-01-22 16:28",
          unread: false,
          desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
        }
      ],
      isHaveOldData: true,
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多数据了'
      },
      status: 'more'
    }
  },
  onShow() {
    // 只允许查询七天以内消息默认展示今天
  },
  methods: {
    handleLink() {
      // 点击"立即认证"的跳转逻辑
      uni.showToast({ title: "跳转到认证页" })
    },
    gotoDetail(item) {
      uni.showToast({ title: "跳转到详情页" })
      // 点击消息项跳转详情页
      uni.navigateTo({
        url: "/pages/news/subpages/eventDetail/index?title=" + item.title
      })
    },
    onLoadMore() {
      this.status = 'loading'
      if (!this.isHaveOldData) {
        setTimeout(() => {
          this.$modal.msg("没有更早数据！");
          // 结束刷新状态
          this.status = 'nomore'
        }, 800);
        return;
      }
      // 模拟接口请求延迟
      setTimeout(() => {
        // 生成10条新数据
        const newData = [
          {
            id: 3,
            image: "https://picsum.photos/id/180/800/400",
            title: "企业认证，到期后企业使用将受限",
            sender: "图鸟官方团队",
            time: "2024-01-22 16:28",
            unread: false,
            desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
          },
          {
            id: 4,
            image: "https://picsum.photos/id/119/800/400",
            title: "系统版本更新通知",
            sender: "平台运营中心",
            time: "2024-02-15 09:12",
            unread: true,
            desc: "新版本已发布，优化了页面加载速度并修复已知问题，建议立即更新体验。"
          },
          {
            id: 5,
            image: "https://picsum.photos/id/110/800/400",
            title: "账号安全提醒：异地登录检测",
            sender: "安全中心",
            time: "2024-02-18 21:45",
            unread: true,
            desc: "检测到您的账号在陌生设备登录，如非本人操作请及时修改密码并锁定账号。"
          },
          {
            id: 6,
            image: "https://picsum.photos/id/116/800/400",
            title: "企业套餐续费提醒",
            sender: "客户服务部",
            time: "2024-03-01 14:30",
            unread: false,
            desc: "您的企业套餐即将到期，为不影响正常使用，请尽快完成续费操作。"
          },
          {
            id: 7,
            image: "https://picsum.photos/id/111/800/400",
            title: "新功能上线邀请体验",
            sender: "产品团队",
            time: "2024-03-10 11:20",
            unread: false,
            desc: "数据可视化与批量导出功能正式上线，诚邀您体验并提出宝贵意见。"
          },
          {
            id: 8,
            image: "https://picsum.photos/id/114/800/400",
            title: "违规内容处理通知",
            sender: "内容审核组",
            time: "2024-03-20 16:05",
            unread: true,
            desc: "您发布的部分内容不符合平台规范，已做隐藏处理，请及时修改后重新提交。"
          },
          {
            id: 9,
            image: "https://picsum.photos/id/112/800/400",
            title: "月度使用报告已生成",
            sender: "数据中心",
            time: "2024-04-01 10:00",
            unread: false,
            desc: "您上月的平台使用数据报告已生成，包含使用时长、功能频次等详细信息。"
          }
        ]
        // 插入到列表最前面
        this.messageList = [ ...this.messageList,...newData];
        this.status = 'more'
      }, 800);

    },
  }
}
</script>

<style scoped>
/* 页面容器 */
.message-page {
  height: 100vh;
  background-color: #f8f8f8;
}

/* 消息列表 */
.message-list {
  height: 100vh;
  padding: 40rpx 20rpx;
}
.message-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 25rpx;
  overflow: hidden;
}

/* 图片区域 */
.img-box {
  position: relative;
  width: 100%;
  height: 320rpx;
}
.bg-img {
  width: 100%;
  height: 100%;
}
/* 新增：底部渐变遮罩 */
.gradient-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx; /* 遮罩高度，和标题区域对齐 */
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  pointer-events: none; /* 不影响点击 */
}
.unread-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}
.img-title {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
  z-index: 2; /* 确保标题在遮罩上方 */
}

/* 底部信息栏 */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
}
.sender-info {
  display: flex;
  align-items: center;
}
.sender-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
  border-radius: 50%;
}
.sender-name {
  font-size: 28rpx;
  color: #666;
}
.send-time {
  font-size: 28rpx;
  color: #999;
}

/* 描述文本（仅第三条） */
.desc-text {
  padding:  30rpx 24rpx 0 24rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.link-btn {
  color: #007bff;
}
</style>