<template>
<view class="container">
	<block v-if="isload">
		<view class="pages-hd" :style="'padding-top:' + menuButtonTop + 'px;height:' + (menuButtonHeight+95) + 'px'">
			<image class="pages-hd__bg" :src="event_rul +'/static/images/userinfo-bg.png'" mode="widthFix"></image>
			<view class="pages-hd__navigation flex al-item-center" :style="'height:' + menuButtonHeight + 'px'">
				<text class="iconfont icon-icon_arrow_left"></text>
				<view class="pages-hd__title">编辑资料</view>
			</view>
		</view>
		<view class="content">
			<view class="user-hd flex j-center">
				<image class="user-hd__img" :src="userinfo.headimg" style="width:156rpx;height:156rpx;" />
			</view>
			<view class="info-item flex" >
				<view class="info-item__hd flex al-item-center">
					<text class="iconfont icon-wode"></text>
					<text class="info-item__hd-title">昵称</text>
				</view>
				<view class="info-item__bd light">{{userinfo.nickname}}</view>
			</view>
			<view class="info-item flex" >
				<view class="info-item__hd flex al-item-center">
					<text class="iconfont icon-wode1"></text>
					<text class="info-item__hd-title">ID</text>
				</view>
				<view class="info-item__bd light">{{userinfo.id}}</view>
			</view>
			<view class="info-item flex" @tap="goto" data-url="/pages/my/setvita">
				<view class="info-item__hd flex al-item-center">
					<text class="iconfont icon-jianjie-03"></text>
					<text class="info-item__hd-title">个人简介</text>
				</view>
				<view class="info-item__bd flex" :class="{'light':userinfo.autograph}">
					<view class="info-item__bd-txt">{{userinfo.autograph ? userinfo.autograph : '有趣的简介可以吸引粉丝'}}</view>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
<!-- 			<view class="info-item" @tap="goto" data-url="setrealname">
				<view class="t1">姓名</view>
				<view class="t2">{{userinfo.realname}}</view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
			<view class="info-item" @tap="goto" data-url="settel">
				<view class="t1">手机号</view>
				<view class="t2">{{userinfo.tel}}</view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view> -->
			<view class="info-item flex" @tap="goto" data-url="/pages/my/setsex">
				<view class="info-item__hd flex al-item-center">
					<text class="iconfont icon-nvsheng"></text>
					<text class="info-item__hd-title">性别</text>
				</view>
				<view class="info-item__bd flex" :class="{'light' : userinfo.sex == 1 || userinfo.sex == 2}">
					<view class="info-item__bd-txt">{{userinfo.sex != 1 ? (userinfo.sex == 2 ? '女': '未知') : '男'}}</view>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="info-item flex" @tap="goto" data-url="/pages/my/setbirthday">
				<view class="info-item__hd flex al-item-center">
					<text class="iconfont icon-dangao"></text>
					<text class="info-item__hd-title">生日</text>
				</view>
				<view class="info-item__bd flex" :class="{'light':userinfo.birthday}">
					<view class="info-item__bd-txt">{{userinfo.birthday ? userinfo.birthday : '未知'}}</view>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view>
		
		<!-- <view class="content">
			<view class="info-item" @tap="goto" data-url="setweixin">
				<view class="t1">微信号</view>
				<view class="t2">{{userinfo.weixin}}</view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
			<view class="info-item" @tap="goto" data-url="setaliaccount">
				<view class="t1">支付宝账号</view>
				<view class="t2">{{userinfo.aliaccount}}</view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
			<view class="info-item" @tap="goto" data-url="setbankinfo">
				<text class="t1">银行卡</text>
				<text class="t2">{{userinfo.bankname ? '已设置' : ''}}</text>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
		</view> -->
		
	<!-- 	<view class="content">
			<view class="info-item" @tap="goto" data-url="/pages/address/address">
				<view class="t1">收货地址</view>
				<view class="t2"></view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
		</view>
		<view class="content" v-if="userinfo.haspwd==1">
			<view class="info-item" @tap="goto" data-url="/pages/my/setpwd">
				<view class="t1">修改密码</view>
				<view class="t2"></view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
		</view>
		<view class="content">
			<view class="info-item" @tap="goto" data-url="/pages/index/login">
				<view class="t1">切换账号</view>
				<view class="t2"></view>
				<image class="t3" :src="event_rul +'/static/img/static/img/arrowright.png'"/>
			</view>
		</view> -->
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
	<!-- 悬浮按钮 -->
	<drag-button></drag-button>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
		opt:{},
		loading:false,
		isload: false,
		menuindex:-1,
		menuButtonTop: 0,
		menuButtonHeight: 0,

		userinfo:{},

		event_rul: app.globalData.event_url,
    };
  },

  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getdata();

		// #ifdef MP
		// 获取右上角胶囊坐标信息
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.menuButtonTop = menuButtonInfo.top;  // 胶囊到顶部的距离
		this.menuButtonHeight = menuButtonInfo.height;  // 胶囊的高度
		// #endif
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('ApiMy/set', {}, function (data) {
				that.loading = false;
				that.userinfo = data.userinfo;
				that.loaded();
			});
		},
		uploadHeadimg:function(){
			var that = this;
			app.chooseImage(function(urls){
				var headimg = urls[0];
				that.userinfo.headimg = headimg;
				app.post('ApiMy/setfield',{headimg:headimg});
			},1)
		}
  }
};
</script>
<style lang="scss">
.container {background:#FFFFFF;min-height: 100vh;}
.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.pages-hd {
	padding: 0 30rpx;box-sizing: content-box;
	&__bg {position: absolute;top: 0;left: 0;width: 100%;z-index: 0;}
	.icon-icon_arrow_left {font-size: 46rpx; color: #FFFFFF;flex-shrink: 0;}
	&__title {font-size: 32rpx;color: #FFFFFF; flex: 1;text-align: center;padding-right: 46rpx;}
}
.content {background:#FFFFFF;padding: 100rpx 40rpx 0; position: relative;border-radius: 12rpx 12rpx 0 0;}
.user-hd {
	margin-top: -83rpx;position: absolute;left: 0;right: 0;top: 0;
	&__img {width: 166rpx;height: 166rpx;border-radius: 50%;}
}
.info-item {
	align-items: flex-start;padding: 24rpx 0;font-size: 28rpx;line-height: 40rpx;
	&:not(:last-child) {border-bottom: 1px #f3f3f3 solid;}
	&__hd {
		width: 30%;
		.iconfont {
			font-size: 32rpx;margin-right: 22rpx;font-weight: bold;
			&.dangao {font-weight: normal;}
		}
		&-title {font-weight: bold;color: #333333;}
	}
	&__bd {
		flex: 1;justify-content: flex-start;text-align: right;color: #333333;
		&.light {
			font-weight: bold;
			.info-item__bd-txt {color: #333333;}
		}
		&-txt {
			color: #999999;flex: 1;
		}
		.iconfont {font-size: 38rpx;flex-shrink: 0;}
	}

}
.info-item:last-child{border:none}
.info-item .t1{ width: 200rpx;color: #8B8B8B;font-weight:bold;height:92rpx;line-height:92rpx}
.info-item .t2{ color:#444444;text-align:right;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
.info-item .t3{ width: 26rpx;height:26rpx;margin-left:20rpx}
.img-ac {border-radius: 400rpx;}

</style>