<template>
  <scroll-view
    scroll-y="true"
    @scrolltolower="getListData"
    class="user-box scroll-box">
    <!-- 头像 姓名 职位标签-->
    <div class="header-box clearfix">
      <!-- 获取信息按钮 -->
      <button
        v-if="!userInfo"
        class="getinfo-btn"
        open-type="getUserInfo"
        @getuserinfo="getUserInfo"></button>
      <div class="img fl">
        <img v-if="userInfo" :src="userInfo.avatarUrl" mode="widthFix">
        <img v-else src="../../assets/images/logo3.jpg" mode="widthFix">
      </div>
      <div class="info">
        <div class="name">
          <span>{{userInfo ? userInfo.nickName : '请先登录'}}</span>
        </div>
      </div>
    </div>
    <div class="title">我的收藏</div>
    <div v-if="collectData.length" class="collect-box">
    <div
      v-for="(item, key) in collectData"
      :key="key">
      <article-item
        v-if="item.contentType == 'text'"
        :articleInfo="item"></article-item>

      <media-item
        v-else
        isHideInfo="true"
        :mediaInfo="item"></media-item>
    </div>
    </div>
    <div v-else class="collect-none">
      <img class="img" src="../../assets/images/logo3.jpg">
      <div class="tips">暂无收藏内容</div>
    </div>
  </scroll-view>
</template>

<script>
import { getUserInfo } from '@/utils/index'
import { myCollect } from '@/utils/api'

import mediaItem from '@/components/mediaItem'
import articleItem from '@/components/articleItem'
export default {
  components: {
    mediaItem,
    articleItem
  },
  computed: {
    userInfo () {
      let {nickName = '', avatarUrl = ''} = this.$store.state.userInfo || {}
      return nickName && avatarUrl ? {nickName, avatarUrl} : null
    }
  },
  data () {
    return {
      page: 1,
      limit: 10,
      nomore: false,
      collectData: []
    }
  },
  onShow () {
    this.page = 1
    this.nomore = false
    this.collectData = []
    this.getListData()
  },

  methods: {
    // 获取 用户授权信息
    async getUserInfo (e) {
      let target = e.target

      wx.showLoading({
        title: '获取信息中'
      })
      if (target.errMsg.indexOf('ok') > -1) {
        console.log(e.target)
        console.log(this.$store)
        await getUserInfo(e.target)
      }
      wx.hideLoading()
    },
    async getListData () {
      if (this.nomore) {
        return false
      }
      wx.showLoading({
        title: '加载中'
      })

      let res = await myCollect(this.page, this.limit)
      console.log(res)

      if (res) {
        this.collectData = this.collectData.concat(res.data)
        if (res.total <= this.page * this.limit) {
          this.nomore = true
        } else {
          this.page++
        }
      } else {
        this.nomore = true
      }

      wx.hideLoading()
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.user-box{
  .scroll-box();
  .header-box{
    position: relative;
    margin: 18px @spacing 30px;
    .header-box();
    .getinfo-btn{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    .img{
      border: 0 none;
    }
  }
  .title{
    margin: 0 @spacing 10px;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
  }
  .collect-none{
    margin-top: 45px;
    width: 100%;
    .img{
      margin: 0 auto @spacing;
      width: 114px;
      height: 114px;
    }
    .tips{
      line-height: 20px;
      text-align: center;
      color: #CCCCCC;
    }
  }
}
</style>1
