<template>
	<view class="content">
<!--		<cu-custom bgColor="bg-white" :isBack="false">-->
<!--			<block slot="content">-->
<!--				个人信息-->
<!--			</block>-->
<!-- 		</cu-custom>-->
    <view class="cu-bar fixed padding flex align-center" :style="[{height:CustomBar + 'rpx'}]" style="background-color: #EDEDED ;">
      <view class="action" @tap="backPage" >
        <text class="cuIcon-close" style="color: #666666;"></text>
      </view>
      <view class="content" style="font-weight: bold;">
        订单详情
      </view>
      <view  class="cuIcon-more" style="font-size: 40rpx;">
      </view>
    </view>
        <view class="bg-ff margin-top15 border-radius20 box color-33">
          <view  style="height: 50px;">

          </view>
            <view class="flex align-center justify-between item-box item-box-header">
                <view>头像</view>
                <view class="flex align-center" @tap="chooseHeader()">
<!--                    <view  v-if="!obj.url" class="user-img"></view>-->
                    <u-image
                             :src="userInfo.avatar"
                             :fade="true" duration="450" width="88rpx" height="88rpx" shape="circle"></u-image>
                    <u-icon name="arrow-right" class="down-img text-sm"></u-icon>
                </view>
            </view>
            <view class="flex align-center justify-between item-box">
                <view>手机号</view>
                <view class="text-bold">{{userInfo.phone}}</view>
            </view>
            <view class="flex align-center justify-between item-box" @tap="goUserNickName(userInfo.nikeName,userInfo.serverId)">
                <view>昵称</view>
                <view class="flex align-center">
                    <view class="text-bold" style="margin-right:16rpx;">{{userInfo.nikeName}}</view>
                    <u-icon name="arrow-right" class="down-img text-sm"></u-icon>
                </view>
            </view>
            <view class="flex align-center justify-between item-box">
                <view>所属公司</view>
                <view class="text-bold">{{userInfo.merchantName}}</view>
            </view>
            <view class="flex align-center justify-between item-box">
                <view>工龄</view>
                <view class="text-bold">{{userInfo.serverAge}}年</view>
            </view>
            <view class="flex align-center justify-between item-box" style="border:none;">
                <view>服务范围</view>
                <view class="text-bold break-word" style="text-align:right;max-width:420rpx;">{{userInfo.detail}}半径{{userInfo.serviceDistance}}公里</view>
            </view>
        </view>

        <view class="bg-ff margin-top15 border-radius20 text-box color-33">
            <view class="text-title flex align-center justify-between" @tap="goUserProfile(userInfo.desc,userInfo.serverId)">
                <view class="text-bold">个人简介</view>
                <u-icon name="arrow-right" class="down-img text-sm"></u-icon>
            </view>
            <view class="text-profile padding color-66 break-word">
              {{userInfo.desc}}
            </view>
        </view>

        <view class="btn-box flex justify-center" @click="logOut">
            <view class="btn">退出当前账户</view>
        </view>

        <com-select-picture :show="actionHeaderShow" :length="1" @addProperties="chooseImageSuccess" @cancelSheet="cancelSheetClick" chooseUploadFileType='image'></com-select-picture>

	</view>
</template>

<script>
	export default {            
		data() {
			return {
				title: 'Hello',
                actionHeaderShow: false,
        obj:{},
        userInfo:{},
			}
		},
    // created(){
    //   this.getUserInfo();
    // },
		onLoad() {
      this.getUserInfo();
		},
		methods: {
      backPage(){
        uni.redirectTo({
          url: '../index/indexChoice'
        });
      },
      logOut(){
        // uni.setStorageSync("token","")
        debugger
        uni.clearStorage();
        uni.reLaunch({
          url: '../login/indexChoice'
        })
      },
      getUserInfo() {
        var that = this;
        that.serverId = uni.getStorageSync('userInfo').serverId;
        if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
          uni.reLaunch({
            url: '../login/indexChoice'
          })
        } else {
          that.$u.api.getUserInfo({serverId: that.serverId}).then(res => {
            if (res.code === 200) {
              that.userInfo = res.data;
            }
          })
        }
      },
      chooseHeader() {
          this.actionHeaderShow = true
      },
       //图片上传成功
      chooseImageSuccess(url) {
          let obj = {
              resourceType: "002",
              url: url,
              faceImg: "",
          };
          this.obj=obj
          // this.resources.push(obj);
          this.$u.api.updateUserInfo({serverId: this.serverId,avatar:url}).then(res => {
            if (res.code === 200) {
              this.getUserInfo();
            }
          })
          this.$api.msg("图片上传成功");
      },

      //图片取消上传
      cancelSheetClick() {
          this.actionHeaderShow = false;
      },

      //昵称
      goUserNickName(name,id){
          uni.navigateTo({
              url: `./userNickName?name=${name}&id=${id}`
          });
      },

      //简介
      goUserProfile(profile,id){
          uni.navigateTo({
              url: `./userProfile?profile=${profile}&id=${id}`
          });
      },

		}
	}
</script>

<style lang="less" scoped>
.box {
    padding: 0 35rpx;
    overflow: hidden;
}

.item-box {
    border-bottom: 2rpx solid #eee;
    padding: 30rpx 0;
    padding-left: 4rpx;
    padding-right: 15rpx;
    .user-img {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        margin-right: 24rpx;
        background: #eee;

    }
}
.item-box-header {
    height: 130rpx;
}
.text-title {
    height: 110rpx;
    padding: 0 25rpx 0 15rpx;
}
.text-box {
    padding: 0 25rpx 50rpx;
}
.text-profile {
    background: #FAFAFA;
    border: 2rpx solid #eee;
    border-radius: 15rpx;
}
.btn-box {
    margin-top: 43rpx;
    padding-bottom: 40rpx;
    .btn {
        width: 600rpx;
        height: 90rpx;
        color: #EE4A2B;
        line-height: 90rpx;
        text-align: center;
        font-size: 32rpx;
        background: #F6F6F6;
        border-radius: 45rpx;
        border: 2rpx solid #FC6035;
    }
}


</style>
