<include src="/components/header.wxml" />

<view class="container" wx:if="{{isFound}}">
  <view class="user">
    <view class="avatar">
      <image src="https:{{avatarPath}}"></image>
      <text>ONLINE</text>
    </view>
    <view class="intro">
      <view>{{userName}}</view>
      <text>V2EX 第 {{id}} 号会员,加入于 {{created}}</text>
    </view>
  </view>
  <view class="collection">
    <view>
      <view>0</view>
      <text>节点收藏</text>
    </view>
    <view>
      <view>0</view>
      <text>主题收藏</text>
    </view>
    <view>
      <view>0</view>
      <text>特别关注</text>
    </view>
  </view>
  <view class="topic">
    <image src="{{avatarPath}}"></image>
    <picker-view class="pickerview">
      <picker-view-column>
        <view>{{userName}} 的所有主题</view>
        <view>123</view>
        <view>abc</view>
      </picker-view-column>
    </picker-view>
  </view>
  <view class="reply">
    <view>{{userName}} 最近回复了</view>
    <navigator url="/pages/gravatar/gravatar" open-type="redirect">» {{userName}} 创建的更多回复</navigator>
  </view>
</view>

<view class="container" wx:if="{{!isFound}}">
  <include src="/components/crumbs.wxml" />
  <view class="not-found">未找到用户</view>
</view>

<include src="/components/footer.wxml" />

/*********容器**********/

.container {
  display: flex;
  flex-direction: column;
  width: 95%;
  margin: 0 auto;
}

.container > view {
  margin-bottom: 15rpx;
  border-radius: 10rpx;
  background-color: #fefefe;
  box-shadow: 2px 2px 3px #00343f;
}

/*********容器**********/

/*********user**********/

.user {
  background-color: #fff;
  height: 180rpx;
  display: flex;
  justify-content: space-between;
}

.user .avatar {
  box-sizing: border-box;
  padding: 10rpx 0 30rpx;
  width: 150rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.user .avatar image {
  width: 75rpx;
  height: 75rpx;
  border-radius: 10rpx;
}

.user .avatar text {
  display: block;
  width: 104rpx;
  height: 28rpx;
  line-height: 28rpx;
  border-radius: 20rpx;
  background-color: #4aa210;
  font-size: 22rpx;
  color: #fff;
  text-align: center;
}

.user .intro {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.user .intro view {
  font-weight: bolder;
  font-size: 40rpx;
}

.user .intro text {
  font-size: 25rpx;
  color: #999;
}

/*********user**********/

/*********collection**********/

.collection {
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.collection > view {
  flex: 1;
  height: 80rpx;
  border-right: 1px solid #eee;
  text-align: center;
}

.collection > view:last-of-type {
  border: 0;
}

.collection text {
  color: #999;
  font-size: 28rpx;
}

/*********collection**********/

/*********topic**********/

.topic {
  padding: 0 30rpx;
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topic image {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
}

.pickerview {
  width: 40%;
  height: 100%;
}

.pickerview view{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*********topic**********/

/*********reply**********/
.reply{
  font-size: 26rpx;
}
.reply > view{
  padding-left: 10rpx;
  height: 45rpx;
  line-height: 45rpx;
  border-bottom: 1px solid #eee;
  color: #999;
}
.reply > navigator{
  padding-left: 10rpx;
  height: 65rpx;
  line-height: 65rpx;
  align-items: center;
  color: #777;
}
/*********reply**********/

/*********not found 样式**********/

.not-found {
  text-align: center;
  color: #999;
  font-size: 30rpx;
  height: 50rpx;
  line-height: 50rpx;
}

/*********not found 样式**********/

import format from '../../utils/format.js'

Page({
  onLoad() {
    this.initData()
    this.renderCrumbs()
  },
  renderCrumbs() {
    let
      pages = getCurrentPages(),
      routes = {}

    for (let page of pages) {
      let
        path = page.route,
        pageName = page.route.split('/')[1]

      routes[pageName] = path
    }

    this.setData({ routes })
  },
  initData() {
    let
      data = getApp().globalData.userInfo,
      isFound = data.status === 'found',
      id = data.id,
      avatarPath = data.avatar_mini,
      userName = data.username,
      created = format(data.created)

    this.setData({ isFound, id, avatarPath, userName, created })
  }
})