<template>
	<view class="circleNews">
		<u-empty v-if="g.length == 0" text="暂无消息记录" mode="list"></u-empty>
		<view v-if="g.length > 0" style="
		height: calc(100vh);
        overflow: hidden;
      ">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				:style="{ height: '100%' }">
				<view class="ftBox" v-if="type==1">
					<view class="interDList" v-for="(x, i) in g" :key="i">
						<view class="box-top">
							<view class="box-top-l" >
								<u-avatar :src="x.Photo" size="80"></u-avatar>
								<image class="gstyle" v-if="x.Sex==1"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png">
								</image>
								<image class="gstyle" v-if="x.Sex==2"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png">
								</image>
							</view>
							<view class="box-top-r">
								<view class="box-top-r-n">{{x.Name}}</view>
								<view style="font-size: 10px;color: #888888;">{{x.CreateDate}}</view>
							</view>
						</view>
						<view class="box-c">
							<u-icon name="good-job-o" :color="mainColor" size="28" v-if='x.Type==1'></u-icon>
							<u-icon name="comment-o" :color="mainColor" size="28" v-if='x.Type==2'
								style='margin-top: 6rpx;'></u-icon>
							<view style="margin-left: 5px;">{{x.Content}}</view>
						</view>
						<view class="box-b" @click="jumpCircleDetail(x.ReplyContent[0])">
							<image :src='x.ReplyContent[0].CoverPhoto'
								style="width: 55px;height: 55px;position: relative;"
								v-if="x.ReplyContent[0].FileType==1 "></image>
							<view class="ftBox-right-text" v-if="x.ReplyContent[0].FileType==2"
								style="position: relative;">
								<video id="myVideo" :src="x.ReplyContent[0].CoverPhoto"
									style="width: 100%;height: 100%;border-radius: 5px;" :controls='false'
									:show-center-play-btn='false'></video>
								<view
									style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;">
									<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
								</view>
							</view>
							<image v-if="x.ReplyContent[0].FileType==3"
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/circle-mic.png"
								mode="widthFix" style="width: 13px;height: auto;margin-left: 15px;"></image>
							<u-icon name="column" color="#666666" size="40" v-if="x.ReplyContent[0].FileType==0"
								style='margin-left: 15px;'></u-icon>
							<view class="box-b-text" style="width: calc(100vw - 30px - 55px - 30px);"
								v-if="x.ReplyContent[0].FileType==1 ||  x.ReplyContent[0].FileType==2">
								<text :style="{color:mainColor}">{{x.ReplyContent[0].CreateByName}}:</text>
								{{x.ReplyContent[0].Content}}
							</view>

							<view class="box-b-text" style="width: calc(100vw - 30px - 25px - 30px);margin-left: 10px;"
								v-if="x.ReplyContent[0].FileType==0 ||  x.ReplyContent[0].FileType==3">
								<text :style="{color:mainColor}">{{x.ReplyContent[0].CreateByName}}:</text>
								{{x.ReplyContent[0].Content}}
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
						:margin-bottom="20" bg-color="#FFF" />
				</view>
				<view class="ftBox" v-if="type==2">
					<view class="interDList" v-for="(x, i) in g" :key="i">
						<view class="box-top">
							<view class="box-top-l" >
								<u-avatar :src="x.Photo" size="80"></u-avatar>
								<image class="gstyle" v-if="x.Sex==1"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png">
								</image>
								<image class="gstyle" v-if="x.Sex==2"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png">
								</image>
							</view>
							<view class="box-top-r">
								<view class="box-top-r-n">{{x.Name}}</view>
								<view style="font-size: 10px;color: #888888;">{{x.CreateDate}}</view>
							</view>
						</view>
						<view class="box-c">
							<u-icon name="good-job-o" :color="mainColor" size="28" v-if='x.Type==1'></u-icon>
							<u-icon name="comment-o" :color="mainColor" size="28" v-if='x.Type==2'
								style='margin-top: 6rpx;'></u-icon>
							<view style="margin-left: 5px;">{{x.Content}}</view>
						</view>
						<view class="box-b" @click="jumpPPDetail(x.ReplyContent[0])">
							<image :src="x.ReplyContent[0].ImageList[0]" mode="widthFix"
								style="width: 55px;height: 55px;position: relative;"></image>
							<view class="box-b-text" style="width: calc(100vw - 30px - 55px - 30px);">
								<text :style="{color:mainColor}">{{x.ReplyContent[0].UserName}}:</text>
								{{x.ReplyContent[0].ActivityTitle}}
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
						:margin-bottom="20" bg-color="#FFF" />
				</view>


			</scroll-view>

		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				pageTitle: "",
				showAuth: false,
				msg: {
					pageIndex: 1,
					pageSize: 10,
					SelectType: 1,
					Type: 0,
					Status: -1,
				},
				type: 0,
				mainColor: "",
				secondary: '',
				pricecolor: '',

				page: 1,
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				count: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				windowWidth: 0,
				msgType: {

				}
			};
		},

		methods: {
			init() {
				this.loading = true;
				this.request2({
						url: '/api/AppletMiai/GetMiaiMessagePageList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.loading = false;
							this.count = res.data.count;
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},

			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {

					this.status = "nomore";
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.init();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},

			//跳转拼拼plus详情
			jumpPPDetail(x) {
				uni.navigateTo({
					url: '/pages/blindDate/postDetails?Id=' + x.Id
				})
			},
			//跳转圈子详情
			jumpCircleDetail(x) {
				uni.navigateTo({
					url: '/pages/friendcircle/mydetails?ID=' + x.Id + '&index=' + -1
				})
			},
			goUserinfo(x){
				uni.navigateTo({
					url: '/pages/blindDate/persondetails?UserId='+ x.UserId
				});
			},
			//设置全部消息为已看
			setAllMsgSee() {
				this.request2({
						url: '/api/AppletMiai/DelMiaiMessageInfoBatch',
						data: {
							TypeIds: this.msg.SelectType
						},
					},
					res => {
						if (res.resultCode == 1) {

						}
					}
				);
			}
		},
		onShow() {
			if(this.g.length>0){
				this.setAllMsgSee()
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
		},
		mounted() {
			let currentPages = getCurrentPages();
			// let u = "/" + currentPages[currentPages.length - 1].route;
			// let pages = wx.getStorageSync("basedata") ?
			// 	wx.getStorageSync("basedata").bar_title :
			// 	[];
			// pages.forEach((x) => {
			// 	if (x.value == u) {
			// 		this.pageTitle = x.new_name ? x.new_name : x.name;
			// 	}
			// });
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});

		},
		onLoad(options) {
			this.msg.SelectType = options.pageType;
			this.type = options.pageType;
			if (options.pageType == 1) {
				this.pageTitle = "圈子消息"
			} else if (options.pageType == 2) {
				this.pageTitle = "拼拼Plus"
			}
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init();
			}
		},
	};
