<template>
	<view>
		<u-navbar title="互动消息" :border-bottom="false"></u-navbar>
		<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" :is-scroll="false"
			:active-item-style="{ color: '#3CB5FB', fontSize: '0.15rem' }" :bar-style="{ background: '#3CB5FB' }"
			@change="tabsChange"></u-tabs-swiper>
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col list" v-if='list.length'>
				<template v-for="(item, i) in list">
					<view v-if='item.interType != 3' class="list-item flex-col section_4" :key="i">
						<view class="image_2 flex-row view_14">
								<u-avatar :src="$u.http.config.imgUrl + item.userHead"
									@click='toDetil(item.interUserId)' class="image_2"></u-avatar>
								<view class="flex-col group_2">
									<view class="flex-row group_3">
										<text class="text_16">{{ item.interUserName }}</text>
										<text class="text_18">{{ item.interDate }}</text>
									</view>
									<view class="right-text-wrapper">
									<text v-if="item.interType == 0">点赞了你的作品</text>
									<text v-if="item.interType == 1">收藏了你的作品</text>
									<text v-if="item.interType == 2">转发了你的作品</text>
								</view>
								</view>
							</view>
						<view class="bottom-section flex-row">
							<image v-if='item.dynamicHead' :src="$u.http.config.imgUrl + item.dynamicHead.split(',')[0]"
								class="image_4" />
							<text v-if="item.interType == 0" class="text_6">{{ item.commentContent }}</text>
							<text v-if="item.interType == 1" class="text_6">{{ item.dynamicTitle }}</text>
							<text v-if="item.interType == 2" class="text_6">{{ item.dynamicTitle }}</text>
						</view>
						<view class="flex-row group_4">
						</view>
					</view>
					<view v-else class="list-item flex-col section_4">
						<view class="top-group flex-row view_13">
							<view class="image_2 flex-row view_14">
								<u-avatar :src="$u.http.config.imgUrl + item.userHead"
									@click='toDetil(item.interUserId)' class="image_2"></u-avatar>
								<view class="flex-col group_2">
									<view class="flex-row group_3">
										<text class="text_16">{{ item.interUserName }}</text>
										<!-- <view class="flex-col items-center text-wrapper_1">
											<text>{{ item.commentContent == '【我的评论】' ? '评论' : '回复' }}了</text>
										</view> -->
										<text class="text_18">{{ item.interDate }}</text>
									</view>
									<text class="text_20">{{ item.commentContent == '【我的评论】' ? '评论' :
										'回复' }}了你:{{ item.content }}</text>
								</view>
							</view>
							<!-- <view class="right-group flex-col items-center view_15">
								<text class="top-group_2">回复</text>
							</view> -->
						</view>

						<view class="bottom-section flex-row">
							<text v-if="item.commentContent == '【我的评论】'" class="text_6">{{ item.dynamicTitle }}</text>
							<text v-else class="text_6">{{ item.commentContent }}</text>
						</view>
						<view class="flex-row group_4">
							<!-- <image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/621c59e162a7d90011002985/16460348611151830106.png"
								class="image_11" />
							<text class="text_22">还有10条评论 ></text> -->
						</view>
					</view>
				</template>
			</view>
			<view v-else style='padding-top:30vh'>
				<!-- <u-empty text="暂无消息列表" mode="message"></u-empty> -->
				<no-data text="暂无消息列表"></no-data>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import NoData from 'components/NoData.vue'
	export default {
		components: {
			NoData
		},
	data() {
		return {
			list: [],
			tabList: [
				{
					name: "全部",
				},
				{
					name: "评论",
				},
				{
					name: "点赞",
				},
				{
					name: "收藏",
				},
				{
					name: "转发",
				},
			],
			current:0,
		};
	},
	onLoad() {
		this.getList(-1)
		//接收互动消息
		this.$connection.on("InteractMessage", (data, type) => {
			if (this.route.indexOf('interactionList') >= 0) {
				this.list.unshift(data.data)
			}
		});
	},
	onShow() {
		if (this.vuex_msgList) {
			var msgList = this.vuex_msgList;
			msgList = msgList.replace('InteractMessage,', '')
			this.$u.vuex('vuex_msgList', msgList)
			if (!msgList) {
				var tab = this.vuex_tabbar;
				tab[1].isDot = false;
				this.$u.vuex('vuex_tabbar', tab);
			}
		}
	},
	methods: {
		// tabschange
		tabsChange(i) {
			// this.current 0=全部 1=评论 2=点赞 3=收藏 4=转发
			if (this.current !== i) {
				this.current = i;
				if (this.current == 0) {
					this.getList(-1)
				} else if (this.current == 1) {
					this.getList(3)
				} else {
					this.getList(this.current - 2);
				}

			}
		},
		//type 0=点赞 1=收藏 2=转发 3=评论
		getList(type) {
			this.$u.api.getinteractionList(type).then(res => {
				this.list = res
			})
		},
		//返回上一级
		router() {
			uni.switchTab({
				url: '../../message/msgList/msgList'
			})
		},
		toDetil(id) {
			this.$u.route({
				url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.scroll {
	background-color: rgb(246, 247, 250);
	width: 100%;
	height: calc(100vh - 0.44rem);
}

.list-item {
	padding: 0 0.14rem 0.17rem;
	background-color: rgb(255, 255, 255);
	border-radius: 0.1rem;
	margin-top: 0.1rem;
}

.list-item:first-child {
	margin-top: 0;
}

.top-group {
	padding: 0.12rem 0 0.085rem;
}

.bottom-section {
	margin-top: 10rpx;
	margin-right: 0.055rem;
	padding: 0.07rem 0.025rem 0.08rem 0.14rem;
	color: rgb(54, 54, 54);
	font-size: 0.12rem;
	// letter-spacing: 0.012rem;
	white-space: nowrap;
	background-color:#F6F8F9;
	border-radius: 24rpx;
	// margin-left: 0.5rem;
	width: 100%;
}

.image_2 {
	margin-bottom: 0.025rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
}

.right-group {
	// margin-left: 0.12rem;
	// margin-top: 0.05rem;
}

.image_4 {
	width: 0.35rem;
	height: 0.35rem;
}

.text_6 {
	margin-left: 0.025rem;
	align-self: center;
	overflow: hidden;
	max-width: 84%;
	text-overflow: ellipsis;
}

.top-group_1 {
	color: rgb(2, 2, 2);
	font-size: 0.15rem;
	line-height: 0.14rem;
	letter-spacing: 0.015rem;
	white-space: nowrap;
}

.text_4 {
	margin-left: 0.02rem;
	margin-top: 0.085rem;
	color: rgb(177, 179, 182);
	font-size: 0.12rem;
	line-height: 0.12rem;
	letter-spacing: 0.012rem;
	white-space: nowrap;
}

.text_1 {
	// margin: 0.02rem 0;
	color: rgb(2, 2, 2);
	font-size: 0.15rem;
	// line-height: 0.14rem;
	letter-spacing: 0.015rem;
	white-space: nowrap;
}

.right-text-wrapper {
	// margin-left: 0.015rem;
	padding: 0.03rem 0 0.04rem;
	// color: rgb(46, 155, 255);
	font-size: 0.12rem;
	// line-height: 0.12rem;
	// letter-spacing: 0.012rem;
	white-space: nowrap;
	// background-color: rgba(46, 155, 255, 0.1);
	border-radius: 0.09rem;
	// width: 0.65rem;
	height: 0.18rem;
	color: #000;
	font-size: 24rpx;
}

.list {
	padding: 0.14rem 0.14rem 0.14rem 0.15rem;
}

.view_2 {
	color: initial;
	font-size: initial;
	line-height: initial;
	letter-spacing: initial;
	white-space: initial;
}

.top-group {
	padding: 0.12rem 0 0.085rem;
}

.image_2 {
	margin-bottom: 0.025rem;
	width: 0.4rem;
	height: 0.4rem;
}

.right-group {
	// margin-left: 0.12rem;
	// margin-top: 0.05rem;
}

.section_4 {
	padding: 0.15rem 0.16rem 0;
	margin-top: 0.1rem;
}

.view_13 {
	padding: initial;
}

.text_20 {
	margin-right: initial;
	padding: initial;
	align-self: initial;
	background-color: initial;
	// margin-left: 0.53rem;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 80%;
	font-size: 24rpx;
	color: rgba(0, 0, 0, 0.9);

}

.text-wrapper_2 {
	margin-right: 0.05rem;
	margin-top: 0.1rem;
	padding: 0.18rem 0 0.2rem;
	color: rgb(54, 54, 54);
	font-size: 0.12rem;
	line-height: 0.12rem;
	letter-spacing: 0.012rem;
	white-space: nowrap;
	background-color: rgb(246, 247, 250);
	max-width: 84%;
	min-width: 84%;
	margin-left: 0.53rem;
}

.group_4 {
	padding: 0.1rem 0.52rem 0.1rem;
	color: rgb(177, 179, 182);
	font-size: 0.12rem;
	line-height: 0.12rem;
	letter-spacing: 0.012rem;
	white-space: nowrap;
}

.view_14 {
	margin-bottom: initial;
	width: initial;
	height: initial;
	flex: 1 1 auto;
}

.view_15 {
	margin-left: 0.2rem;
	margin-top: initial;
	margin-right: 0.07rem;
	padding: 0.07rem 0;
	color: rgb(255, 255, 255);
	font-size: 0.12rem;
	line-height: 0.12rem;
	white-space: nowrap;
	background-color: rgb(46, 155, 255);
	border-radius: 0.13rem;
	width: 0.56rem;
	height: 0.25rem;
}

.view_15:active {
	background: #fff;
	color: rgb(46, 155, 255);
	border: 1px solid rgb(46, 155, 255);
}

.text_21 {
	margin-left: 0.14rem;
	margin-right: 0.12rem;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}

.image_11 {
	width: 0.2rem;
	height: 0.2rem;
}

.text_22 {
	margin: 0.05rem 0 0.04rem 0.09rem;
}

.image_10 {
	width: 0.4rem;
	height: 0.4rem;
}

.group_2 {
	margin-left: 0.11rem;
	margin-bottom: 0.045rem;
	flex: 1 1 auto;
}

.group_3 {
	padding-left: 0.01rem;
	display: flex;
	align-items: center;
}

.text_18 {
	// margin-top: 0.055rem;
	color: rgb(177, 179, 182);
	font-size: 0.12rem;
	// line-height: 0.12rem;
	// letter-spacing: 0.012rem;
	white-space: nowrap;
	margin-left: 10rpx;
}

.text_16 {
	margin-bottom: 0.03rem;
	color: rgb(2, 2, 2);
	font-size:28rpx;
	// line-height: 0.14rem;
	// letter-spacing: 0.015rem;
	white-space: nowrap;
}

.text-wrapper_1 {
	margin-left: 0.04rem;
	padding: 0.03rem 0 0.04rem;
	color: rgb(46, 155, 255);
	font-size: 0.12rem;
	line-height: 0.12rem;
	letter-spacing: 0.012rem;
	white-space: nowrap;
	background-color: rgba(46, 155, 255, 0.1);
	border-radius: 0.09rem;
	width: 0.65rem;
	height: 0.18rem;
}
</style>
