<template>
  <div>
    <a-comment v-for="(comment, index) in commentData" :key="index">
      <template slot="actions">
        <span key="comment-basic-like">
          <a-tooltip :title="$tc('common.prompt.like')">
            <a-icon
              type="like"
              :style="comment[props['action']] === 'liked' ? 'color: red' : ''"
              :theme="comment[props['action']] === 'liked' ? 'filled' : 'outlined'"
              @click="like(comment)"/>
          </a-tooltip>
          <span style="padding-left: 8px;cursor: auto">
            {{ comment[props.likes] }}
          </span>
        </span>
        <span key="comment-basic-dislike">
          <a-tooltip :title="$tc('common.prompt.disLink')">
            <a-icon
              type="dislike"
              :style="comment[props['action']] === 'disliked' ? 'color: red' : ''"
              :theme="comment[props['action']] === 'disliked' ? 'filled' : 'outlined'"
              @click="dislike(comment)"
            />
          </a-tooltip>
          <span style="padding-left: 8px;cursor: auto">
            {{ comment[props.dislikes] }}
          </span>
        </span>
        <span key="comment-basic-reply-to" @click="onReply(comment)">{{ $tc('common.button.reply') }}</span>
        <slot name="actions"></slot>
      </template>
      <a slot="author">
        <slot name="author" :row="comment">
          {{ comment[props.author] ? comment[props.author] : '张三' }}
        </slot>
      </a>
      <slot name="avatar" :row="comment">
        <a-avatar
          slot="avatar"
          :src="comment[props.avatar] ? comment[props.avatar] : 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'"
          alt="Han Solo"
        />
      </slot>
      <div slot="content" style="line-height: 2;font-family: 'JetBrains Mono', monospace">
        <slot name="content" :row="comment">
          <div v-html="comment[props.content]"></div>
        </slot>
      </div>
      <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
        <slot name="datetime" :row="comment">
          <span>{{ moment(comment[props.time]).fromNow() }}</span>
        </slot>
      </a-tooltip>
    </a-comment>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "CmsComment",
  data() {
    return {
      moment,
    }
  },
  methods: {
    onReply(comment) {
      this.$emit('reply', comment)
    },
    like(comment) {
      this.$emit('like', 'liked', comment)
    },
    dislike(comment) {
      this.$emit('dislike', 'disliked', comment)
    },
  },

  props: {
    commentData: {
      type: Array,
      default: []
    },
    showLink: Boolean, // 是否显示连接
    linkClick: Function,
    props: {
      type: Object,
      default: () => {
        return {
          author: 'author',
          time: 'time',
          avatar: 'avatar',
          content: 'content',
          dislikes: 'dislikes',
          likes: 'likes',
          action: 'action'
        }
      }
    }
  }
}
</script>

<style lang="scss">
.ant-comment-inner {
  display: flex;
  padding: 0;
}

.ant-comment-actions {
  //text-align: right !important;
  margin-top: 0 !important;

  * {
    font-size: 14px;
  }
}

.ant-comment-content {
  dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0.5rem !important;
  }
}
</style>