<template>
  <fbg-message-list ref="messageRef" :data="data" title='公告' listTitle="公告栏">
    <div class="fbg-notice">
      <i class="el-icon-bell" />
      <span class="fbg-notice-content" @click="handleOpenModal(data[0])">{{data[0] ? data[0].title : ''}}</span>
      <span href="javascript:" class="fbg-notice-more" @click.stop="handleMore">更多</span>
    </div>
  </fbg-message-list>
</template>
<script>
import MessageList from '../messageList';
export default {
  components: {
    'fbg-message-list': MessageList
  },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleOpenModal(data) {
      this.$refs.messageRef.showContent(data);
    },
    handleMore() {
      this.$refs.messageRef.showList();
    }
  }
}
</script>
<style>
</style>
<style lang="scss" scoped>
.fbg {
  &-notice {
    display: inline-block;
    color: $themeColor;
    &-content {
      color: #666;
      cursor: pointer;
      margin-left: 10px;
      &:hover {
        color: $themeColor;
      }
    }
    &-more {
      cursor: pointer;
      margin-left: 10px;
    }
    &-info {
      position: relative;
      &-title {
        margin-bottom: 10px;
        text-align:center;
        color: #333;
        position: absolute;
        width: 100%;
        padding: 10px 0px;
        background-color: #fff;
      }
      &-content {
        padding-top: 50px;
        max-height: 400px;
        overflow-y: auto;
        text-indent: 2em;
        color: #999;
        padding: 0px 20px;
      }
      &-footer {
        text-align: center;
      }
    }
    &-list {
      width: 400px;
      position: fixed;
      display: none;
      top: -10px;
      right: 0px;
      overflow: hidden;
      color: #666;
      padding: 10px;
      z-index: 999;
      &-index {
        width: 40px;
      }
      &-time {
        width: 130px;
      }
      &-close {
        color: #666;
        position: absolute;
        right: 20px;
        top:10px;
      }
      &-box {
        position:absolute;
        height: 98%;
        width: 100%;
        right: -402px;
        transition: right 0.5s;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0px 0px 5px $themeShadowColor;
      }
      &-title {
        font-size: 16px;
        padding: 15px 10px;
      }
      &-item {
        border-bottom: 1px dashed #ccc;
        padding: 5px 10px;
        display: inline-table;
        width: 100%;
        &:last-child {
          border: 0px;
        }
      }
      &-content {
        display: table-cell;
        font-size: 12px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        max-width: 230px;
        text-align: left;
        &-text {
          color: $themeColor;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
