<template>
  <div class="topic_comment_item" @click="handOnClick(data)">
    <div class="comment_avatar">
      <el-avatar size="medium" :src="data.fromAvatar || ''">{{
        data.fromName.substr(-1)
      }}</el-avatar>
    </div>
    <div class="comment_content">
      <div class="content_title">
        {{ getContentTitle(data) }}
      </div>
      <div class="content_type">{{ data.content }}</div>
      <div class="content_time">
        {{ formatDate(data.createTime) }}
        <div v-if="data.fromUid !== userId.toString()" class="reply_btn">
          回复
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      roleDict: {
        customer: "客户",
        dietician: "主任营养师",
        after_sale: "售后营养师",
        dietician_assistant: "营养师助理",
      },
    };
  },
  props: ["data"],
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    formatDate(date) {
      return dayjs(date).format("MM-DD HH:mm");
    },
    handOnClick(data) {
      this.$emit("click", data);
    },
    getContentTitle(data) {
      return `${this.roleDict[data.fromRole]} - ${data.fromName}${
        data.commentId
          ? ` to ${this.roleDict[data.toRole]} - ${data.toName}`
          : ""
      }`;
    },
  },
};
</script>
<style lang="scss" scoped>
.topic_comment_item {
  margin: 12px;
  display: flex;
  cursor: pointer;

  .comment_avatar {
    flex: 0 0 36px;
  }

  .comment_content {
    flex: 1 0 0;
    margin-left: 8px;

    .content_title {
      font-size: 14px;
      color: #909399;
    }

    .content_type {
      padding: 4px 0;
    }

    .content_time {
      display: flex;
      font-size: 14px;
      color: #8c8c8c;

      .reply_btn {
        margin-left: 16px;
        color: #1890ff;
        // cursor: pointer;
      }
    }
  }
}
</style>
