<template>
	<view class="notice">
		<view class="user-list">
			<view class="head">
				<view class="search-wrapper">
					<!-- <block v-for="(item,index) in menus" :key="index">
						<view class="box" @click="$push(item.path,item)">
							<view class="btn">
								<image :src="item.icon" mode="widthFix"></image>
							</view>
							<text>{{ item.title }}</text>
							<u-badge max="99" absolute :offset="[-2,-5]" :value="item.value"></u-badge>
						</view>
					</block> -->
					<view class="box" @click="$push(menus[0].path,menus[0])">
						<view class="btn">
							<image src="@/static/icon/notice-01.png" mode="widthFix"></image>
						</view>
						<text>喜欢我</text>
						<u-badge max="99" absolute :offset="[-2,-5]" :value="unReadLikeMeNumber"></u-badge>
					</view>
					<view class="box" @click="$push(menus[1].path,menus[1])">
						<view class="btn">
							<image src="@/static/icon/notice-02.png" mode="widthFix"></image>
						</view>
						<text>我喜欢</text>
					</view>
					<view class="box" @click="$push(menus[2].path,menus[2])">
						<view class="btn">
							<image src="@/static/icon/notice-03.png" mode="widthFix"></image>
						</view>
						<text>评论</text>
						<u-badge max="99" absolute :offset="[-2,-5]" :value="unReadCommentNumber"></u-badge>
					</view>
					<view class="box" @click="$push(menus[3].path,menus[3])">
						<view class="btn">
							<image src="@/static/icon/notice-04.png" mode="widthFix"></image>
						</view>
						<text>看过我</text>
						<u-badge max="99" absolute :offset="[-2,-5]" :value="unReadLookNumber"></u-badge>
					</view>
				</view>
			</view>
			<u-list height="88vh" v-if="isLogin">
				<view class="list">
					<u-swipe-action auto-close>
						<u-list-item v-for="(item, index) in conversationArr" :key="item.id">
							<u-swipe-action-item
								closeAfterClick
								:index="item.id"
								:options="options"
								@click="RemoveFriend(item.friendId)" 
								:key="item.id"
								autoClose
							>
							  <u-cell isLink @click="onUserDetail(item)">
								<view slot="title" class="nickname">
									{{ item.friendInfo.nickname }}
								</view>
								<view slot="icon" :iconStyle="iconStyle" class="head avatar2">
									<u-avatar size="50" :src="item.friendInfo.avatar" shape="square" mode="aspectFill"
										customStyle="margin: -3px 5px -3px 0"></u-avatar>
									<view>
										<u-badge type="error" max="99" shape="circle" :absolute="true" :offset="[-8,-2]" :value="item.unRead"></u-badge>
									</view>
								</view>
								<view slot="label">
									<rich-text class="content" :nodes="item.content"></rich-text>
								</view>
								<view slot="right-icon">
									
									<view class="fans">{{ new Date(item.updateTime).getTime() | timeFrom }}</view>
								</view>
							  </u-cell>
							</u-swipe-action-item>
						
						</u-list-item>
					</u-swipe-action>
					<u-empty v-if="conversationArr.length == 0" mode="message" text="暂无消息"
						icon="http://cdn.uviewui.com/uview/empty/message.png">
					</u-empty>
				</view>
			</u-list>
			<u-empty :marginTop="180" v-if="!isLogin" mode="permission" text="暂时还没有人和你打招呼哦!"
				icon="https://file.wsdns.cn/empty/data.png">
			</u-empty>
		</view>
		<!-- <view class="wechat-auth agree" v-if="!isLogin" >
			<button class="btn-normal" @click="$push('pages/login/index')">
				<view class="wechat-auth-container">
					<image class="icon" src="@/static/channel/wechat.png"></image>
					<text class="title">立即登录</text>
				</view>
			</button>
		</view> -->
		<u-modal showCancelButton @cancel="showIdCardModal = false" @confirm="doAuth" :show="showIdCardModal" title="完成认证我们才能开始配对聊天哦" cancelText="稍后认证" confirm-text="立即认证"></u-modal>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import storage from '../../utils/storage'
	import mixin from '@/core/mixins/tabbar'
	import {
		ACCESS_TOKEN,
		USER_ID
	} from '@/store/mutation-types'
	import {
		navTo
	} from '@/core/app.js'
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	
	const menus = [
		{
			index: 0,
			title: '喜欢我',
			icon: '../../static/icon/notice-01.png',
			path: 'sub_pages/notice/fans',
			value: 41,
			show: false
		},
		{
			index: 1,
			title: '我喜欢',
			icon: '../../static/icon/notice-02.png',
			path: 'sub_pages/notice/like',
			value: 0,
			show: false
		},
		{
			index: 2,
			title: '评论',
			icon: '../../static/icon/notice-03.png',
			path: 'sub_pages/notice/comment',
			value: 12,
			show: false
		},
		{
			index: 3,
			title: '看过我',
			icon: '../../static/icon/notice-04.png',
			path: 'sub_pages/notice/look',
			value: 8,
			show: false
		}
	]
	
	export default {
		mixins: [mixin],
		data() {
			return {
				menus,
				title: '国内馆',
				// 正在加载中 
				isLoading: false,
				// 是否授权了定位权限
				isAuthor: true,
				// 当前选择的门店ID
				selectedId: null,
				// 订单列表数据
				list: [],
				navTo,
				isLogin: true,
				options: [{text: '删除',style: {backgroundColor: '#fa3534'}}],
				showIdCardModal: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			const userId = uni.getStorageSync('userId')
			if (userId == 1101) {
			    this.$push('pages/login/index')
			    return false
			}
		},
		methods: {
			...mapMutations(['ADD_FRIEND']),
			...mapActions(['RemoveFriend', 'GetUserInfo']),
			onUserDetail(item) {
				if(this.$store.getters.userInfo.certification != 1){
					this.showIdCardModal = true
					return false
				}
				this.ADD_FRIEND(item.friendInfo)
				uni.navigateTo({
					url: '/pages/chat/chat?friendId=' + item.friendInfo.userId
				})
			},
			changeCity() {
				this.$toast('切换区域')
			},
			doAuth(){
				uni.navigateTo({
					url: '/sub_pages/certification/id-card/id-card',
					events: {
						reload: () => {
							this.GetUserInfo()
							this.showIdCardModal = false
						}
					}
				})
			}
		},
		filters: {
			formatTime(val) {
				const date = new Date(val);
				let today = new Date().setHours(0, 0, 0, 0);
				let d = new Date(val).setHours(0, 0, 0, 0);
				if (d === today) {
					return uni.$u.timeFormat(date, 'hh:MM')
				} else {
					return uni.$u.timeFormat(date)
				}
			}
		},
	}
</script>
<style>
	page{
		background-color: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	.notice {
	}
	.head{
		display: flex;
		align-items: center;
		.search-wrapper {
			display: flex;
			justify-content: space-around;
			width: 750rpx;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #e9ebf1;
			.box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #666666;
				text-align: center;
				line-height: 30rpx;
				position: relative;
		
				.btn {
					width: 70rpx;
					height: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
		
					image {
						width: 60rpx;
					}
				}
			}
		
		}
	}

	.user-list {
		.list {
			display: flex;
			flex-direction: column;
		}

		.nickname {
			color: #999999;
		}

		.avatar2 {
			display: flex;
			height: auto;
			position: relative;
		}

		.unread {
			position: absolute;
			min-width: 35rpx;
			min-height: 35rpx;
			border-radius: 35rpx;
			background-color: #f56c6c;
			display: flex;
			justify-content: center;
			align-items: center;
			top: -14rpx;
			right: 0;
		}

		.content {
			padding: 20rpx 0;
			font-size: 26rpx;
		}

		.fans {
			color: #999999;
			font-size: 24rpx;
			font-weight: normal;
		}
	}

	// 搜索按钮
	.search-button {
		width: 25%;
		box-sizing: border-box;

		.button {
			height: 64rpx;
			font-size: 28rpx;
			border-radius: 0 5px 5px 0;
			background: #2C71C7
		}
	}
	.u-body-item {
		align-items: stretch !important
	}
	.agree {
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
	}
	
	// 微信授权登录
	.wechat-auth {
		width: 600rpx;
		height: 86rpx;
		margin: 100rpx auto 50rpx auto;
		color: $main-text;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	
		.btn-normal {
			width: 580rpx;
		}
	
		.btn-normal-no {
			width: 580rpx;
		}
	
		button {
			background: none !important;
		}
	
		.wechat-auth-container {
			display: flex;
			justify-content: center;
			display: flex;
			align-items: center;
			color: $main-text;
			background: none !important;
	
			.title {
				color: #f3f3f3;
			}
		}
	
		// 登录按钮
		.login-button {
			width: 100%;
			height: 86rpx;
			margin-top: 80rpx;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
			color: $main-text;
			border-radius: 80rpx;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
			letter-spacing: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 15rpx;
		}
	
		.title {
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>