<view class="container">

  <!-- login success -->
  <view>
    <block wx:if="{{hasLogin === true}}">
      <!-- list -->
      <view class="index-bd">
        <view class="kind-list">
          <block wx:for-items="{{list}}" wx:key="{{item.id}}">
            <view class="kind-list-item">
              <navigator url="{{item.toUrl}}">
                <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}">
                  <view class="kind-list-text">{{item.title}}</view>
                  <image class="kind-list-img" src="../resources/kind/{{item.id}}.png"></image>
                </view>
              </navigator>
            </view>
          </block>
        </view>
      </view>
    </block>
  </view>


  <view class="page-body">
    <view class="page-section">

      <block wx:if="{{hasLogin === false}}">
        <block wx:if="{{hasUserInfo === false}}">
          <text class="page-body-text">未获取到微信用户信息</text>
        </block>

        <block wx:if="{{hasUserInfo === true}}">
          <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
        <button class="page-body-button" type="primary" bindtap="login">确认登录</button>
      </block>

    </view>
  </view>

</view>

@import "../common/index.wxss";
@import "../common/lib/weui.wxss";

.page-section {
  margin-top: 350rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.page-body-text {
  color: #bbb;
  font-size: 28rpx;
  line-height: 40rpx;
  margin: 0 0 100rpx 0;
  text-align: center;
}
.page-body-button {
  margin-top: 20rpx;
  width: 100%;
}
.weui-cell{
    padding: 12px 15px 12px 35px;
}

/* get user info */
.userinfo-avatar {
  border-radius: 128rpx;
  width: 128rpx;
  height: 128rpx;
}
.userinfo-nickname {
  margin-top: 20rpx;
  font-size: 38rpx;
}

/* user info list */
.evaluation-text {
  font-size: 12px;
}
.kind-list-img {
  margin-right: 5px;
  width: 14px;
  height: 14px;
}

var app = getApp()
Page({
  // data
  data: {
    hasUserInfo: false,
    hasLogin: false,
    // list 
    list: [
      {
        id: 'view',
        title: '个人信息',
        open: false,
        pages: ['view', 'scroll-view', 'swiper'],
        toUrl: '../home-page-my-info/home-page-my-info'
      }, {
        id: 'form',
        title: '我的投票',
        open: false,
        toUrl: '../home-page-my-vote/home-page-my-vote'
      }
    ],
  },

  onLoad: function () {
    this.setData({
      hasLogin: app.globalData.hasLogin
    })
    this.getUserInfo();
  },

  // get the user info 
  getUserInfo: function () {
    var that = this

    if (app.globalData.hasLogin === false) {
      wx.login({
        success: _getUserInfo
      })
    } else {
      _getUserInfo()
    }

    function _getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          that.setData({
            hasUserInfo: true,
            userInfo: res.userInfo
          })
          that.update()
        }
      })
    }
  },

  // login 
  login: function () {
    this.setData({
      hasLogin: true
    })
  },

  // logout 
  clear: function () {
    this.setData({
      hasUserInfo: false,
      userInfo: {}
    })
  }
})