<template>
  <view class="page-container">
    <view class="feedback-container">
      <view class="card">
        <view class="card-content">
          <view v-for="(item, index) in list" :key="index" class="feedback-item">
            <view class="content">
              <text class="item-tag">{{item.gbook_type_name}}</text>{{item.gbook_content}}
            </view>
            <view class="time">{{formatTime(item.gbook_time)}}</view>
            <view class="reply" :class="item.gbook_reply && 'replyed'">
              小编回复：{{ item.gbook_reply || '请耐心等待小编回复..' }}
            </view>
          </view>
        </view>
        <view class="load-more">
          <u-loadmore :status="loadStatus" loading-icon="semicircle" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      list: [],
      page: 1,
      refreshTriggered: false,
      loadStatus: 'loadmore'
    }
  },
  onPullDownRefresh() {
    this.refreshTriggered = true
    this.loadStatus = 'loadmore'
    this.page = 1
    this.list = []
    this.getData()
  },
  onReachBottom() {
    this.getData()
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    async getData() {
      if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
        return
      }
      this.loadStatus = 'loading'
      await user.gbookList(this.page).then(res => {
        if (res.code == 1) {
          if (res.data.page < res.data.page_total) {
            this.loadStatus = 'loadmore'
            this.page++
          } else {
            this.loadStatus = 'nomore'
          }
          this.list = this.list.concat(res.data.list)
        } else {
          this.loadStatus = 'loadmore'
        }
      }).catch(e => {
        this.loadStatus = 'loadmore'
      })
      if (this.refreshTriggered) {
        this.refreshTriggered = false
        uni.stopPullDownRefresh()
      }
    }
  }
}
</script>

<style lang="scss">
.page-container {
	 background-color: $uni-bg-color;
  .feedback-container {
    padding: 15px;
    .feedback-item {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e8e9ec;
      &:last-child {
        margin-bottom: 0;
      }
      .content {
        line-height: 22px;
        font-size: 14px;
        font-weight: 400;
        color: #1a1a2a;
        .item-tag {
          height: 24px;
          margin-right: 8px;
          padding: 0 5px;
          color: $uni-color-primary;
          border: 1px solid $uni-color-primary;
          border-radius: 4px;
          display: inline-block;
        }
      }
      .time {
        margin-top: 5px;
        font-size: 11px;
        font-weight: 400;
        color: #91919b;
      }
      .reply {
        margin-top: 5px;
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #93939d;
        line-height: 22px;
        background-color: #f5f5f5;
        border-radius: 8px;
        &.replyed {
          color: #f57a50;
        }
      }
    }
  }
}
</style>