<template>
  <div class="comment-empty-wrap">
    <div class="empty-content">
      <div class="empty-img" @click="OPEN_COMENT_INPUT"></div>
      <p class="empty-tip">暂无评论，快来评论吧！</p>
    </div>
  </div>
</template>

<script>

import {createNamespacedHelpers} from 'vuex';

const article = createNamespacedHelpers('article');

export default {
  name: 'CommentEmpty',
  props: {
    click: {
      type: Function,
      required: false
    }
  },
  methods: {
    ...article.mapMutations(['OPEN_COMENT_INPUT'])
  }
};
</script>

<style lang="css" scoped>
  .comment-empty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
  }

  .empty-content {
    margin-top: -10px;
  }

  .empty-img {
    width: 250px;
    height: 181px;
    background-image: url("~statics/image/article/comment-empty.png");
    background-size: 100%;
    margin: 0 auto 20px;
  }

  .empty-tip {
    font-size: 26px;
    color: #b0b0b0;
    font-weight: 300;
  }
</style>