</script>

<style>
	.circleNews .ftBox {
		/* width: 100%; */
		/* height: 100%; */
		padding: 0 15px;
	}

	.circleNews .interDList {
		width: 100%;
		padding-top: 20px;
	}

	.circleNews .box-top {
		display: flex;
		align-items: center;
	}

	.circleNews .box-top-l {
		width: 80rpx;
		height: 80rpx;
		position: relative;
		border-radius: 50%;
	}

	.circleNews .gstyle {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 15px;
		height: 15px;

	}

	.circleNews .box-top-r {
		width: calc(100vw - 30px - 80rpx - 15px);
		margin-left: 15px;
	}

	.circleNews .box-top-r-n {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 15px;
		color: #000000;
		font-weight: bold;
	}

	.circleNews .box-c {
		width: 100%;
		padding: 10px 0;
		font-size: 13px;
		color: #000000;
		display: flex;
		align-items: flex-start;
	}

	.circleNews .box-b {
		width: 100%;
		display: flex;
		align-items: center;
		background: #F5F5F5;
		min-height: 45px;
		border-radius: 2px;

	}

	.box-b-text {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #111111;
		margin-left: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ftBox-right-text {
		width: 55px;
		height: 55px;
		border-radius: 2px;
		font-size: 14px;
		color: #333333;
		background: #F5F5F5;
	}

	.circleNews {
		/* width: 100%; */
		/* height: 100vh; */
		background: #FFF;
	}
</style>
