<template>
	<view class="liveStyle" :style="{ height: contentHeight }">
		<u-empty v-if="g.length == 0" text="暂无相关直播列表" mode="list"></u-empty>

		<template v-if="g.length > 0">
			<view style="
					height: calc(100vh - 50px);
					width: calc(100vw - 20px);
					margin-left: 10px;
					overflow: hidden;
					padding-top: 10px;
				  ">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' ,}">
					<view class="u-good-list">
						<u-row gutter="20">
							<u-col span="6" v-for="(cx, ci) in g" :key="ci">
								<view class="good" @click="clickHandler(cx)">
									<view class="sharebox" v-if="cx.ExtensionImg&&cx.ExtensionImg!=''" @click.native.stop="goshare(cx.ExtensionImg,
					  cx.LiveQrCodePaddingTop,cx.LiveQrCodePaddingLeft,cx.LiveQrCodeSize,cx.LiveQrCodeType)">
										<image src="../../static/images/share.png" mode="widthFix" class="share" />
									</view>
									<view class="good-img" :style="{ 'background-image': 'url(' + (cx.cover_img ? cx.cover_img : '') + ')', backgroundSize: 'cover' ,'background-repeat': 'no-repeat'}">
										<!-- 播放按钮 -->
										<view class="livebtn" v-if="cx.live_status==104 || cx.live_status==105|| cx.live_status==106 "></view>
										<u-icon name="play-circle-o" v-if="cx.live_status==105" color="#fff" size="100" style="position: absolute;left: 50%;top:50%;margin-left: -50rpx;margin-top: -50rpx;"></u-icon>
										<image src="/static/images/jinbo.png" v-if="cx.live_status==104" style="width: 50px; height: 50px;position: absolute;left: 50%;top:50%;margin-left: -25px;margin-top: -25px;" />
										<image src="/static/images/yic.png" v-if="cx.live_status==106" style="width: 50px; height: 50px;position: absolute;left: 50%;top:50%;margin-left: -25px;margin-top: -25px;" />
									</view>
									<view style="position: absolute;left: 0;bottom: 0;color: #FFFFFF;background: rgba(0, 0, 0, 0.5);width: 100%; padding: 5px 0;">
										<view class="good-info">
											<u-avatar :src="cx.anchor_img" size="30"></u-avatar>
											<Text style="font-size: 11px;margin-left: 5px;">{{cx.anchor_name}}</Text>
										</view>
										<view class="good-name">{{ cx.name }}</view>
									</view>
									<!-- 直播的状态 -->
									<view class="liveState" v-if="cx.live_status==101" style=" background-image: linear-gradient(to right,#FF8FB9,#FF002A);">
										<Text>直播中</Text>
									</view>
									<view class="liveState" v-if="cx.live_status==102" style="background: #FFFFFF;color: #111111;">
										<Text>未开始</Text>
									</view>
									<view class="liveState" v-if="cx.live_status==103">
										<Text>已结束</Text>
									</view>
									<view class="liveState" v-if="cx.live_status==104">
										<Text>禁播</Text>
									</view>
									<view class="liveState" v-if="cx.live_status==105">
										<Text>暂停</Text>
									</view>
									<view class="liveState" v-if="cx.live_status==106">
										<Text>异常</Text>
									</view>
									<view class="liveState" v-if="cx.live_status==107">
										<Text>已过期</Text>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
				</scroll-view>
			</view>
		</template>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import tabbars from "@/components/tabbar/index";
	export default {
		components: {
			tabbars,
			auth,
		},
		data() {
			return {
				mc: "",
				secondary: "",
				pageTitle: "直播列表",
				contentHeight: 0,
				g: [],
				msg: {
					pageIndex: 1,
					pageSize: 10,
				},
				page_count: 1,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				u: {},
				showAuth: false,
			};
		},
		onLoad(option) {
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			let c = this.$uiConfig.is_bang ? 80 : 52;
			this.contentHeight = this.$utils.calcContentHeight(c - 40) + "px";
			this.initPage();
			uni.showNavigationBarLoading();
			if (option.user_id) {
				uni.setStorageSync("pid", {
					pid: option.user_id
				});
			}
			if (option.SmallShopId) {
				uni.setStorageSync("SmallShopId", {
					SmallShopId: option.SmallShopId
				});
			}
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			} else {
				this.init();
			}
		},
		methods: {
			goshare(img, top, left, size, type) {
				uni.navigateTo({
					url: '/pages/live/share?pic=' + img + '&top=' + top + '&left=' + left + '&size=' + size + '&type=' + type
				});
			},
			initPage() {
				let currentPages = getCurrentPages();
				let u = "/" + currentPages[currentPages.length - 1].route;
				let pages = uni.getStorageSync("basedata") ?
					uni.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,
				});
			},
			clickHandler(cx) {
				let uid = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserId :
					0;
				let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").SmallShopId :
					0;
				if (SmallShopId == 0) { //如果微店id为0 去找所属微店id
					SmallShopId = uni.getStorageSync("mall_UserInfo") ?
						uni.getStorageSync("mall_UserInfo").UserSmallShopId :
						0;
				}
				let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
				let customParams = encodeURIComponent(JSON.stringify({
					user_id: uid,
					SmallShopId: SmallShopId,
					Up: Up
				}));
				wx.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${cx.roomid}&custom_params=${customParams}`,
				});
			},
			init() {
				uni.showLoading({
					title: "加载中",
				});
				this.request2({
						url: "/api/LiveHouse/GetLiveHouseList",
						data: this.msg,
					},
					(res) => {
						uni.hideLoading();
						uni.hideNavigationBarLoading();
						if (res.resultCode == 1) {
							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.init();
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
		},
	};
</script>

<style>
	.liveStyle {
		background: #f3f4f6;
	}

	.liveStyle .u-good-list .good {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 10px;
		height: 243px;
		position: relative;
	}

	.liveStyle .u-good-list .good .sharebox {
		width: 50px;
		height: 50px;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 5;
	}

	.liveStyle .u-good-list .good .sharebox .share {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 10px;
		top: 5px;
		z-index: 5;
	}

	.liveStyle .u-good-list .good .good-img {
		width: 100%;
		height: 243px;
		display: block;
		position: relative;
	}

	.liveStyle .u-good-list .good .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 13px;
		margin: 7px 10px;
		height: 18px;
	}

	.liveStyle .u-good-list .good .good-info {
		display: flex;
		margin: 7px 10px;
		margin-top: 0;
		flex-direction: row;
		align-items: center;
	}

	.liveStyle .u-good-list .liveState {
		width: 50px;
		height: 20px;
		position: absolute;
		left: 0;
		top: 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);

		border-bottom-right-radius: 10px;
		border-top-right-radius: 10px;
		font-size: 11px;
		color: #ffffff;
		text-align: center;
	}

	.liveStyle .livebtn {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #999999;
		opacity: 0.3;
	}
</style>
