
<template>
  <div class="message-item-wrapper">
    <div class="message-item-content">
      <div class="message-title d-flex">
        <div v-show="message.isRead === '0'" class="dot" />
        <span class="ml5 title-content">{{ message.title }}</span>
      </div>
      <p>{{ message.createTime }}</p>
    </div>
    <div class="message-item-option">
      <pre class="message-item-tips">{{ message.content }}</pre>
      <!--      {{ message.content }}-->
      <!--      <p class="message-item-tips" v-html="message.content">-->
      <!--        <el-button type="text" size="small">立即查看 ></el-button>-->
      <!--      </p>-->
      <el-button v-if="message.isRead === '0'" v-has-permi="['message:info:remove']" type="text" size="small" @click="handleSetRead">标记已读</el-button>
      <el-button v-else v-has-permi="['message:info:remove']" type="text" size="small">已读</el-button>
    </div>
  </div>
</template>
<script>
import { setRead } from '@/api/system/message'

export default {
  name: 'MessageListItem',
  props: {
    message: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleSetRead() {
      setRead(this.message.id).then(() => {
        this.$emit('ok')
      })
    }
  }
}
</script>
<style scoped lang="scss">
@mixin d-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.message-item-wrapper {
  padding:4px;
  .message-title {
    width: 80%;
    justify-content: start;
    .title-content {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      width: 100%;
    }
  }
  &:hover {
    cursor: pointer;
    background-color: rgba(247, 247, 247, 1);
  }
  .message-item-content, .message-item-option {
    @include d-flex
  }
  .message-item-content {
    .dot {
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background-color: #ff4949;
    }
    font-size: 14px;
  }
  .message-item-tips {
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    line-height: 18px;
    color: #C0C4CC;
    margin-left: 6px;
  }
}

</style>
