<template>
	<view class="content">
		<view class="zhuige-info-form-box">
			<!-- 顶部大图及头像 -->
			<view class="zhuige-info-header">
				<!-- 顶部大图 -->
				<image mode="aspectFill" :src="userSpace.user_poster"></image>
				<!-- 头像 -->
				<image @click="upImgs" data-type="2" mode="aspectFill" :src="userSpace.user_avatar"></image>
				<!-- 控制入口 -->
				<view @click="upImgs" data-type="1" class="avatar-opt">
					<view>
						<uni-icons type="camera" size="18"></uni-icons>
					</view>
					<view>{{__('修改背景图')}}</view>
				</view>
			</view>
			<!-- 认证表单 -->
			<view class="zhuige-info-form">

				<view class="zhuige-info-line">
					<view>{{__('签名/介绍')}}</view>
					<view>
						<input type="text" v-model="userSpace.user_sign" :placeholder="__('一句话介绍一下自己吧')" />
					</view>
				</view>
				<view class="zhuige-info-line" v-if="(false)">
					<view>{{__('帖子是否可见')}}</view>
					<view @click="clickAgreeLicense">
						<switch :checked="post" color="#db384c" style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="zhuige-info-line" v-if="(false)">
					<view>{{__('点赞是否可见')}}</view>
					<view @click="clickAgreeLicense">
						<switch :checked="like" color="#db384c" style="transform:scale(0.7)" />
					</view>
				</view>

				<view class="zhuige-info-line" v-if="(false)">
					<view>{{__('收藏是否可见')}}</view>
					<view @click="clickAgreeLicense">
						<switch :checked="collect" color="#db384c" style="transform:scale(0.7)" />
					</view>

				</view>
				<view class="zhuige-info-line" v-if="(false)">
					<view>{{__('评论是否可见')}}</view>
					<view @click="clickAgreeLicense">
						<switch :checked="comment" color="#db384c" style="transform:scale(0.7)" />
					</view>
				</view>
			</view>


		</view>

		<!-- 底部大按钮 -->
		<view @click="clickSubmit()" class="zhuige-base-button">
			<view>{{__('提交')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';


	export default {
		components: {

		},

		data() {
			return {
				userSpace: {},
				post: 0,
				like: 0,
				collect: 0,
				comment: 0,
				sign: '',
				weixin: '',
				reward: '',
				certify: undefined,
				vip: undefined,
			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad(options) {
			var that = this;
			that.forceUserInfo(function(user) {
				that.GetUserSpace();
			});
		},

		onUnload() {

		},

		onShareAppMessage() {},

		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			// ------ event --------
			GetUserSpace: function() {
				var that = this,
					params = {
						user_id: this.userInfo.user_id
					};

				that.$.request({
					url: this.Config.URL.sns.user_space,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {

							that.setData({
								userSpace: data
							});
						} else {
							that.$.alert(msg)
						}

					}
				});
			},
			// ------ event --------

			upImgs: function(e) {
				var that = this;
				var type = e.currentTarget.dataset.type;
				that.$.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: function(n) {
						that.$.showLoading();
						var r = n.tempFilePaths;
						that.$.uploadFile({
							url: that.Config.URL.upload,
							method: 'POST',
							filePath: r[0],
							name: 'upfile',
							// 							header: {
							// 								"content-type": "multipart/form-data"
							// 							},
							success: function(n) {
								that.$.hideLoading();

								var up_res = that.$.parseJSON(n.data);
								var s = up_res.data.url;
								if (type == 1) {
									that.userSpace.user_poster = s;
								} else {
									that.userSpace.user_avatar = s;
								}

							},
							fail: function(e) {
								that.$.hideLoading();
							},
							complete: function(e) {
								that.$.hideLoading();
							}
						});
					},
					fail: function(e) {
						that.$.hideLoading();
					},
					complete: function(e) {
						that.$.hideLoading();
					}
				});
			},

			/**
			 * 点击提交
			 */
			clickSubmit() {
				var that = this;
				let params = {
					user_poster: this.userSpace.user_poster,
					user_avatar: this.userSpace.user_avatar,
					user_sign: this.userSpace.user_sign,
				}


				that.$.request({
					url: this.Config.URL.sns.user_editSpace,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {

							that.$.alert(that.__('修改成功'))
						} else {
							that.$.alert(msg)
						}

					}
				});



			},

			/**
			 * 点击设置封面
			 */
			clickCover() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let path = res.tempFilePaths[0];
						Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
							this.cover = oo.data.src;
						}, err => {
							Alert.error(err);
						});
					},
					fail: (res) => {
						if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
							Alert.error(res.errMsg);
						}
					}
				});
			},

			/**
			 * 点击设置头像
			 */
			clickAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let path = res.tempFilePaths[0];
						Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
							this.avatar = oo.data.src;
						}, err => {
							Alert.error(err);
						});
					},
					fail: (res) => {
						if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
							Alert.error(res.errMsg);
						}
					}
				});
			},

			/**
			 * 点击重新绑定手机号
			 */
			clickMobile() {
				uni.showModal({
					title: '提示',
					content: '要重新绑定手机号吗？',
					success: (res) => {
						if (res.confirm) {
							Util.openLink('/pages/user/login/login?type=mobile')
						}
					}
				});
			},

			/**
			 * 点击设置微信
			 */
			clickWeiXin() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let path = res.tempFilePaths[0];
						Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
							this.weixin = oo.data.src;
						}, err => {
							Alert.error(err);
						});
					},
					fail: (res) => {
						if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
							Alert.error(res.errMsg);
						}
					}
				});
			},

			/**
			 * 点击设置赞赏码
			 */
			clickReward() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let path = res.tempFilePaths[0];
						Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
							this.reward = oo.data.src;
						}, err => {
							Alert.error(err);
						});
					},
					fail: (res) => {
						if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
							Alert.error(res.errMsg);
						}
					}
				});
			},

			/**
			 * 加载数据
			 */
			loadData() {
				Rest.post(Api.URL('user', 'get_info')).then(res => {
					this.cover = res.data.cover;
					this.avatar = res.data.avatar;
					this.nickname = res.data.nickname;
					this.mobile = res.data.mobile;
					this.sign = res.data.sign;
					this.weixin = res.data.weixin;
					this.reward = res.data.reward;

					if (res.data.certify) {
						this.certify = res.data.certify;
					}

					if (res.data.vip) {
						this.vip = res.data.vip;
					}
				}, err => {
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		height: 100%;
		width: 100%;
		overflow-y: scroll;
	}

	.zhuige-info-form-box {
		padding: 20rpx;
		margin-bottom: 160rpx;
	}

	.zhuige-info-header {
		height: 480rpx;
		width: 100%;
		position: relative;
	}

	.zhuige-info-header image:nth-child(1) {
		height: 100%;
		width: 100%;
		border-radius: 12rpx 12rpx 0 0;
	}

	.zhuige-info-header image:nth-child(2) {
		position: absolute;
		z-index: 3;
		right: 30rpx;
		bottom: -80rpx;
		height: 160rpx;
		width: 160rpx;
		border-radius: 50%;
		border: 1rpx solid #EEEEEE;
	}

	.zhuige-info-header .avatar-opt {
		position: absolute;
		z-index: 3;
		left: 30rpx;
		bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.zhuige-info-header .avatar-opt view:nth-child(1) {
		height: 60rpx;
		width: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, .6);
	}

	.zhuige-info-header .avatar-opt view:nth-child(2) {
		padding-left: 16rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: rgba(255, 255, 255, .6);
	}

	.zhuige-info-form {
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 0 0 12rpx 12rpx;
	}

	.zhuige-info-line {
		padding: 30rpx 0;
		border-top: 1rpx solid #EEEEEE;
	}

	.zhuige-info-line>view {
		font-size: 28rpx;
		font-weight: 300;
	}

	.zhuige-info-line>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.zhuige-info-line>view:nth-child(2) input {
		width: 100%;
		font-size: 28rpx;
		font-weight: 300;
	}

	.form-title>view:nth-child(2),
	.form-title>view:nth-child(3) {
		display: flex;
		align-items: center;
		color: #999999;
	}

	.form-title>view:nth-child(2)>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.form-title>view:nth-child(3)>image {
		width: 64rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.zhugie-info-image-upload {
		height: 240rpx;
		width: 240rpx;
		text-align: center;
		border-radius: 12rpx;
		border: 1rpx solid #DDDDDD;
		position: relative;
	}

	.zhugie-info-image-upload uni-icons.plus {
		line-height: 240rpx;
	}

	.zhugie-info-image-upload uni-icons.clear {
		position: absolute;
		z-index: 3;
		right: -20rpx;
		top: -50rpx;
	}

	.zhugie-info-image-upload image {
		height: 100%;
		width: 100%;
		border-radius: 12rpx;
	}

	.zhugie-vip-style {
		display: flex;
		align-items: center;
	}

	.zhugie-vip-style image {
		height: 12px;
		width: 26px;
		margin-rihgt: 12rpx;
	}

	.zhugie-vip-style text {
		font-size: 28rpx;
		font-weight: 400;
	}

	.zhuige-base-button {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		width: 100%;
		padding: 40rpx 0;
		z-index: 3;
	}

	.zhuige-base-button view {
		width: 360rpx;
		text-align: center;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 96rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		background: #db384c;
	}
</style>