<!-- 顶栏消息通知 -->
<template>
  <el-popover
    :width="330"
    trigger="click"
    v-model="visible"
    class="ele-notice-group"
    transition="el-zoom-in-top"
    popper-class="ele-notice-pop"
  >
    <template v-slot:reference>
      <div class="ele-notice-group">
        <el-badge :value="noticeCount" :hidden="!noticeCount">
          <i class="el-icon-bell"></i>
        </el-badge>
      </div>
    </template>
    <el-tabs v-model="active">
      <el-tab-pane
        name="notice"
        :label="'通知' + [noticeCount ? '(' + noticeCount + ')' : '']"
      >
        <div class="ele-notice-list ele-scrollbar-mini">
          <div
            v-for="(item, index) in notice"
            :key="index"
            class="ele-notice-item"
          >
            <div
              class="ele-cell ele-notice-item-wrapper"
              @click="goDetail(item)"
            >
              <i :class="[item.icon, 'ele-notice-item-icon']"></i>
              <div class="ele-cell-content">
                <div class="ele-elip">{{ item.content }}</div>
                <div class="ele-text-secondary ele-elip">{{ item.c_time }}</div>
              </div>
            </div>
            <el-divider/>
          </div>
        </div>
        <div v-if="notice.length" class="ele-cell ele-notice-actions">
          <div class="ele-cell-content" @click="clearNotice">清空通知</div>
          <el-divider direction="vertical" class="line-color-light"/>
          <router-link to="/user/notice?type=notice" class="ele-cell-content">
            查看更多
          </router-link>
        </div>
        <ele-empty v-if="!notice.length" text="已查看所有通知"/>
      </el-tab-pane>
      <!--
      <el-tab-pane name="letter" :label="letterTitle">
        <div class="ele-notice-list ele-scrollbar-mini">
          <div
            v-for="(item, index) in letter"
            :key="index"
            class="ele-notice-item"
          >
            <div class="ele-cell ele-notice-item-wrapper ele-cell-align-top">
              <el-avatar :src="item.avatar" size="medium" />
              <div class="ele-cell-content">
                <div class="ele-elip">{{ item.title }}</div>
                <div class="ele-text-secondary ele-elip">
                  {{ item.content }}
                </div>
                <div class="ele-cell-desc ele-elip">{{ item.time }}</div>
              </div>
            </div>
            <el-divider />
          </div>
        </div>
        <div v-if="letter.length" class="ele-cell ele-notice-actions">
          <div class="ele-cell-content" @click="clearLetter">清空私信</div>
          <el-divider direction="vertical" class="line-color-light" />
          <router-link to="/user/message?type=letter" class="ele-cell-content">
            查看更多
          </router-link>
        </div>
        <ele-empty v-if="!letter.length" text="已读完所有私信" />
      </el-tab-pane>
      <el-tab-pane :label="todoTitle" name="todo">
        <div class="ele-notice-list ele-scrollbar-mini">
          <div
            v-for="(item, index) in todo"
            :key="index"
            class="ele-notice-item"
          >
            <div class="ele-notice-item-wrapper">
              <div class="ele-cell ele-cell-align-top">
                <div class="ele-cell-content ele-elip">{{ item.title }}</div>
                <el-tag size="mini" :type="['info', 'danger', ''][item.status]">
                  {{ ['未开始', '即将到期', '进行中'][item.status] }}
                </el-tag>
              </div>
              <div class="ele-text-secondary ele-elip">
                {{ item.description }}
              </div>
            </div>
            <el-divider />
          </div>
        </div>
        <div v-if="todo.length" class="ele-cell ele-notice-actions">
          <div class="ele-cell-content" @click="clearTodo">清空待办</div>
          <el-divider direction="vertical" class="line-color-light" />
          <router-link to="/user/message?type=todo" class="ele-cell-content">
            查看更多
          </router-link>
        </div>
        <ele-empty v-if="!todo.length" text="已完成所有任务" />
      </el-tab-pane>
      -->
    </el-tabs>
    <audio ref="notificationSound" preload="auto">
      <source src="@/assets/audio/message-ding.mp3" type="audio/mpeg">
    </audio>
  </el-popover>
</template>

<script>
import { pageNotice, setRead } from '@/api/user/notice'
// import websocket from '@/utils/websocket';

