
<template>
	<view class="hl88-lr-footer">
		<view class="hl88-lr-footer-bottom_msg">
			<input type="text" 
				v-if="state == 1"
				class="hl88-lr-footer-bottom_msg_input" 
				confirm-type="send" 
				v-model="message" 
				@confirm="handleSend('msg')"
				placeholder-style="rgba(255, 255, 255, .8)"
				placeholder-class="hl88-lr-footer-bottom_msg_input-placeholder" 
				placeholder="Say something~" 
			/>
		</view>
		<!-- H5 页面需要发送按钮 -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS -->
		<view class="hl88-lr-footer-bottom_send" v-if="state == 1">
			<view class="hl88-lr-footer-bottom_send-btn" @tap="handleSend('msg')">
				<text class="hl88-lr-footer-bottom_send-btn-text">Send</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- 购物袋 -->
		<!-- <view class="hl88-lr-footer-bottom_controll"> </view> -->
		<!-- <view class="hl88-lr-footer-bottom_goods" @tap="handlePopup('open')">
			<view class="hl88-lr-btn-icon hl88-lr-btn-ghost">
				
				<image class="hl88-lr-btn-icon-img" src="/static/images/live/shop.png"/>
				<view class="hl88-lr-btn-badge" v-if="goods.length != 0">
					<text class="hl88-lr-btn-badge-text">{{numFormat(goods.length)}}</text>
				</view>
			</view>
		</view> -->
		<!-- 发送点赞 -->
		<view class="hl88-lr-footer-bottom_praise" @tap="handleSend('like')" v-if="state == 1">
			<view class="hl88-lr-btn-icon">
				<text class="hl88-lr-btn-icon-text hl88-lr-footer-bottom_praise-btn-text">&#xe635;</text>
				<view class="hl88-lr-btn-badge" v-if="like != 0">
					<text class="hl88-lr-btn-badge-text">{{numFormat(like)}}</text>
				</view>
			</view>
		</view>
		<!-- 弹出窗口 -->
		<uni-popup ref="goods" type="bottom">
			<view class="hl88-lr-popup">
				<view class="hl88-lr-popup-title">
					<text class="hl88-lr-popup-title-text"> {{goods.length}} Item</text>
					<text class="hl88-lr-popup-title-close-text" @tap="handlePopup('close')">&#xe66b;</text>
				</view>
				<scroll-view scroll-y="true" class="hl88-lr-popup-list">
					<view class="hl88-lr-popup-list-item" v-for="(item, index) in goods" :key="item.id">
						<view class="hl88-lr-popup-list-item-img">
							<image :src="stcOss(item.image)" class="hl88-lr-popup-list-item-image"></image>
						</view>
						<view class="hl88-lr-rank-tag" :class="['tagbg_' + (index + 1)]">
							<text class="hl88-lr-rank-tag-text">{{index + 1}}</text>
						</view>
						<view class="hl88-lr-popup-list-item-subject">
							<view class="hl88-lr-popup-list-item-subject-title">
								<text class="hl88-lr-popup-list-item-subject-title-text">{{item.title}}</text>
							</view>
							<view class="hl88-lr-popup-list-item-subject-operation">
								<view class="hl88-lr-popup-list-item-subject-operation-price">
									<text class="hl88-lr-popup-list-item-subject-operation-price-text">RM{{item.price}}</text>
								</view>
								<view class="hl88-lr-popup-list-item-subject-operation-button">
									<view class="hl88-lr-popup-list-item-subject-operation-button-seek" @tap="handleSend('seek',index + 1)" v-if="state == 1">
										<text class="hl88-lr-popup-list-item-subject-operation-button-seek-text">explain</text>
									</view>
									<view class="hl88-lr-popup-list-item-subject-operation-button-shopping" @tap="handleGoods(item.id)">
										<text class="hl88-lr-popup-list-item-subject-operation-button-shopping-text">&#xe636;</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 多终端兼容性 -->
				<view :style="{height: statusFootHeight + 'px'}"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'LiveRoomFooter',
	props: {
		statusFootHeight: {
			default: 0
		},
		like:{
			type: Number,
			default: 0
		},
		state:{
			default: 0
		},
		goods: {
			type: Array,
			default: () => []
		}
	},
	beforeCreate() {
		// #ifdef APP-NVUE
		var domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: "url('/static/style/iconfont.ttf')"
		});
		// #endif
	},
	data() {
		return {
			message: ''
		};
	},
	methods: {
		// 操作弹出框
		handlePopup(method) {
			this.$refs.goods[method]();
		},
		// 传递给live 消息
		handleSend(type, index){
			switch(type) {
				// 发送消息
				case 'msg': 
					if (this.message) {
						this.$emit('change',{
							type: 'msg',
							message: this.message
						});
						this.message = '';
					}
					// 收起键盘
					uni.hideKeyboard();
					break;
				// 点赞
				case 'like':
					this.$emit('change',{type: 'like'});
					break;
				// 求讲解
				case 'seek':
					this.$emit('change',{
						type: 'seek',
						key: index
					});
					this.handlePopup('close');
					break;
			} 
		},
		
		handleGoods(id){
			uni.navigateTo({
				url: `/pages/product/goods?id=${id}`
			})
			this.handlePopup('close');
		},
		stcOss(url){
				let oss = (this.$store.state.shell && this.$store.state.shell.appUrl && this.$store.state.shell.appUrl.oss) || '';
			let image = '';
			if (url) {
				if((/^(http|https):\/\/.+/.test(url))){
					image = url;
				}else{
					image = oss + url;
				}
			}else{
				image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
			}
			return image;
		},
		numFormat(num){
			return num > 9999 ? ((num-num%1000)/10000 + 'w') : num
		}
	}
};
</script>
<style>
@import '@/static/style/wanlnvue.css';
.hl88-lr-footer {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding-top: 18rpx;
	padding-bottom: 18rpx;
}
	/* 消息按钮 */
	.hl88-lr-footer-bottom_msg {
		/* #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
		flex: 3;
		/* #endif */
		/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
		flex: 4;
		/* #endif */
		margin-left: 25rpx;
		margin-right: 25rpx;
	}
		.hl88-lr-footer-bottom_msg_input{
			height: 76rpx;
			background-color: rgba(0,0,0,.2);
			border-radius: 100px;
			color: #fff;
			padding-left: 25rpx;
			padding-right: 25rpx;
			font-size: 28rpx;
		}
		.hl88-lr-footer-bottom_msg_input-placeholder{
			color: #FFFFFF;
		}
	/* 发送按钮 */
	.hl88-lr-footer-bottom_send {
		flex: 1;
		align-items: flex-start;
	}
		.hl88-lr-footer-bottom_send-btn{
			background-color: #f02b57;
			border-radius: 100px;
			height: 50rpx;
			width: 100rpx;
			justify-content: center;
			align-items: center;
		}
		.hl88-lr-footer-bottom_send-btn-text{
			color: #ffffff;
			font-size: 28rpx;
		}
		
		
	/* 进度条 */
	.hl88-lr-footer-bottom_controll {
		justify-content: center;
		align-items: center;
		color: #fff;
		flex: 4;
		z-index: 100;
		position: relative;
		height: 76rpx;
		line-height: 76rpx;
	}
		.hl88-lr-footer-bottom_controll-play{
			width: 76rpx;
			height: 76rpx;
			position: relative;
		}
	/* 商品 */
	.hl88-lr-footer-bottom_goods {
		position: relative;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
		
		/* 购物袋颜色 */
		.hl88-lr-footer-bottom_goods-btn-text{
			color: #f40;
			font-size: 56rpx;
		}
		
	/* 点赞 */
	.hl88-lr-footer-bottom_praise {
		position: relative;
		justify-content: center;
		align-items: center;
		flex: 1;
	}
		.hl88-lr-footer-bottom_praise-btn-text{
			color: #fff;
			font-size: 41rpx;
		}
	/* POPUP */
	.hl88-lr-popup{
		position: relative;
		background: rgba(255, 255, 255, 0.93);
		padding-left: 18rpx;
		padding-right: 18rpx;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
	}
		.hl88-lr-popup-title {
			height: 100rpx;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
			.hl88-lr-popup-title-text {
				font-size: 32rpx;
			}
			.hl88-lr-popup-title-close-text{
				font-size: 32rpx;
				/* #ifndef APP-PLUS */
				font-family: "iconfont";
				/* #endif*/
				font-family: iconfont;
				width: 40rpx;
				height: 40rpx;
			}
		
	.hl88-lr-popup-list{
		/* #ifdef APP-PLUS */
		height: 690rpx;
		/* #endif */
		
		/* #ifdef H5 || MP */
		max-height: 1000rpx;
		min-height: 200rpx;
		/* #endif */
	}	
		.hl88-lr-popup-list-item{
			position: relative;
			flex-direction: row;
			background: #fff;
			padding-left: 18rpx;
			padding-right: 18rpx;
			padding-top: 18rpx;
			padding-bottom: 18rpx;
			margin-bottom: 18rpx;
			border-radius: 18rpx
		}
			
			.hl88-lr-popup-list-item-img{
				width: 180rpx;
				height: 180rpx;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
				border-bottom-left-radius: 12rpx;
				overflow: hidden;
				background-color: #f7f7f7;
				margin-right: 20rpx;
			}
				.hl88-lr-popup-list-item-image{
					width: 180rpx;
					height: 180rpx;
					border-radius: 18rpx;
				}
				
			.hl88-lr-popup-list-item-subject{
				flex: 1;
				justify-content: space-between;
			}
				
				.hl88-lr-popup-list-item-subject-title{
					/* #ifdef MP || H5 */
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* #endif */
				}
				.hl88-lr-popup-list-item-subject-title-text{
					color: #222222;
					font-size: 28rpx;
					lines:2;
					text-overflow:ellipsis;
					/* #ifdef APP-PLUS */
					line-height: 36rpx;
					/* #endif */
				}
				
				.hl88-lr-popup-list-item-subject-operation{
					align-items: center;
					justify-content: space-between;
					flex-direction: row;
				}
				.hl88-lr-popup-list-item-subject-operation-price{
					
				}
					.hl88-lr-popup-list-item-subject-operation-price-text{
						color: #f72b36;
						font-size: 32rpx;
						font-weight: 500;
					}
				.hl88-lr-popup-list-item-subject-operation-button{
					flex-direction: row;
					
				}
					.hl88-lr-popup-list-item-subject-operation-button-seek{
						margin-right: 18rpx;
						border-radius: 100px;
						justify-content: center;
						align-items: center;
						height: 54rpx;
						width: 130rpx;
						border-left: 2rpx solid #6200ff;
						border-right: 2rpx solid #6200ff;
						border-top: 2rpx solid #6200ff;
						border-bottom: 2rpx solid #6200ff;
					}
						.hl88-lr-popup-list-item-subject-operation-button-seek-text{
							color: #6200ff;
							font-size: 27rpx;
						}
					.hl88-lr-popup-list-item-subject-operation-button-shopping{
						background-color: #f72b36;
						border-radius: 100px;
						justify-content: center;
						align-items: center;
						width: 54rpx;
						height: 54rpx;
					}
						.hl88-lr-popup-list-item-subject-operation-button-shopping-text{
							font-size: 30rpx;
							color: #fff;
							/* #ifndef APP-PLUS */
							font-family: "iconfont";
							/* #endif*/
							font-family: iconfont;
						}
</style>