<template>
  <div class="notice-container">
    <div class="notice-btn " :class="{msg:hasMessage}">
      <span class="el-icon-message-solid" @click="drawer = true" />
    </div>
    <el-drawer
      title="消息通知"
      :visible.sync="drawer"
      :with-header="true"
      :modal="false"
      size="380px"
    >
      <!-- 侧边展开 -->
      <div class="drawer-content">
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
          <!-- 全部 -->
          <el-tab-pane label="全部" name="first">
            <div class="scroll-box">
              <ul>
                <li v-for="(msg,index) in todoList" :key="index" :class="{dot:msg.status===0,isDone:msg.status===1}">
                  <time>{{ msg.createDate }}</time>
                  <span>{{ msg.content }}</span>
                  <a href="#" @click.prevent="goReviewPage(msg)">{{ msg.status === 0 ? '去审核' : '已审核' }}</a>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <!-- 已处理 -->
          <el-tab-pane label="已处理" name="second">
            <div class="scroll-box">
              <ul v-if="todoList.length>0">
                <li v-for="(msg,index) in todoList" :key="index" class="isDone">
                  <time>{{ msg.createDate }}</time>
                  <span>{{ msg.content }}</span>
                  <a href="#">已审核</a>
                </li>
              </ul>
              <div v-else class="no-notice">
                <span class="el-icon-message-solid" />
                <p>暂时没有任何消息</p>
              </div>
            </div>
          </el-tab-pane>
          <!-- 未处理 -->
          <el-tab-pane :label="count" class="untreated" name="third">
            <div class="scroll-box">
              <ul v-if="todoList.length>0">
                <li v-for="(msg,index) in todoList" :key="index" class="dot">
                  <time>{{ msg.createDate }}</time>
                  <span>{{ msg.content }}</span>
                  <a href="#">去审核</a>
                </li>
              </ul>
              <div v-else class="no-notice">
                <span class="el-icon-message-solid" />
                <p>暂时没有任何消息</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 有新消息时的标识或没处理的标识 -->
        <div class="dot-list">
          <span v-show="false" class="dot" />
          <span v-show="false" class="dot" />
          <span v-show="hasMessage" class="dot" />
          <span v-show="hasMessage" class="dot" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      activeName: 'first',
      drawer: false
    }
  },
  computed: {
    ...mapGetters(['messageList']),
    todoList() {
      if (this.activeName === 'first') {
        return this.messageList
      } else if (this.activeName === 'second') {
        return this.messageList.filter(item => item.status === 1)
      } else {
        return this.messageList.filter(item => item.status === 0)
      }
    },
    count() {
      const length = this.messageList.filter(item => item.status === 0).length
      if (length > 99) {
        return `未处理(99+)`
      } else if (length === 0) {
        return `未处理`
      } else {
        return `未处理(${length}+)`
      }
    },
    hasMessage() {
      return this.messageList.filter(item => item.status === 0).length > 0
    }
  },
  methods: {
    handleClick() {},
    // 跳转到审核页面
    goReviewPage(msg) {
      if (msg.status !== 0) return
      if (msg.type === 1) {
        this.$router.push(`/review/auth/auth-list?authUserId=${msg.authUserId}`)
      } else {
        this.$router.push(`/review/auth/shop-list?authId=${msg.authId}`)
      }
      this.drawer = false
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-container{
  display: inline-block;
  height: 50px;
  margin-right: 10px;
  vertical-align: text-bottom;
}
.notice-btn {
  position: relative;
  cursor: pointer;
  font-size: 24px;
  color: #666;
  &.msg{
    &::before{
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    top: 10px;
    right: 0;
  }
  }
}
.drawer-content{
  line-height: initial;
  padding: 15px;
  position: relative;
  .no-notice{
    text-align: center;
    color: #ddd;
    span{
      display: inline-block;
      font-size: 60px;
      margin: 25px 0 0;
    }
  }
  ul{
    line-height: 26px;
    margin: 0;
    padding-left: 15px;
    list-style-type: none;
    li{
      margin: 0;
      font-size: 12px;
      color: #666;
      position: relative;
      border-bottom: 1px dashed #ddd;
      &.dot{
        &::before{
          content:"";
          display: block;
          position: absolute;
          width: 4px;
          height: 4px;
          border-radius: 2px;
          left: -10px;
          top: 10px;
          background-color: red;
        }
      }
      &.isDone{
        color: #ccc !important;
        a{
          color: #ccc !important;
          text-decoration: none !important;
        }
      }
      span{
        display: inline-block;
        vertical-align: middle;
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0 10px;
      }
      a{
        color: #409EFF;
        &:hover{
          text-decoration: underline;
        }
      }
    }
  }
  .dot-list{
    top: 0;
    width: 100%;
    position: absolute;
    z-index: 99;
    .dot{
      position: absolute;
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: red;
      border-radius: 50%;
      top: 32px;
      &:nth-child(1){
        left: 63px;
      }
      &:nth-child(2){
        left: 200px;
      }
      &:nth-child(3){
        left: 346px;
      }
      &:nth-child(4){
        top: -28px;
        left: 75px;
      }
    }
  }

}
.scroll-box{
  height: 82vh;
  overflow-y: scroll;
  &::-webkit-scrollbar{
    display: none;
  }
}
</style>
