<template>
  <view class="container">
    <div style="display: flex; gap: 20rpx">
      <u-button type="success" text="一键已读" @click="fnGetMessageReply" />
    </div>
    <view class="wrap">
      <view v-for="item in messageList" :key="item.MESSAGE_ID">
        <view
          text="温馨提示"
          color="linear-gradient(to right, #27a0ff, #2a56f7)"
          custom-style="width:150upx; height:60upx; margin-left: 20upx;margin-right: 0;"
          class="title"
          @click="
            $u.route({
              url: '/pages/message/detail',
              params: {
                MESSAGE_ID: item.MESSAGE_ID,
                SYNOPSIS: item.SYNOPSIS,
                CONTENT: item.CONTENT,
                CREATOR: item.CREATOR,
                CREATTIME: item.CREATTIME,
              },
            })
          "
        >
          <view v-if="item.ISREPLY === 0">{{ item.SYNOPSIS }}（未读）</view>
          <view v-else>{{ item.SYNOPSIS }}（已读）</view>
        </view>
        <view class="time">提醒时间:{{ item.CREATTIME }}</view>
        <view class="info u-line-1" v-html="item.CONTENT"></view>
        <view class="bottem">
          <view class="fcb">查看详情</view>
          <view>
            <view
              @click="
                $u.route({
                  url: '/pages/message/detail',
                  params: {
                    MESSAGE_ID: item.MESSAGE_ID,
                    SYNOPSIS: item.SYNOPSIS,
                    CONTENT: item.CONTENT,
                    CREATOR: item.CREATOR,
                    CREATTIME: item.CREATTIME,
                  },
                })
              "
            >
              <u-icon name="arrow-right" color="#999999"> </u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { fnGetMessageReadAll, getMessageData } from "../../api";

export default {
  data() {
    return {
      messageList: [],
    };
  },
  onLoad() {
    this.fnGetMessageData();
  },
  onShow() {
    this.fnGetMessageData();
  },
  methods: {
    async fnGetMessageData() {
      const resData = await getMessageData({
        USER_ID: this.$store.getters.getUserInfo.USER_ID,
      });
      this.messageList = resData.varList;
    },
    async fnGetMessageReply(MESSAGE_ID) {
      await fnGetMessageReadAll({ MESSAGE_ID, ISREPLY: "1" });
      this.fnGetMessageData();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: calc(100vh - 95px);
  background: #fafafa;
  padding: 20upx;
  box-sizing: border-box;

  .wrap {
    width: 100%;
    background: #ffffff;
    padding: 30upx;
    border-radius: 8upx;
    box-sizing: border-box;
    margin-top: 20upx;
    border-bottom: 1px solid #eeeeee;

    .title {
      font-size: 32upx;
      border-bottom: 1px solid #eeeeee;
      line-height: 2.5;
    }
    .info {
      color: #666;
      margin: 20upx 0;
      box-sizing: border-box;
    }

    .bottem {
      width: 100%;
      border-top: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      padding: 20upx 0;
      box-sizing: border-box;

      .fcb {
        color: #1d82fe;
      }
    }
  }
}
</style>
