<template>
  <el-row id="message-page-body">
    <el-col :span="4">
      <el-card style="position: fixed;">
        <el-menu default-active="1" @select="handleSelect">
          <el-menu-item index="0">
            <el-icon>
              <Back/>
            </el-icon>
            <span style="padding-left: 20px">返回首页</span>
          </el-menu-item>
          <el-menu-item index="1">
            <el-icon>
              <Bell/>
            </el-icon>
            <span style="padding-left: 20px">通知列表</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <ChatDotRound/>
            </el-icon>
            <span style="padding-left: 20px">消息列表</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="18">
      <el-card>
        <template #header>
          <span style="font-weight: bold; font-size: larger">
            {{ title }}
          </span>
          <span v-if="activeIndex==='2' && myUnReadMessage.length === 0" style="margin-left: 20px">
            当前显示 {{ (messageDayPeriod + 1) * 3 }} 天内的未读消息，<span @click="handleReadMoreMessage" class="read-more">点击查看更多</span>
          </span>
        </template>
        <div v-if="activeIndex==='1' && myUnReadAnnouncement.length !== 0" class="message-page-main">
          <MessageCard v-for="i in myUnReadAnnouncement" :key="i.id" :messageVO="i"/>
        </div>
        <div v-else-if="activeIndex==='1' && myUnReadAnnouncement.length === 0" style="margin: 100px 0 0 calc(50% - 36px); min-height: 300px">
          <el-icon :size="72" color="#bfbfbf">
            <ChatSquare/>
          </el-icon>
          <div class="tip">暂无新通知~</div>
        </div>
        <div v-else-if="activeIndex==='2' && myUnReadMessage.length !== 0" class="message-page-main">
          <MessageCard v-for="i in myUnReadMessage" :key="i.id" :messageVO="i"/>
        </div>
        <div v-else-if="activeIndex==='2' && myUnReadMessage.length === 0" style="margin: 100px 0 0 calc(50% - 36px); min-height: 300px">
          <el-icon :size="72" color="#bfbfbf">
            <ChatSquare/>
          </el-icon>
          <div class="tip">暂无新消息~</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { Back, Bell, ChatDotRound, ChatSquare } from "@element-plus/icons-vue";
import MessageCard from "@/views/MessagePage/components/MessageCard";

export default {
  name: "MessagePage",
  components: { ChatSquare, MessageCard, ChatDotRound, Bell, Back },
  data() {
    return {
      activeIndex: "1",
      myUnReadAnnouncement: [],
      myUnReadMessage: [],
      messageDayPeriod: 0,
    };
  },
  computed: {
    title() {
      return this.activeIndex === "1" ? "通知列表" : "消息列表";
    },
  },
  async created() {
    this.myUnReadAnnouncement = (await this.$apis.getUnreadAnnouncements()).data.data;
    this.myUnReadMessage = (await this.$apis.getUnreadMessages(this.messageDayPeriod)).data.data;
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      if (index === "0") {
        this.$router.push("portal");
      }
    },
    async handleReadMoreMessage() {
      this.messageDayPeriod += 1;
      this.myUnReadMessage = (await this.$apis.getUnreadMessages(this.messageDayPeriod)).data.data;
    },
  },
};
</script>

<style scoped>
#message-page-body {
  margin: 40px 160px 80px 0;
  min-height: calc(100vh - 160px);
}

.message-page-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

.tip {
  font-size: small;
  font-weight: bold;
  color: #666666;
}

.read-more {
  color: #868686;
  cursor: pointer;
}

.read-more:hover {
  text-decoration: underline;
  color: #409eff;
}
</style>