<template>
  <!-- 站内信 -->
  <div class="in-site-msg-wrapper">
    <div class="in-site-msg-header">
      <div class="in-site-msg-tit">站内信</div>
      <div class="in-site-msg-more" @click="goMore(2)">查看更多 》</div>
    </div>
    <div>
      <div class="in-site-msg-content">
        <vue-seamless-scroll
          v-if="listData.length > 0"
          :class-option="optionSingleHeightTime"
          :data="listData"
          class="seamless-warp"
        >
          <ul class="item">
            <li v-for="(item, index) in listData" :key="index">
              <span class="title" v-text="item.title"></span>
            </li>
          </ul>
        </vue-seamless-scroll>

        <el-empty v-else :image-size="100" description="暂无站内信"></el-empty>
      </div>
      <div
        v-if="listData.length > 0"
        class="more"
        @click="goMore(2)"
        style="margin: 20px 0 0 0"
      >
        查看更多>>
      </div>
    </div>
  </div>
</template>

<script>
import { getNoticeList } from "@/api/sidebaruserinfo.js";
export default {
  name: "InSiteMessage",
  data() {
    return {
      listData: [],
      optionSingleHeightTime() {
        return {
          step: 0.6, // 数值越大速度滚动越快
          limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 14, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
      },
    };
  },
  mounted() {
    this.getListData();
  },
  methods: {
    goMore(index) {
      //1公告 2站内信
      this.$router.push({
        path: "/noticeLists",
        query: { index: index },
      });
    },
    getListData() {
      getNoticeList({ functionType: 2 }).then((res) => {
        this.listData = res.rows;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.in-site-msg-wrapper {
  margin-top: 20px;
  box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
  border-radius: 10px 10px 10px 10px;
  padding: 5px 10px 20px 10px;
  text-align: center;
  .in-site-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .in-site-msg-tit {
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .in-site-msg-more {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3499ff;
      cursor: pointer;
    }
  }

  .in-site-msg-content {
    height: 220px;
    overflow: hidden;
  }
}
</style>
