<template>
  <view class="messages">
    <template v-if="messages.length">
      <view
        v-for="item in messages"
        :key="item.id"
        :class="['msg-item', { 'msg-item-read': item.status }]"
        @click="handleReadMessage(item)"
      >
        <view class="msg-img"></view>
        <view class="msg-body">
          <view class="msg-head">
            <view class="msg-title">{{ item.title }}</view>
            <view class="msg-time">{{ item.create_time }}</view>
          </view>
          <view class="msg-desc">{{ item.content }}</view>
        </view>
      </view>
    </template>
    <view v-else-if="!loading" class="nomessage">暂无消息通知</view>
  </view>
</template>

<script>
import api from "@/lib/api/api";
import jumpToUrl from "@/lib/utils/jumpToUrl";

export default {
  name: "PageMyMessages",
  data() {
    return {
      loading: true,
      hasMore: true,
      page: 1,
      userInfo: null,
      messages: [],
    };
  },
  onShow() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      this.getMessage();
    } else {
      this.userInfo = null;
    }
  },

  onPullDownRefresh() {
    if (!this.userInfo) {
      uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
      return;
    }

    this.getMessage()
      .then(() => {
        uni.stopPullDownRefresh();
      })
      .catch(() => {
        uni.stopPullDownRefresh();
      });
  },
  onReachBottom() {
    if (!this.loading && this.hasMore && this.userInfo) {
      this.getMessage(this.page + 1);
    }
  },
  methods: {
    async getMessage(page = 1) {
      this.loading = true;
      try {
        const data = await api.getMessage(this.page, this.userInfo.session);
        this.page = page;
        if (page === 1) {
          this.messages = data.data;
        } else {
          this.messages = [...this.messages, ...data.data];
        }
        this.hasMore = data.data.length > 0;
      } catch (e) {}
      this.loading = false;
    },
    async handleReadMessage(item) {
      if (!item.status) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        await api
          .readMessage({
            id: `${item.id}`,
            session: this.userInfo.session,
          })
          .catch((e) => {
            console.log(e);
          });
        uni.hideLoading();
      }
      this.handleJump(item.url);
    },
    handleJump(url) {
      jumpToUrl(url);
    },
  },
};
</script>

<style lang="scss">
.messages {
  padding: 25rpx 30rpx 60rpx;
  .msg-item {
    display: flex;
    border-bottom: 2rpx solid #eeeeee;
    padding: 30rpx 0;
    align-items: center;
    .msg-img {
      width: 82rpx;
      height: 82rpx;
      margin-right: 24rpx;
      border-radius: 82rpx;
      background: url(@/assets/message/icon-unread.png) no-repeat center;
      background-size: cover;
      position: relative;
      &::after {
        content: "";
        box-sizing: border-box;
        width: 24rpx;
        height: 24rpx;
        border-radius: 24rpx;
        background: #eb5757;
        border: 2rpx solid #ffffff;
        position: absolute;
        right: -4rpx;
        top: -2rpx;
      }
    }
    .msg-body {
      width: 0;
      flex: 1;
      .msg-head {
        display: flex;
        align-items: center;
        white-space: nowrap;
        .msg-title {
          width: 0;
          flex: 1;
          height: 42rpx;
          font-size: 30rpx;
          font-weight: 600;
          color: #222;
          line-height: 42rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .msg-time {
          height: 34rpx;
          font-size: 24rpx;
          color: #888;
          line-height: 34rpx;
        }
      }
      .msg-desc {
        margin-top: 6rpx;
        width: 100%;
        height: 36rpx;
        font-size: 26rpx;
        color: #888;
        line-height: 36rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    &.msg-item-read {
      .msg-img {
        background-image: url(@/assets/message/icon-read.png);
        &::after {
          display: none;
        }
      }

      .msg-body {
        .msg-head {
          .msg-title {
            color: #888;
          }
        }
      }
    }
  }
  .nomessage {
    padding: 300rpx 0 0;
    text-align: center;
    font-size: 28rpx;
    color: #888;
  }
}
</style>
