<import src="../../../templates/toast/toast.wxml" />
<template name="list">
    <view class="list" hover-class="none" data-tip="{{tip}}" data-url="{{url}}" catchtap='navigateTo'>
        <view class="list-text">{{text}}</view>
        <view class="list-info" wx:if="{{!img}}">{{info}}</view>
        <view class="list-info avatar" wx:if="{{img}}"><image src="{{info}}"></image></view>
        <view class="arrow-wrap">{{tip}}<image src="../images/accessory.png" class="list-arrow"></image></view>
    </view>
</template>
<scroll-view scroll-y="trues" class="user">
    <template wx:for="{{list}}" is="list" data="{{...item}}"></template>
</scroll-view>
 <template is="toast" data="{{...toast}}" />

page{
    background-color: #f8f8f8;
}
.user {
    width: 100%;
    height: 100%;
}

.list {
    background: #f8f8f8;
    height: 100.77rpx;
    line-height: 100.77rpx;
    padding: 0 35.15rpx;
    border: 1px solid #f8f8f8;
    background: #fff;
    font-size: 32.81rpx;
}
.list-info{
    display: inline-block;
    position:absolute;
    right:70rpx;
    font-size: 26rpx;
    color: #999;
}
.avatar image {
    margin-top:10rpx;
    width:80rpx;
    height:80rpx;
    border-radius:50%;
}
.info {
    height: 421.85rpx;
    background: url(images/bg.png);
    margin-bottom: 23.44rpx;
}

.info-wrap{
    margin: auto;
    text-align: center;
}

.info-icon {
    width: 164rpx;
    height: 164rpx;
    border: 4.69rpx solid #fff;
    border-radius: 82rpx;
    margin-top: 105.46rpx;
    margin-bottom: 29.29rpx;
}

.list-icon-wrap {
    float: left;
    height: 100.77rpx;
    line-height: 100.77rpx;
}

.list-icon {
    width: 42.18rpx;
    height: 39.84rpx;
    margin-top: 30rpx;
}

.arrow-wrap {
    float: right;
    color: #999;
    line-height: 100.77rpx;
    font-size: 23.44rpx;
}

.list-arrow {
    width: 11.72rpx;
    height: 25.78rpx;
    margin: 35rpx 0 0 18.75rpx;

}

.list-text {
    float: left;
    font-size: 32.81rpx;
    text-indent: 29.29rpx;
}

.order {
    overflow: hidden;
    display: -webkit-box;
    background: #fff;
    margin-bottom: 23.44rpx;
    font-size: 25.78rpx;
    height: 166.40rpx;
}

.order-cell {
    text-align: center;
    -webkit-box-flex: 1;
    margin-top: 42.18rpx;
    position: relative;
}

.order-cell-icon-big {
    width: 51.56rpx;
    height: 46.87rpx;
    margin-bottom: 11.72rpx;
}

.order-cell-icon-small {
    width: 44.53rpx;
    height: 46.87rpx;
    margin-bottom: 11.72rpx;
}

.badge {
    position: absolute;
    left: 52%;
    top: -6%;
    display: inline-block;
    padding: .1rem .25rem;
    font-size: .6rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: .4rem;
    background-color: #fc3151;
    color: white;
    box-sizing: border-box;
    -webkit-transition: all .4s ease-out;
}

import resource from '../../../lib/resource';

const app = getApp();

Page({
  data: {
    loading : true
  },
  onLoad() {
    this.setData({
      list: [{
        text: '头像',
        tip: '',
        img: true,
        info: app.globalData.userInfo.avatarUrl
      }, {
        text: '昵称',
        tip: '',
        url: 'username-edit/username-edit',
        info: app.globalData.userInfo.nickName
      }, {
        text: '绑定手机号',
        tip: '',
        url: 'tel-bind/tel-bind',
        info: app.globalData.userInfo.mobile || '尚未绑定'
      }]
    });
  },
  navigateTo(e) {
    const url = e.currentTarget.dataset.url;
    const that = this;
    if (url === undefined) {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success(res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          console.log(tempFilePaths[0]);
          wx.uploadFile({
            url: resource.getUrl('/wx/upload'), // 仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              user: 'test'
            },
            success(res) {
              if(res.statusCode != 200) {
                 resource.showTips(that, '图片上传失败');
                 console.log(res);
                 return;
              }
              var icon = res.data;
              resource.updateUserInfo({icon:icon}).then(res=>{
                  if(res.statusCode == 200) {
                     app.globalData.userInfo.avatarUrl = res.data.data.icon;
                     resource.showTips(that, '修改成功');
                     that.onLoad();
                  } else {
                     resource.showTips(that, '修改失败');
                  }
              });
            },
            fail(res) {
              console.log(res);
              resource.showTips(that, '图片上传失败');
            }
          });
        }
      });
    } else {
      wx.navigateTo({
        url
      });
    }
  }
});