<template>
  <view class="page-container">
    <z-paging
      ref="paging"
      v-model="dynamicList"
      :paging-style="{
        background: '#F7FFFF',
      }"
      @query="queryList"
    >
      <!-- 我的动态 -->
      <my-dynamic-list :data-list="dynamicList"></my-dynamic-list>

      <template v-slot:empty>
        <u-empty
          :text="!isLogin ? '您还没有登录' : '暂无相关动态~'"
          icon="/static/common/logo1.png"
        >
          <u-button
            size="small"
            text="去登录"
            color="linear-gradient(to right, #35c99d, #27aea7)"
            :customStyle="{ marginTop: '20rpx' }"
            v-if="!isLogin"
            @click="goLogin"
          >
          </u-button>
        </u-empty>
      </template>
    </z-paging>
  </view>
</template>

<script>
import { myDynamicList } from '@/api/dynamic.js'
import MyDynamicList from './components/my_list.vue'

export default {
  components: {
    MyDynamicList,
  },
  data() {
    return {
      isLogin: false,
      dynamicList: [],
    }
  },
  onLoad() {
    this.isLogin = !!uni.getStorageSync('wx_copenid')
  },
  methods: {
    queryList(pageNo, pageSize) {
      let params = {
        pageNum: pageNo,
        pageSize: pageSize,
      }
      myDynamicList(params).then(res => {
        if (
          res.data.code === 200 &&
          res.data.data.records &&
          res.data.data.records.length > 0
        ) {
          let data = res.data.data.records
          data.forEach(item => {
            item.publishTime = item.publishTime
              .replace('T', ' ')
              .substring(0, 16)
          })
          this.$refs.paging.complete(data)
        } else {
          this.$refs.paging.complete([])
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page-container {
  background-color: #f7ffff;

  .tab-box {
    height: 90rpx;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    padding-left: 20rpx;
    background: linear-gradient(180deg, #c1fff8 0%, #b8fff3 34%, #f5ffff 100%);
    z-index: 999;

    .item {
      height: 55%;
      padding: 0 12rpx;
      display: flex;
      align-items: center;
    }
  }
}
</style>