<template>
	<view class="page">
		<view class="top">
			<view class="left">
				<avatar :userName="userInfo.real_name" size="90"></avatar>
			</view>
			<view class="user-info">
				<view class="other-info">
					<view class="follow">
						<view class="one-top">{{userInfo.followNumber}}</view>
						<view class="one-bottom">关注</view>
					</view>
					<view class="fans">
						<view class="one-top">{{userInfo.fansNumber}}</view>
						<view class="one-bottom">粉丝</view>
					</view>
					<view class="score">
						<view class="one-top">{{userInfo.integral}}</view>
						<view class="one-bottom">积分</view>
					</view>
				</view>
				<view class="info-bottom">
					<view class="follow-button" v-if="userInfo.isFollow === 0" @tap="addFollow(userInfo)">关注</view>
					<view class="follow-button-ed" v-if="userInfo.isFollow === 1" @tap="cancelFollow(userInfo)">已关注</view>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="cu-item content">
				<textarea v-model="userInfo.signature"
							auto-height="true"
							maxlength=2000
							disabled="false"
				></textarea>
			</view>
		</view>
		<view class="bottom">
			<view class="noData" v-if="noData === true">
				<noData :custom="true"><view class="title" @tap="update()">暂无数据,点击重新加载</view></noData>
			</view>
			<view class="list cu-card article dynamic" v-else-if="noData === false">
				<view class="cu-item" style="padding:0" v-for="(item,index) in noticeList" :key="index" v-if="item.is_pass === '1'">
					<view class="cu-list menu solid-bottom" @click="goToDetails(item)">
						<view class="cu-item arrow" style="min-height: 90rpx;padding-top: 10rpx;">
							<view class="action">
								<view class="action">
									<view class='cu-tag radius bg-orange light margin-right-xs' v-if="item.type === '校园通知'">{{item.type}}</view>
									<view class='cu-tag radius bg-blue light margin-right-xs' v-if="item.type === '家长建议'">{{item.type}}</view>
									<view class='cu-tag radius bg-green light margin-right-xs' v-if="item.type === '学生想法'">{{item.type}}</view>
									<text class="text-black text-lg">{{item.title}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="text-content" style="margin:10rpx 0 0 0;">
						<text class="text-gray">文章标签：</text>
						<text class="">{{item.label}}</text>
					</view>
					<view class="text-content" style="margin:10rpx 0 0 0;">
						<text class="text-gray">发表时间：</text>
						<text class="">{{item.release_time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js';
	import noData from '@/components/noData/noData.vue';
	import { sortBy } from '@/static/js/public.js';	
	import avatar from "@/pages/components/avatar/avatar.vue";
	export default {
		components: {
			noData,
			avatar
		},
		data() {
			return {
				//用户ID
				userId: '',
				//用户信息
				userInfo: {},
				//无数据
				noData: false,
				//个人文章列表
				noticeList: [],
			}
		},
		onLoad(option) {
			this.userId = option.userId;
		},
		mounted() {
			this.getUserInfo();
		},
		onPullDownRefresh () {
			this.getUserInfo();
		},
		onNavigationBarButtonTap() {
			uni.setStorageSync("otherInfo",this.userInfo);
			uni.navigateTo({
				url: "/pages/tabbar/message/chat-page"
			})
		},
		methods: {
			/**
			 * 加关注
			 * @param {Object} userInfo
			 */
			addFollow(userInfo) {
				request.post("/hs/addFollow",{
					userId: uni.getStorageSync("userInfo").user_id,
					followId: userInfo.user_id
				}).then(res => {
					this.getUserInfo();
					console.log("加关注",res)
				},err => {
					console.log("err",err)
				})
			},
			/**
			 * 取消关注
			 * @param {Object} userInfo
			 */
			cancelFollow(userInfo) {
				let _this = this;
				uni.showModal({
					title: "取消关注",
					content: "确认取消关注？",
					success(res) {
						if (res.confirm) {
							request.post("/hs/cancelFollow",{
								userId: uni.getStorageSync("userInfo").user_id,
								followId: userInfo.user_id
							}).then(res => {
								_this.getUserInfo();
								console.log("取消关注",res)
							},err => {
								console.log("err",err)
							})
						}
					}
				})
			},
			/**
			 * 跳转详情页面
			 * @param {Object} item
			 */
			goToDetails(item) {
				uni.navigateTo({
					url: '/pages/tabbar/homepage/data-details?noticeId='+item.id
				})
			},
			/**
			 * 获取个人信息
			 */
			getUserInfo() {
				request.post("/hs/getPersonalInfo",{
					userId: uni.getStorageSync("userInfo").user_id,
					releaseId: this.userId
				}).then(res => {
					uni.startPullDownRefresh();
					console.log("个人信息",res);
					this.userInfo = res.data.personalInfo;
					this.userInfo.headerPhoto = this.userInfo.real_name.slice(0,1);
					this.noticeList = res.data.personalList;
					this.noData = res.data.personalList.length === 0 ? true : false;
					uni.setNavigationBarTitle({
						title: this.userInfo.real_name
					})
				},err => {
					console.log("err",err);
				}) 
			}
		}
	}
</script>

<style scoped>
	.middle{
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(18,150,219,0.5);
	}
	.cu-item{
		background-color: #cfcfcf!important;
		margin: 16rpx 0!important;
	}
	.follow-button-ed{
		width: 80%;
		border: 1rpx solid #969696;
		color: #8d8d8d;
		text-align: center;
		border-radius: 10rpx;
	}
	.top .left{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.info-bottom{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.follow-button{
		color: #FFFFFF;
		width: 80%;
		background-color: #269FDE;
		text-align: center;
		border-radius: 10rpx;
	}
	.grade .r, .grade .l{
		font-size: 14rpx;
		padding: 5rpx;
		border-radius: 5rpx;
	}
	.grade .l{
		background-color: #9DC75F;
	}
	.grade .r{
		background-color: #2D5315;
	}
	.user-info view{
		padding: 10rpx 10rpx;
	}
	.other-info .one-top, .other-info .one-bottom{
		text-align: center;
	}
	.other-info{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		color: #9a9a9a;
		font-size: 30rpx;
	}
	.info-top{
		display: flex;
		flex-flow: nowrap;
		color: #7f7f7f;
	}
	.user-info{
		display: flex;
		flex-flow: column;
		justify-content: center;
		border-radius: 10rpx;
		width: 70%;
		font-size: 32rpx;
	}
	.content {
		background-color: #F1F1F1;
		width: 100%;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	textarea{
		line-height: 1.5;
		width: 100%;
		height: 100%;
	}
	.top{
		display: flex;
		justify-content: space-between;
	}
	.page{
		padding: 20rpx;
		display: flex;
		flex-flow: column;
		background-color: #FFFFFF;
	}
</style>
