<!-- 主页模块 消息列表页-->
<template>
  <div>
    <!--消息中心-->
    <div class="commonly-used message-center">
      <div class="label-box">
        <span class="label-title">消息中心</span>
      </div>
      <div class="button-box">
        <span class="cursor go-back">
          <el-button @click="back">返回</el-button>
        </span>
      </div>
      <div id="message" class="scroll-container">
        <div v-for="(value, key) in list" :key="key">
          <div class="message-box">
            <span class="message-text cursor" @click="goMessageDetail(value)">{{ value.systemMessageTitle }}</span>
            <span v-if="value.readType === 0" class="new-icon ">NEW</span>
            <span class="message-time ">{{ value.createDate.split(' ')[0] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pageSystemMessage } from '../../api/home/home';

export default {
  name: 'MessageList',
  components: {},
  data() {
    return {
      list: [],
      headState: '/home',
      page: 1,
      pageSwitch: true,
    };
  },

  mounted() {
    this.getHomeCount();
    window.addEventListener('scroll', this.test, true);
  },

  destroyed() {
    window.removeEventListener('scroll', this.test);
  },

  methods: {
    test() {
      const scrollObj = document.getElementById('message'); // 滚动区域
      const scrollDistanceFromBottom = scrollObj.scrollHeight - scrollObj.scrollTop - scrollObj.clientHeight;
      if (this.pageSwitch && scrollDistanceFromBottom <= 5) {
        this.getHomeCount();
      }
    },
    getHomeCount() {
      this.pageSwitch = false;
      const params = {
        compId: localStorage.getItem('enterprise-front-companyId'),
        currentPage: this.page,
        pageSize: 20
      };
      pageSystemMessage(params)
        .then((response) => {
          this.list = this.list.concat(response.records);
          this.page++;
          if (response.records < 20) {
            return;
          }
          this.pageSwitch = true;
        }).catch(() => {
          this.$message({
            message: 'error ',
            type: 'error',
            showClose: true,
          });
        });
    },

    goMessageDetail(value) {
      localStorage.setItem('enterprise-front-systemMessageId', JSON.stringify(value));
      this.$router.push({ path: '/messageDetail', name: 'messageDetail' });
    },

    back() {
      this.$router.back();
    }
  }
};
</script>

<style scoped lang="scss">
  .message-center {
    padding: 30px;
    .message-box {
      font-size: 13px;
      background-color: #f6f6f6;
      padding: 10px 10px;
      margin: 5px 0;
      .message-text {
        padding-left: 18px;
        position: relative;
        &:before {
          content: "\25CF";
          height: 10px;
          position: absolute;
          width: 18px;
          left: 0;
          top: -1px;
          color: #1d6ced;
        }
      }
      .message-time {
        float: right;
        color: #999;
        font-size: 12px;
      }
      .new-icon {
        background-color: #e74c3c;
        color: #fff;
        font-size: 8px;
        padding: 1px 6px;
        margin-left: 10px;
        border-radius: 4px;
        font-family: cursive;
      }
    }
  }

  .button-box {
    display: block;
    background-color: #f6f6f6;
    padding: 0 10px;
    margin: 5px 0;
    text-align: right;
    .go-back {
      .el-button {
        /*display: inline-block;*/
        /*float:right;*/
        margin: 10px 0;
        width: 70px;
        height: 30px;
      }
    }
  }
  .scroll-container{
    height: 100vh;
    overflow-y: scroll;
  }
</style>
