<template name="create-float-page">
	<view>
		<view class="do-box">
			<view class="do-box-top">
				<text>请输入直播主题：</text>
				<view class="cover-input">
					<input type="text" v-model="livename" placeholder="请输入内容，吸引更多观众"
						placeholder-class="cover-inputplaceholder" />
				</view>
			</view>
			<view class="do-box-top" @click="chooseImage">
				<text>请上传直播封面：</text>
				<view class="cover-box">
					<image :src="imageSrc" mode="aspectFill" v-if='imageSrc'></image>
					<view class="cover-box-img" v-else>

						<image src="@/static/img/xj.png" mode="aspectFit"></image>
					</view>
					<view class="cover-text web-font"v-if='imageSrc'>更新封面</view>
					<view class="cover-text web-font"v-else style="color: #B3B3B3;">上传图片</view>
				</view>
			</view>
			<view class="do-box-check">
				<view class="do-box-check-top">
					<view class="do-box-check-left">
						<view class="check-top-imga">
							<image src="@/static/img/c2.png" mode="aspectFit"></image>
						</view>
						<view class="check-top-txt">请选择直播商品</view>
					</view>
					<view class="do-box-check-right">
						<view class="check-top-imgb" @click="shop">
							<image src="@/static/img/c1.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view class="" v-if="goodlist.length>0" @click="editshop(goodlist)">
					<scroll-view scroll-x="true" scroll-left="0" style="width: 450rpx;white-space: nowrap;">
						<view class="" v-for="(item,i) in goodlist" :key='i'
							style="width: 100rpx;height: 100rpx;margin-right: 20rpx;display:inline-block;">
							<image :src="item.app_goods_pic" mode="aspectFit" style="width: 100rpx;height: 100rpx;">
							</image>
						</view>
					</scroll-view>

				</view>




			</view>
		</view>

		<view class="start-but web-font" @click="create_live_room">开始直播</view>



		<uni-popup ref="popup" type="bottom" style="height: 560rpx;">
			<shoppinglist @getProduct="getProduct" :checkedObj="productList" @close='close'></shoppinglist>
		</uni-popup>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	import {
		good,
		createPushLive
	} from '@/api/api.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	
	import shoppinglist from '@/components/shoppinglist/shoppinglist.vue'
	export default {
		components: {
			uniPopup,
			shoppinglist
		},
		data() {
			return {

				livename: '',
				imageSrc: '',
				cover_path: '',
				inputValue: '新建直播间',

				productList: [],
				goodlist: [],
				userinfo: {}
			};
		},
		mounted() {
			if (this.isUserInfoExist) {
				console.log('用户信息存在');
			} else {
				console.log('用户信息不存在');
				uni.showModal({
					// title: '标题',
					content: '用户信息不存在,是否重新登录',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							// 用户点击了确定按钮
							uni.redirectTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户点击了取消按钮');
						}
					}
				});
			}
		},

		methods: {
			isUserInfoExist() {
				const userInfo = this.$store.state.app.userInfo;

				uni.sendHostEvent('userinfo', userInfo, (ret) => {
					//发送消息成功回调
					console.log('消息成功' + JSON.stringify(userInfo));
				});
				return !!userInfo; // 如果 userInfo 为空，则返回 false；否则返回 true
			},
			//关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			//选择商品
			shop() {
				this.$refs.popup.open()
			},
			editshop(e) {
				let arr1 = []
				for (let i in e) {
					arr1.push({
						product_id: e[i].app_goods_id,
						store_name: e[i].app_goods_name,
						image: e[i].app_goods_pic,
						price: e[i].app_goods_price,
					})
				}
				this.productList = arr1
				this.$refs.popup.open()
			},
			//获取商品数据
			getProduct(e) {

				this.goodlist = []
				for (let i in e) {
					this.goodlist.push({
						app_goods_id: e[i].product_id,
						app_goods_name: e[i].store_name,
						app_goods_pic: e[i].image,
						app_goods_price: e[i].price,
					})
				}

				this.$refs.popup.close()
			},

			//创建房间
			create_live_room: function(e) {

				if (this.cover_path == '') {
					uni.showToast({
						title: '请上传封面',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.livename == '') {
					uni.showToast({
						title: '请填写标题',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.goodlist.length == 0) {
					uni.showToast({
						title: '请添加商品',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}



				createPushLive({
					live_name: this.livename,
					cover: this.cover_path,
					app_name: "shop",
					app_user_id: this.$store.state.app.userInfo.uid,
					goods: this.goodlist
				}).then(res => {
					console.log(res)
					uni.sendHostEvent('log', res, (ret) => {
						//发送消息成功回调
						console.log('消息成功' + JSON.stringify(res));

					});

					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/live/anchor?data=' + encodeURIComponent(JSON.stringify(res
								.data))
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				}).catch((err) => {
					uni.sendHostEvent('log', err, (ret) => {
						//发送消息成功回调
						console.log('消息成功' + JSON.stringify(err));

					});
				})

			},
			
			chooseImage: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					// console.log(res.data.path)
					that.cover_path = res.data.path
					that.imageSrc = res.data.path
				});

			},
		}
	
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.top-do-box {
		width: 90%;
		margin: auto;
		/* #ifdef MP-WEIXIN */
		margin-top: 120upx;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: 60upx;
		/* #endif */
	}

	.ico-box {
		width: 70upx;
		height: 70upx;
		text-align: center;
	}

	.ico {
		color: #FFFFFF;
		font-size: 48upx;
	}

	.lico {
		color: #FFFFFF;
		font-size: 28upx;
		margin-right: 4upx;
	}

	.do-box {
		width: 90%;
		padding: 40upx 0;
		flex-wrap: nowrap;
		margin: auto;
		z-index: 9999;
	}

	.do-box-top {
		.cover-box {
			width: 193rpx;
			height: 193rpx;
			background: #F4F4F4;
			border-radius: 10upx;
			overflow: hidden;
			position: relative;
			margin-top: 32rpx;
		}

		.cover-box-img {
			width: 72rpx;
			height: 72rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cover-inputplaceholder {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #737373;
		}

		.cover-input {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000;
			margin-top: 32rpx;
			margin-bottom: 70rpx;
		}


		.cover-text {
			position: absolute;
			bottom: 30rpx;
			width: 100%;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			font-size: 28upx;
			color: #FFFFFF;
		}

		.cover-box image {
			width: 100%;
			height: 100%;
		}

	}


	.do-box-check {
		margin-top: 35rpx;
		flex: 1;

		.do-box-check-top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.do-box-check-left {
				display: flex;
				.check-top-imga {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}

				.check-top-txt {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.do-box-check-right {
				.check-top-imgb {
					width: 48rpx;
					height: 48rpx;


					image {
						width: 100%;
						height: 100%;
					}
				}
			}


		}

	}

	.check-lable {
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		background-color: rgba(0, 0, 0, .2);
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
	}

	.uni-input {
		background: none !important;
		color: #FFFFFF;
		font-size: 40upx;
		margin-top: 20upx;
	}

	/* 底部分享 */
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
		padding: 0 40upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}

	.uni-share-title {
		line-height: 60rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		text-align: center;
		border-bottom: 2upx solid #F0F0F0;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* justify-content: space-around; */
		padding: 15px 0;
		/* padding-bottom: 0; */
	}

	.content-image {
		width: 60rpx;
		height: 60rpx;
	}

	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}

	.type-lable {
		width: 20%;
		margin-left: 2.5%;
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		text-align: center;
		color: #666666;
		font-size: 24upx;
		border: 2upx solid #F0F0F0;
		margin-bottom: 20upx;
	}

	.type-lable-active {
		background-color: #ff2d54;
		border: 2upx solid #ff2d54;
		color: #FFFFFF;
	}

	.ok-but {
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 90upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #ff2d54;
		margin: 20upx auto;
	}

	.ok-but-none {
		background-color: #F0F0F0;
	}

	.loc-lable {
		line-height: 70upx;
		text-align: center;
		font-size: 32upx;
	}

	.loc-lable-active {
		color: #ff2d54;
	}

	.start-but {
		width: 60%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 90upx;
		font-size: 36upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #ff2d54;
		position: fixed;
		bottom: 100upx;
		left: 20%;
	}
</style>