<template>
  <div id="comments" class="comments-area clearfix">
		<h3 class="comments-count section-heading uppercase"><span>{{ total }} コメント</span></h3>
    <div v-if="total === 0">コメントがありません。</div>
    <span v-else>
      <ul class="commentlist" v-for="(c, i) in comment" :key="`comment-${i}`">
        <li class="comment even thread-even depth-1" :id="`li-comment-${c.id}`">
          <div class="commentnumber">{{ i+1 }}</div>
          <div :id="`comment-${c.id}`">
            <div>
              <cite class="fn">{{ (c.name || '名無しのテクニシャン') }}</cite> <span class="says">より:</span>
              <span class="comment-meta commentmetadata"> <a :href="`/blog/${slug}#comment-${c.id}`">{{ c.created }}</a></span>
            </div>
            <p>{{ c.message }}</p>
            <div class="reply">返信</div>
          </div>
        </li>
      </ul>
    </span>
    <hr />
    <div v-if="err" class="alert alert-danger">{{ err }}</div>
    <div class="form-group row">
      <div class="col-md-4 col-lg-3">名前</div>
      <div class="input-group col-md col-lg">
        <input type="text" id="new-name" class="form-control" v-model="newComment.name" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" />
      </div>
    </div>
    <div class="form-group row">
      <div class="col-md-4 col-lg-3">メールアドレス</div>
      <div class="input-group col-md col-lg">
        <input type="text" id="new-mail" class="form-control" v-model="newComment.mail" placeholder="返信される場合、メールに通知を送ります。" />
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-lg-3">本文</div>
      <div class="col-md col-lg">
        <textarea class="form-control" id="new-message" rows="16" v-model="newComment.text"></textarea>
      </div>
    </div>
    <div class="row" style="margin-top: 16px;">
      <div class="col">
        <button type="button" class="btn btn-block btn-primary" @click="send">送信</button>
      </div>
    </div>
	</div>
</template>

<script>
  export default {
    props: { slug: '', comments: Array },
    data: function () { return { comment: this.comments, newComment: {}, err: '', loading: true, sending: false } },
    computed: {
      total: function () {
        return this.comment.length;
      }
    },
    created: function () { this.reset(); },
    methods: {
      reset () {
        this.loading = false;
        this.newComment.name = '';
        this.newComment.mail = '';
        this.newComment.text = '';
      },
      send () {
        this.err = '';
        this.sending = true;

        axios.post('/api/comment/new', {
          comment: this.newComment,
          slug: this.slug
        }).then(res => {
          this.sending = false;
          if (res.data.status === '010100') { this.comment.push(res.data.result); this.reset(); }
          else this.err = 'エラーコード【' + res.data.status + '】' + res.data.message;
        }).catch(err => {
          this.sending = false;
          this.err = 'サーバーエラーコード【' + err.response.status + '】' + err.response.data.message;
        });
      }
    }
  }
</script>

<style scoped>
  .fn {
    font-size: 16px;
    font-style: normal;
    color: #20ec77;
  }
  .comment-meta a {
    color: #bdc3c7;
  }
  .commentlist p {
    margin: 0 0 10px;
    padding: 10px 0 40px 0;
    font-size: 20px;
  }
  .commentnumber {
    float: left;
    margin-right: 5px;
    font-size: 16px;
  }
  ul {
    list-style: none;
  }
</style>
