<template>
	<view>
		<topnav :title='pageTitle' @tohome='tohome'></topnav>
		<view class="content">
			<view class="pageTitle">个人信息</view>
			<view class="listBox mp-20">
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						头像
					</view>
					<view class="listBoxItemRight" @click="chooseImg">
						<image :src="info.avatar_url" class="iconface"></image>

						<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						账户名
					</view>
					<view class="listBoxItemRight">
						{{info.name}}
					</view>
				</view>
			</view>
			<view class="pageTitle">版本信息</view>
			<view class="listBox mp-20" >
				<view class="listBoxItem" >
					<view class="listBoxItemLeft">
						当前版本
					</view>
					<view class="listBoxItemRight" @click="bindSet">
						V2.0
					</view>
				</view>
			</view>
			<view class="btnQuit" @tap="bindQuit">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	import topnav from '@/components/topnav/topnav.vue'; //1.导入组件
	export default {
		components: {
			topnav
		}, //2.注册组件
		data() {
			return {
				pageTitle: "设置",
				userName: "",
				iconFace: "",
				avatar: "",
				info: {}

			}
		},
		onLoad: function() {
			this.loadInfo();
		},
		methods: {
			tohome:function(){
				uni.navigateTo({
					url:"../index/index"
				})
			},
			bindSet:function(){
				uni.navigateTo({
					url:"../printSet/printSet"
				})
			},
			loadInfo: function() {
				var that = this;
				util.request({
					bindThis: that,
					api: 'manager/me',
					customLoading: false,
					method: "POST",
					utilSuccess: function(r) {
						that.info = r;
						console.log(r)
					},
					utilFail: function(res) {}
				});
			},
			update: function() {
				var that = this;
				util.request({
					bindThis: that,
					api: 'manager/update',
					customLoading: false,
					data: that.info,
					method: "POST",
					utilSuccess: function(r) {
						util.alert("头像已更新");
					},
					utilFail: function(res) {}
				});
			},
			chooseImg: function(e) {
				let that = this;
				var user = uni.getStorageSync('userInfo');
				uni.chooseImage({
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						that.info.avatar_url = tempFilePaths[0];

						uni.uploadFile({
							url: util.HOST + 'manager/upload-image',
							//仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'token': user.access_token,
								'folder': 'public'
							},

							success(res) {
								if (res.statusCode == "200") {
									var mod = JSON.parse(res.data);
									that.info.avatar = mod.public_path;
									that.update()
								} else {
									uni.showToast({
										title: '上传出现错误'
									});
								}
							}

						});
					}

				});
			},
			bindQuit: function() {
				uni.showModal({
					title: '消息提示',
					content: '确认退出当前账号',
					success: function(res) {
						if (res.confirm) {

							util.request({
								api: 'manager/logout',
								method: 'POST',
								utilSuccess: function(res) {
									uni.clearStorageSync();
									uni.reLaunch({
										url: '/pages/login/login'
									});
								},
								utilFail: function(res) {
									console.log(res)
								}
							});

						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		padding-top: 160rpx;
	}

	.content {
		overflow: hidden;
	}


	.iconface {
		border: 4rpx solid #FFFFFF;
		border-radius: 100%;
		width: 90rpx;
		height: 90rpx;
	}

	.icon-Icons_ToolBar_ArrowRight {
		color: rgba(0, 0, 0, 0.45);
		font-size: 24rpx;
	}
</style>
