<template>
    <div class="reply">
      <van-nav-bar
        :left-text="`回复(${replyCount})`"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="reply-current reply-list__item" @click="_commentSecond(replyItem, 1)">
        <img :src="replyItem.avatar" alt="">
        <div class="flex-1">
          <p class="text1-2 mb-8">{{ replyItem.nickname || replyItem.username }}</p>
          <p>{{ replyItem.content }} <span
            class="text1-2">{{ replyItem.mtime }}</span></p>
        </div>
        <div class="d-flex flex-column align-items-center">
          <van-icon class="mb-8" name="like" size="16" :color="replyItem.is_like === 0 ? '#999999' : 'red'"
                    @click="_commentLike(replyItem, -1)"/>
          <p class="text1-2">{{ replyItem.like_num }}</p>
        </div>
      </div>
      <div class="reply-list__label">全部回复</div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="_list"
        >
          <template v-for="(item, index) in list">
            <div class="reply-list__items" :key="item.id">
              <div class="reply-list__item" @click="_commentSecond(item, 0)">
                <img :src="item.avatar" alt="">
                <div class="flex-1 content">
                  <p class="text1-2 mb-8">{{ item.nickname || item.username }}</p>
                  <p>{{ item.content }} <span
                    class="text1-2">{{ item.mtime }}</span></p>
                </div>
                <div class="d-flex flex-column align-items-center">
                  <van-icon class="mb-8" name="like" size="16" :color="item.is_like === 0 ? '#999999' : 'red'"
                            @click="_commentLike(item, index)"/>
                  <p class="text1-2">{{ item.like_num }}</p>
                </div>
              </div>
              <div class="reply-comment text1-3" v-if="item.reply_user.length !== 0">
                <div>@{{ item.reply_user.nickname || item.reply_user.username }}: {{ item.reply_user.content }}</div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
      <div class="reply-field">
        <van-field
          v-model="replyValue"
          center
          clearable
          :placeholder="replyPlaceholder"
        >
          <template #button>
            <van-button size="small" type="default" @click="_comment">发送</van-button>
          </template>
        </van-field>
      </div>
    </div>
</template>

<script>
export default {
  name: 'reply',
  data () {
    return {
      replyItem: null,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 0,
      replyValue: '',
      replyPlaceholder: '',
      commentId: null,
      replyCount: 0
    }
  },
  created () {
    if (this.$route.params.item.id) {
      this.replyItem = this.$route.params.item
    } else {
      this.replyItem = this.$store.state.replyItem
    }
    window.console.log(this.replyItem)
    this.replyPlaceholder = `回复${this.replyItem.nickname || this.replyItem.username}:`
    this.$store.commit('setReplyItem', this.replyItem)
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    _commentLike (item, index) {
      if (item.is_like === 0) {
        this.$http.video.like({ vid: item.id }).then(({ code }) => {
          if (code === 200) {
            this._computeLike(index, 1)
          }
        })
      } else {
        this.$http.video.cancelLike({ vid: item.id }).then(({ code }) => {
          if (code === 200) {
            this._computeLike(index, 0)
          }
        })
      }
    },
    _computeLike (index, type) {
      if (index === -1) {
        this.replyItem.is_like = type ? 1 : 0
        if (type) {
          this.replyItem.like_num += 1
        } else {
          this.replyItem.like_num -= 1
        }
      } else {
        this.list[index].is_like = type ? 1 : 0
        if (type) {
          this.list[index].like_num += 1
        } else {
          this.list[index].like_num -= 1
        }
      }
    },
    _comment () {
      if (!this.replyValue) {
        return this.$toast('请输入回复内容')
      }
      this.$http.video.comment({
        type: this.replyItem.type,
        vid: this.replyItem.vid,
        pid: this.replyItem.id,
        comment_id: this.commentId,
        content: this.replyValue
      }).then(({ code, msg }) => {
        if (code === 200) {
          this.$toast.success(msg)
          this.refreshing = true
          this.onRefresh()
          this.replyValue = ''
        }
      })
    },
    _commentSecond (item, type) {
      if (type) {
        this.commentId = null
      } else {
        this.commentId = item.id
      }
      this.replyPlaceholder = `回复${item.nickname || item.username}:`
    },
    _list () {
      this.$http.video.commentTable({
        type: this.replyItem.type,
        vid: this.replyItem.vid,
        pid: this.replyItem.id,
        page: this.refreshing ? this.page = 1 : this.page += 1
      }).then(({ data, code }) => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        if (code === 200) {
          this.replyCount = data.total
          if (data.current_page === 1) {
            this.list = data.list
          } else {
            this.list = this.list.concat(data.list)
          }
          this.loading = false
          if (data.total_page === data.current_page || data.total_page === 0) {
            this.finished = true
          }
        }
      })
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this._list()
    }
  }
}
</script>

<style lang="scss" scoped>
.reply {
  padding-bottom: 50px;
  &-current {
    margin-bottom: 15px;
  }
  &-list {
    &__label {
      background-color: #ffffff;
      padding: 10px;
    }
    &__items {
      position: relative;
      line-height: 24px;
      &:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    &__item {
      padding: 10px;
      display: flex;
      background-color: #ffffff;
      .content {
        padding-right: 8px;
      }
      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
  &-field {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  &-comment {
    background-color: #ffffff;
    padding-left: 66px;
    padding-bottom: 10px;
    >div {
      border-left: 1px solid #ebedf0;
      padding-left: 8px;
    }
  }
}
</style>
