<template>
	<view>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<u-modal v-model="modelShow" :mask-close-able="true" :show-cancel-button="true" @confirm="delConfirm" :content="modelContent"></u-modal>
		<u-action-sheet v-if="type == 'user'" :list="userStatusList" :safe-area-inset-bottom="true" @click="changeUserStatus" v-model="userStatusBool"></u-action-sheet>
		<view class="user-box">
			<image :src="info.avatar" class="user-avatar" mode="aspectFill"></image>
			<view class="user-right">
				<view class="user-right-item user-name">
					<text class="nickname-text">{{info.nickname_origin ? info.nickname_origin:info.nickname}}</text>
					<text v-if="info.remark">(<text class="nickname-text">{{info.remark}}</text>)</text>
				</view>
				<view class="user-right-item">{{info.bio}}</view>
				<view v-if="type == 'user'" @click="userStatusBool = (info.id == userinfo.id ? true:false)" :class="'user-status-' + info.status.value" class="user-right-item user-status"> • {{info.status.chinese}}</view>
				<view v-if="type == 'group' || type == 'service'" class="user-right-item user-status">{{info.other}}</view>
			</view>
			<view v-if="info.friend && (info.id != userinfo.id)" class="collection-user">
				<u-icon @click="collectionUser" color="#6388fb" :name="(info.group == 'common') ? 'star-fill':'star'"></u-icon>
			</view>
		</view>
		<u-cell-group v-if="(type == 'group' && !info.deletetime) || type == 'user' || type == 'service'" :border="false" class="user-info-box">
			
			<block v-for="(item,index) in detail" :key="index">
				<!-- 在u-cell-item内的v-if失效了？ -->
				<u-cell-item v-if="item.type && item.type == 'leader'" hover-class="none" :border-top="false" :border-bottom="false" :arrow="false" :title="item.title">
					<navigator :url="'/pages/center/info?type=user&id=' + item.leader.id" class="leader-avatar-box" slot="right-icon">
						<image :src="item.leader.avatar" class="leader-avatar" mode="widthFix"></image>
						<u-icon name="arrow-right"></u-icon>
					</navigator>
				</u-cell-item>
				<u-cell-item v-else-if="item.name == 'id'" @click="clipboardId(item.value)" hover-class="none" :border-top="false" :border-bottom="false" :arrow="false" :title="item.title">
					<view slot="right-icon">{{item.value}}</view>
				</u-cell-item>
				<u-cell-item v-else hover-class="none" :border-top="false" :border-bottom="false" :arrow="false" :title="item.title">
					<view slot="right-icon">{{item.value}}</view>
				</u-cell-item>
			</block>
			
			<navigator v-if="type == 'group'" :url="'/pages/center/group_chat_notice?group_id=' + info.id">
				<u-cell-item hover-class="none" :border-top="false" :border-bottom="false" title="群公告"></u-cell-item>
			</navigator>
			<navigator v-if="type == 'group'" :url="'/pages/center/group_chat_users?id=' + info.id">
				<u-cell-item hover-class="none" :border-top="false" :border-bottom="false" title="群成员列表"></u-cell-item>
			</navigator>
			
			<u-cell-item v-if="(type == 'user') && info.friend && (info.id != userinfo.id)" hover-class="none" :border-bottom="false" :border-top="false" :arrow="true" title="备注">
				<view slot="right-icon">
					<u-input @blur="saveRemark" placeholder="请输入备注内容" :clearable="false" input-align="right" type="text" v-model="info.remark" :border="false" />
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="im-data-none" v-if="type == 'group' && info.deletetime">群聊已解散~</view>
		<view class="user-buttons">
			<u-button @click="userAction(item.action, item.data, item.type, item.opt)" v-for="(item,index) in buttons" :key="index" :type="item.btype">{{item.name}}</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				type: '',
				userStatusBool: false,
				userStatusList: [{
					text: '在线',
					color: '#21E589'
				}, {
					text: '忙碌',
					color: '#FF647E'
				}, {
					text: '隐身',
					color: '#FF9C4E'
				}],
				info: {
					status: {
						value: 0,
						chinese: '加载中'
					}
				},
				detail: [],
				buttons: [],
				userinfo: [],
				modelShow: false,
				modelContent: '',
				commonTips: ''
			}
		},
		onLoad:function(query){
			this.id = query.id ? query.id:0
			this.type = query.type ? query.type:'user'
			this.userinfo = uni.getStorageSync('userinfo');// 防止需要在pageDataLoad使用到用户ID
			this.ws.pageFun(this.pageDataLoad, this);
		},
		onShow() {
			this.ws.checkNetwork(this)
			if (this.ws.pageRefresh.centerInfo) {
				this.ws.pageRefresh.centerInfo = false
				this.ws.pageFun(this.pageDataLoad, this);
			}
		},
		onPullDownRefresh: function () {
			this.ws.pageFun(this.pageDataLoad(true), this);
			this.ws.onMessageCallBack.set('info-detail', (msg) => {
				if (msg.data.data.refresh) {
					this.$refs.uToast.show({
						title: '刷新成功~',
						type: 'success'
					})
					uni.stopPullDownRefresh()
				}
			})
		},
		methods: {
			pageDataLoad: function (refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'infoDetail',
					data: {
						'method': 'get',
						'type': that.type,
						'id': that.id ? that.id:that.userinfo.id,
						'requestor': that.userinfo.id,
						'refresh': refresh
					}
				})
			},
			changeUserStatus: function (index) {
				var that = this
				that.ws.pageFun(function () {
					that.ws.send({ c: 'ImBase', a: 'changeStatus', data: { 'status': (index + 1) } });
				}, that);
			},
			userAction: function (action, data, type, opt) {
				if (action == 'del-contact') {
					switch (type) {
						case 'user':
							this.modelContent = '你确定要删除此好友吗？';
							break;
						case 'group':
							this.modelContent = '你确定要退出群聊吗？';
							break;
						case 'dissolution-group':
							this.modelContent = '你确定要解散群聊吗？';
							type = 'group';
							break;
					}
					this.modelShow = true
					this.info.delType = type
				} else if(action == 'open-session') {
					let message = { c: 'Message', a: 'openSession', data: { 'id': data, 'type': type } }
					this.ws.send(message);
				} else if(action == 'add-friends') {
					uni.navigateTo({
						url: '/pages/search/add-contact?id=' + data + '&type=' + type
					})
				} else if(action == 'userinfo-opt') {
					if (opt == 'edit') {
						uni.navigateTo({
							url: '/pages/center/edit-info?id=' + data + '&type=' + type
						})
					} else if(opt == 'join') {
						uni.navigateTo({
							url: '/pages/search/add-contact?id=' + data + '&type=' + type
						})
					}
				} else if (action == 'close') {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			delConfirm: function () {
				var that = this
				that.ws.pageFun(function(){
					let message = {
						c: 'User',
						a: 'delContact',
						data: {
							'id': that.info.id,
							'type': that.info.delType
						}
					}
					that.ws.send(message);
				}, that)
			},
			saveRemark: function (value) {
				if (value != this.info.oldRemark) {
					let message = {
						c: 'User',
						a: 'updateFriendInfo',
						data: {
							id: this.info.id,
							new_remark: value,
							method: 'update_remark'
						}
					}
					this.ws.send(message);
				}
			},
			collectionUser: function () {
				var that = this
				that.ws.pageFun(function(){
					var new_group = 'common'
					if (that.info.group == 'common') {
						new_group = 'all_friends'
					}
					let message = {
						c: 'User',
						a: 'updateFriendInfo',
						data: {
							id: that.info.id,
							new_group: new_group,
							method: 'update_group',
							source: 'uni-app'
						}
					}
					that.ws.send(message);
					that.info.group = new_group
					that.ws.showMsgCallback = function () {
						that.ws.pageRefresh.addressList = true
					}
				}, that)
			},
			clipboardId: function(id) {
				var that = this
				uni.setClipboardData({
					data: id.toString(),
					success: function () {
						uni.hideToast()
						that.$refs.uToast.show({
							title: '账号已复制~',
							type: 'success'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: $--bg-color;
}
.user-box {
	display: flex;
	padding: 20rpx 4vw;
	align-items: center;
}
.user-avatar {
	height: 170rpx;
	width: 170rpx;
}
.collection-user {
	display: flex;
	align-items: center;
	justify-content: center;
}
.user-right {
	width: 70%;
	padding-left: 20rpx;
}
.user-right-item {
	display: block;
	line-height: 32rpx;
}
.user-name {
	line-height: 46rpx;
	font-size: 30rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.nickname-text {
	display: inline-flex;
	max-width: 46%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.user-status {
	color: $--gray;
	line-height: 46rpx;
}
.user-info-box {
	display: block;
	width: 92vw;
	margin: 0 auto;
	padding-top: 10rpx;
}
.user-buttons {
	padding: 40rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.leader-avatar-box {
	display: flex;
	align-items: center;
}
.leader-avatar {
	height: 80rpx;
	width: 80rpx;
	margin-right: 10rpx;
}
.im-data-none {
	display: block;
	line-height: 100rpx;
	text-align: center;
	font-size: 28rpx;
	color: $--gray;
}
</style>