export default {
  data() {
    return {
      // 是否显示
      visible: false,
      // 选项卡选中
      active: 'notice',
      // 通知数据
      notice: [],
      noticeCount: 0,
      // 私信数据
      letter: [],
      letterCount: 0,
      // 待办数据
      todo: [],
      todCount: 0
    }
  },
  mounted() {
    // 监听 WebSocket 连接状态
    window.EventBus.$on('ws:connected', (status) => {
      console.log('WebSocket 连接状态:', status)
    })

    // 监听 WebSocket 消息
    window.EventBus.$on('ws:message', (message) => {
      console.log('收到 WebSocket 消息:', message)
      if (message.type === 'notice') {
        this.notice = [message.data].concat(this.notice)
        this.noticeCount++
        //弹窗通知有新消息
        this.$notify({
          title: '消息提醒', // 消息标题
          message: message.data.content ? message.data.content : '您收到一条新的系统通知，请及时查看', // 消息内容
          type: 'warning', // 类型：info/success/warning/error
          duration: 5000, // 5秒后自动关闭，0则不自动关闭
          position: 'top-left', // 弹窗位置，可选top-left/bottom-left/bottom-right
          showClose: true, // 显示关闭按钮
          onClick: () => {
          }
        })
        //提醒声音
        this.playNotificationSound()
      }
    })

    // 监听 WebSocket 错误
    window.EventBus.$on('ws:error', (error) => {
      console.error('WebSocket 错误:', error)
    })
  },
  computed: {},
  created() {
    this.query()
  },
  methods: {
    // 播放提示音
    playNotificationSound() {
      const audio = this.$refs.notificationSound
      audio.currentTime = 0 // 重置播放位置（支持连续多次播放）
      audio.play().catch((err) => {
        console.log('提示音播放失败（浏览器限制）：', err)
      })
    },
    /* 查询数据 */
    query() {
      // getUnreadNotice()
      //   .then((result) => {
      //     this.notice = result.notice;
      //     this.letter = result.letter;
      //     this.todo = result.todo;
      //   })
      //   .catch((e) => {
      //     this.$message.error(e.message);
      //   });
      pageNotice({ read: 0 }).then((result) => {
        this.notice = result.list
        this.noticeCount = result.count
      })
    },
    /* 清空通知 */
    clearNotice() {
      setRead({ type: 'all', isRead: 1 })
        .then(() => {
          this.query()
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    goDetail(row) {
      let btn = {
        showCancelButton: false,
        type: 'warning'
      }
      if (row.url) {
        btn = {
          confirmButtonText: '查看详情',
          showCancelButton: false,
          type: 'warning'
        }
      }
      setRead({ ids: [row.id], isRead: 1 })
        .then(() => {
          this.query()
          this.$confirm(row.content, '提示', btn)
            .then(() => {
              let path = row.url
              if (path) {
                this.$router.push({
                  path
                })
              }
            })
            .catch(() => {
              // 取消
            })
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    }
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.EventBus.$off('ws:connected')
    window.EventBus.$off('ws:message')
    window.EventBus.$off('ws:error')
  }
}
</script>

<style lang="scss">
.ele-notice-group {
  display: block;

  .el-badge {
    line-height: 1;
    display: block;
  }
}

/* 消息通知pop */
.ele-notice-pop {
  padding: 0 !important;

  /* tab */
  .el-tabs__nav-scroll {
    text-align: center;
  }

  .el-tabs__nav {
    float: none;
    display: inline-block;
  }

  .el-tabs__item {
    height: 44px;
    line-height: 44px;
    padding: 0 20px !important;
  }

  /* 空视图 */
  .ele-empty {
    padding: 100px 0;
  }
}

/* 列表 */
.ele-notice-list {
  padding-top: 8px;
  max-height: 360px;
  overflow: auto;
}

.ele-notice-item {
  .ele-notice-item-wrapper {
    padding: 12px 15px;
    transition: background-color 0.2s;
    cursor: pointer;

    &:hover {
      background-color: hsla(0, 0%, 60%, 0.05);
    }
  }

  .ele-text-secondary {
    margin-top: 5px;
    font-size: 13px;
  }

  .ele-cell-desc {
    margin-top: 3px !important;
    font-size: 12px !important;
  }
}

.ele-notice-item-icon {
  width: 32px;
  height: 32px;
  line-height: 32px !important;
  color: #fff;
  font-size: 16px;
  background-color: #60b2fc;
  border-radius: 50%;
  text-align: center;

  &.el-icon-s-check {
    background-color: #f5686f;
  }

  &.el-icon-video-camera {
    background-color: #7cd734;
  }

  &.el-icon-s-claim {
    background-color: #faad14;
  }

  &.el-icon-message-solid {
    background-color: #2bcacd;
  }
}

/* 操作按钮 */
.ele-notice-actions > .ele-cell-content {
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  color: inherit;

  &:hover {
    background-color: hsla(0, 0%, 60%, 0.05);
  }
}
</style>
