<template>
  <div class="comment">
    <span v-if="readCount >= 0" style="color:#969799;font-size:0.14rem">
      阅读量：{{ readCount || 0 }}
    </span>
    <van-grid :column-num="3" class="btnTool" :border="false">
      <van-grid-item
        :icon="isFablous ? 'good-job' : 'good-job-o'"
        @click="fabulous"
        :badge="diggCount"
      />
      <van-grid-item
        :icon="isCollect ? 'star' : 'star-o'"
        @click="$emit('changeColl')"
      />
      <van-grid-item
        icon="comment-o"
        :badge="commentCount"
        @click="showDialog = !showDialog"
      />
    </van-grid>
    <div v-if="commentList && commentList.length" class="ment">
      <van-cell-group>
        <van-cell
          v-for="item in commentList"
          :key="item.id"
          :title="item.nickName"
          :value="item.createTime"
          :label="item.content"
        />
      </van-cell-group>

      <van-button
        style="margin: 0 auto;display: block"
        :loading="more"
        v-if="commentList.length < commentCount"
        loading-text="加载中..."
        @click="$emit('upset')"
      >
        加载更多
      </van-button>
    </div>
    <van-empty v-else description="暂无评论" />
    <van-overlay :show="showDialog" @click="showDialog = false">
      <div class="diaContent" @click.stop>
        <div class="body">
          <div class="title">评论</div>
          <van-cell-group>
            <van-cell title="">
              <template #label>
                <van-field
                  v-model="value"
                  rows="1"
                  autosize
                  type="textarea"
                  placeholder="请输入评论"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <van-button block @click="sendComment" type="default">
          发送
        </van-button>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {
  CellGroup as vanCellGroup,
  Grid as vanGrid,
  GridItem as vanGridItem,
  Button as vanButton,
  Empty as vanEmpty,
  Field as vanField,
  Overlay as vanOverlay,
  Cell as vanCell,
  Toast
} from "vant";
import "vant/lib/cell-group/style";
import "vant/lib/grid-item/style";
import "vant/lib/button/style";
import "vant/lib/field/style";
import "vant/lib/overlay/style";
import "vant/lib/empty/style";
import "vant/lib/cell/style";
import "vant/lib/toast/style";
import "vant/lib/grid/style";
import { getComment } from "@/api/article/article.js";
export default {
  name: "app",
  props: {
    diggCount: {
      type: Number,
      value: 0
    },
    commentCount: {
      type: Number,
      value: 0
    },
    readCount: {
      type: Number,
      value: 0
    },
    commentList: {
      type: Array,
      value: []
    },
    more: {
      type: Boolean,
      value: false
    },
    isFablous: {
      type: Boolean,
      value: false
    },
    isCollect: {
      type: Boolean,
      value: false
    },
    id: {
      type: String,
      value: ""
    }
  },
  data: function() {
    return {
      value: "",
      showDialog: false
    };
  },
  methods: {
    fabulous() {
      // 点赞
      this.$emit("changeFab", !this.isFablous);
    },
    sendComment() {
      // 写入评论
      if (!this.value) return;
      getComment({
        articleId: this.id,
        content: this.value
      }).then(() => {
        this.showDialog = false;
        this.value = "";
        this.$emit("upset");
        Toast("添加成功！");
      });
    }
  },
  computed: {},
  mounted() {},
  beforeDestroy: function() {},
  components: {
    vanCellGroup,
    vanGridItem,
    vanButton,
    vanEmpty,
    vanField,
    vanCell,
    vanOverlay,
    vanGrid
  }
};
</script>
<style lang="scss" scoped>
.ment {
  padding-bottom: 30px;
  .commentTitle {
    color: #969799;
    font-size: 14px;
    padding: 0 16px;
    .van-col {
      height: 2em;
      line-height: 2em;
    }
  }
  .commentBody {
    padding: 0 16px;
    .van-hairline--top {
      padding: 3px 0;
    }
  }
}
.diaContent {
  transform: translate(-50%, -50%);
  width: 80%;
  border-radius: 1em;
  overflow: hidden;
  position: absolute;
  background-color: #fff;
  left: 50%;
  top: 50%;
  .van-button {
    border-top: 0.01rem solid #ebedf0;
  }

  .body {
    .title {
      text-align: center;
      height: 2.5em;
      line-height: 2.5em;
    }
  }
}
</style>
<style lang="scss">
.comment {
  .btnTool {
    .van-grid-item__icon {
      font-size: 0.2rem;
    }
  }
}
</style>
