<template>
  <view class="page-container">
    <z-paging
      ref="paging"
      v-model="dynamicList"
      :paging-style="{
        background: '#F7FFFF',
      }"
      @query="queryList"
    >
      <template #top>
        <view class="tab-box">
          <view
            v-for="(item, index) in tabList"
            :key="index"
            :class="{ item: true, active: current === index }"
            @click="onTabChange(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </template>

      <!-- 我的动态 -->
      <my-dynamic-list
        v-if="current === 0"
        :data-list="dynamicList"
      ></my-dynamic-list>

      <!-- 草稿动态 -->
      <draft-dynamic-list
        v-if="current === 1"
        :data-list="dynamicList"
      ></draft-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 v-if="isLogin && current === 0" class="add-btn" @click="goPublish">
      <image src="/static/discover/subtract.png" mode="" />
    </view>
  </view>
</template>

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

export default {
  components: {
    MyDynamicList,
    DraftDynamicList,
  },
  data() {
    return {
      isLogin: false,
      dynamicList: [],
      current: 0,
      tabList: [
        {
          name: '我的动态',
          value: -1,
        },
        {
          name: '草稿箱',
          value: 0,
        },
      ],
    }
  },
  onLoad() {
    this.isLogin = !!uni.getStorageSync('wx_copenid')
  },
  onShow() {
    this.queryList(1, 10)
  },
  methods: {
    queryList(pageNo, pageSize) {
      let params = {
        pageNum: pageNo,
        pageSize: pageSize,
      }
      const api = this.current == 0 ? myDynamicList : draftDynamicList
      api(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([])
        }
      })
    },
    onTabChange(index) {
      this.current = index
      this.$refs.paging.reload()
    },
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/wxLogin',
      })
    },
    goPublish() {
      uni.navigateTo({
        url: '/pages/my/dynamic/add_dynamic',
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page-container {
  background-color: #f7ffff;
  font-family: PingFang SC, PingFang SC;

  .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;
    }

    .active {
      font-weight: 500;
      font-size: 30rpx;
      color: #03c8be;
      position: relative;

      &::after {
        content: '';
        width: 48rpx;
        height: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #03c8be;
      }
    }
  }

  .add-btn {
    position: fixed;
    bottom: 50rpx;
    right: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    z-index: 99;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}
</style>