<template>
  <el-popover placement="top-end" width="400" trigger="click">
    <div class="msg">
      <div class="msg--hd">
        <span>消息通知</span>
      </div>
      <div v-if="messageList.length > 0" class="msg--bd">
        <div v-for="(data, index) in messageList" :key="data.id" class="item">
          <div v-if="data.status === 0" @click="readMessage(data, index)">
            <em>[未读] {{ data.title }}</em>
            <p>{{ data.messageContent }}</p>
            <p>{{ parseTime(data.createTime) }}</p>
          </div>
          <div v-else-if="data.status === 1" class="is-read">
            <em>[已读] {{ data.title }}</em>
            <p>{{ data.messageContent }}</p>
            <p>{{ parseTime(data.createTime) }}</p>
          </div>
        </div>
      </div>
      <div v-else class="msg--bd">
        <p style="text-align: center">暂无消息</p>
      </div>
      <div class="msg--ft">
        <el-button
          v-if="messageList.length > 0"
          size="mini"
          type="text"
          style="margin-right: auto"
          @click="batchReadMessage()"
        >我知道了</el-button>
        <el-button type="text" size="mini" @click="clickMessage()">
          查看更多消息<i class="el-icon-d-arrow-right" />
        </el-button>
      </div>
    </div>
    <el-badge slot="reference" :value="messageTotle" :max="99">
      <svg-icon icon-class="bell" />
    </el-badge>
  </el-popover>
</template>

<script>
import { readMessage, batchReadMessage } from '@/api/workflow/message'
import store from '@/store'
export default {
  name: 'Msg',
  data() {
    return {}
  },
  computed: {
    messageList() {
      if (
        store.state.message.list !== null &&
        typeof store.state.message.list !== 'undefined'
      ) {
        return store.state.message.list
      } else {
        return []
      }
    },
    messageTotle() {
      if (
        store.state.message.total !== null &&
        typeof store.state.message.total !== 'undefined'
      ) {
        return store.state.message.total
      } else {
        return 0
      }
    }
  },
  created() {},
  methods: {
    // 查看更多消息
    clickMessage() {
      this.$router.push('/workflow/message')
    },
    // 阅读通知
    readMessage(data, index) {
      readMessage(data.id).then((response) => {
        if (response.code === 200 && data.status === 0) {
          store.state.message.list[index].status = 1
          store.state.message.total = store.state.message.total - 1
        }
      })
    },
    // 批量阅读通知
    batchReadMessage() {
      batchReadMessage()
      store.state.message.total = 0
      store.state.message.list = this.messageList.forEach((e) => {
        e.status = 1
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-badge__content.is-fixed {
  font-size: 10px;
  border: 0;
  height: 14px;
  line-height: 14px;
}
.msg {
  &--hd {
    border-bottom: #f0f0f0 1px solid;
    padding-bottom: 8px;
  }
  &--bd {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .item {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      padding: 4px 8px;
      &:hover {
        background-color: #f9f9f9;
        color: #333;
        border-radius: 8px;
      }
      .is-read {
        color: #ccc;
        em {
          color: #ccc;
        }
      }
      em {
        font-weight: 600;
        font-size: 14px;
        font-style: normal;
        color: var(--primary-color);
      }
      p {
        margin: 0;
        padding: 4px 0;
        font-size: 12px;
      }
    }
  }
  &--ft {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: #f0f0f0 1px solid;
    padding: 10px 8px 0;
  }
}
</style>
