<template>
  <div class="fbg-message">
    <slot />
    <div class="fbg-message-main" @click.stop="showList">
      <slot name="main" />
    </div>
    <diglog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px">
      <div class="fbg-message-info">
        <p class="fbg-message-info-title">{{dataInfo.title}}</p>
        <div class="fbg-message-info-content">
          <p>{{dataInfo.content}}</p>
          <p class="fbg-message-info-content" style="text-align:right;">{{dataInfo.time}}</p>  
        </div>
          
      </div>
      <div slot="footer" class="fbg-message-info-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </diglog>
    <div class="fbg-message-list" :style="{display: display}" @click.stop ref="listRef">
      <div class="fbg-message-list-box" :style="{right: right}">
        <i class="fbgiconfont icon-guanbishanchu fbg-message-list-close" @click="hideList"/>
        <p class="fbg-message-list-title">{{listTitle}}</p>
        <ul class="fbg-message-list-ul">
          <li class="fbg-message-list-item" v-for="(item, index) in data" :key="index">
              <span class="fbg-message-list-content fbg-message-list-index">No {{index+1}}</span>
              <span class="fbg-message-list-content">
                <span class="fbg-message-list-content-text" @click="handleOpenModal(item)">{{item.title}}</span>
              </span>
              <span class="fbg-message-list-content fbg-message-list-time">{{item.time}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import util from '../../utils';
import Dialog from '../dialog';

export default {
  components: {
    'diglog': Dialog
  },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    title: {
      type: String,
      default: ''
    },
    listTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataInfo: {},
      dialogVisible: false,
      display: 'none',
      right: '-402px'
    }
  },
  mounted() {
    this.$refs.listRef.style.height = document.documentElement.clientHeight + 'px';
    let timer = null;
    window.addEventListener('resize', () => {
      clearTimeout(timer);
      let timer = setTimeout(() => {
        if (this.$refs.listRef) {
          this.$refs.listRef.style.height = document.documentElement.clientHeight + 'px';
        }
        clearTimeout(timer);
        timer = null;
      }, 100);
    }, false);
    document.addEventListener('click', () => {
      this.hideList();
    }, false);
  },
  methods: {
    handleOpenModal(data) {
      this.showContent(data);
    },
    showContent(data) {
      this.dialogVisible = true;
      this.dataInfo = data;  
    },
    handlerStopPropation() {},
    hideList() {
      if (!this.$refs.listRef) {
        return false;
      }
      this.right = ('-' + util.getStyle(this.$refs.listRef, 'width'));
      let timer = setTimeout(() => {
        this.display = 'none';
        clearTimeout(timer);
        timer = null;
      }, 520);
    },
    showList() {
      this.display = 'block';
      let timer = setTimeout(() => {
        this.right = '-5px';
        clearTimeout(timer);
        timer = null;
      }, 0);
    }
  }
}
</script>
<style>
</style>
<style lang="scss" scoped>
.fbg {
  &-message {
    display: inline-block;
    color: $themeColor;
    &-main {
      display:inline-block;
    }
    &-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>