<template>
  <!-- 评论 -->
  <main-page
    left-arrow
    :title="title"
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 pb-16 px-4">
      <comment
        v-for="c in commentList"
        :key="c.id"
        :comment="c"
        class="last:border-0"
        @click-comment="reply"
      />
    </div>
    <div class="fixed bg-white py-2.5 px-4 bottom-0 left-0 w-full">
      <input
        :placeholder="placeholder"
        type="text"
        class="text-xs py-2 px-4 rounded-full bg-input-bg w-full"
      >
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { Comment, commentList } from '@/DTO/comment'

export default Vue.extend({
  name: 'CommentList',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-tag': () => import('@/components/common/c-tag.vue'),
    'comment': () => import('@/views/schedule/components/comment.vue')
  },
  data() {
    return {
      commentList,
      title: '',
      placeholder: '添加评论'
    }
  },
  methods: {
    reply(comment: Comment) {
      console.log(comment, 'reply')
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
