<template>
	<view style="height: 100vh; overflow: hidden;width:100vw;">
		<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
			<view style="height: 700rpx;position: relative;z-index: 1;" :style="{'opacity':(100-boxOption)+'%'}">
				<u-swiper
					:list="imgsList"
					:effect3d="false"
					:height="700"
					:interval="5000"
					:border-radius="0"
					@click="previewImage"
					name="url"
					 v-if="active==1"
				></u-swiper>
				<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">					
					<video id="myVideo" :src="files" style="width: 100%;height: 100%;"
					:controls='controls' 
					:show-center-play-btn='false'
					:show-fullscreen-btn='false' 
					@fullscreenchange='videoControl'
					></video>
					<view @click="enlarge(files)" style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" style="width: 37rpx;height: 44rpx;" mode=""></image>
					</view>
				</view>
				<view style="width: 100px;height: 50rpx;position: absolute;background-color: rgba(255,255,255,.6);border-radius: 50rpx;left: 50%;bottom: 80px;margin-left:-50px;">
					<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList" :active-color="mainColor"
						:current="active" @change="changeHandler" :show-bar="true" :bold="false" height="50"
						duration="0" font-size="24" :activeFontSize="24" :typeStyle="2"></u-tabs>
				</view>
				<view style="height: 50rpx;position: absolute;background-color: rgba(0,0,0,.6);border-radius: 50rpx;left: 30rpx;bottom: 80px;color:#FFF;padding:0 18rpx;display: flex;align-items: center;">
					<u-icon name="photo-o" size="26" color="#FFF" style="margin-right: 6rpx;"></u-icon>
					<text style="font-size: 22rpx;font-family: pingfang;">15</text>
				</view>
				<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
					<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
				</view>
			</view>
			<view class="kotra-title" :style="[titleStyle]">
				<view @click="goback">
					<u-icon name="arrow-left" size="44"></u-icon>
				</view>
				<view style="flex: 1;margin-left: 30rpx; text-align: left;">银泰in99</view>
				
			</view>
			<view style="position: relative;z-index: 2;">
				<view style="position: relative;top: -70px;border-top-left-radius: 30px;border-top-right-radius: 30px;height: 900px;background-color: #FFF;padding:60rpx 40rpx;">
					<view style="font-size: 21px;color: #1F1F1F;font-weight: bold;">
						成都拾野自然博物馆
					</view>
					<view style="width: 100%;height: 35px;display: flex;align-items: center;justify-content: space-between;">
						<view class="label-b" :style="{'background':mainColor}">
							shopping mall
						</view>
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-love.png" style="width: 63px;height: 63px;"></image>
					</view>
					<view class="brand-xinx">
						<view class="brand-xinx-item">
							<view class="brand-xinx-item-t" :style="{color:mainColor}">2</view>
							<view class="brand-xinx-item-m">店铺数量</view>
						</view>
						<view class="brand-xinx-item" style="padding-left: 10px;">
							<view class="brand-xinx-item-t" :style="{color:mainColor}">500<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-m">店铺面积</view>
						</view>
						<view class="brand-xinx-item" style="padding-left: 10px;">
							<view class="brand-xinx-item-t" :style="{color:mainColor}">600<text style="font-size: 12px;">㎡</text> </view>
							<view class="brand-xinx-item-m">需求面积</view>
						</view>
					</view>
					<view class="brand-x">
						<view class="brand-x-l">拓店区域：</view>
						<view class="brand-x-r">四川成都</view>
					</view>
					<view class="brand-x">
						<view class="brand-x-l">品牌定位：</view>
						<view class="brand-x-r">商业地产+体育运动的新型“SPORTMALL”的全新商业场景</view>
					</view>
					<view class="brand-x">
						<view class="brand-x-l">客群定位：</view>
						<view class="brand-x-r">白领，家庭，学生等对体育有需求同时具有一定的消费能力的客户群体</view>
					</view>
					
					<view style="width: 100%;position: relative;margin-top: 46px;background: rgba(252, 42, 76, 0.05);padding: 15px 0;border-radius: ;">
						<view style="width: 150rpx;height: 150rpx;background: #FFFFFF;box-shadow: 0px 2px 15px 0px rgba(167, 167, 167, 0.39);border-radius: 10px;position: absolute;left: 0;top: -23px;">
							<!-- 放图片 -->
						</view>
						<view style="width: calc(100vw - 40px - 150rpx - 20px);margin-left: 190rpx;">
							<view style="font-size: 13px;color: #B1B1B1;">品牌名称：</view>
							<view style="font-size: 15px;color: #1F1F1F;font-weight: bold;margin-top: 10px;">
								拾野·自然博物馆
							</view>
						</view>
					</view>
					<view class="brand-title">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image>
					</view>
					<view class="Listbox" >
						<view class="Listbox-item" v-for='(x,y) in EquityList' :key='y'>
							<image :src="x.ImagePath" style="width: 74rpx;height: auto;" mode="widthFix"></image>
							<text class="list-item-text" style="font-size: 12px;color: #424242;">{{x.Title}}</text>
						</view>
					</view>
					<view class="brand-title">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-ggxq.png" mode="widthFix"></image>
					</view>
					<view style="margin-top: 30px;font-size: 13px;color: #1F1F1F;">
						无
					</view>
					<view class="brand-title" style="width: 36px;">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-qt.png" mode="widthFix"></image>
					</view>
					<view style="margin-top: 30px;font-size: 13px;color: #1F1F1F;">
						城市一、二类商圈；选择繁华的商业中心，及地标性购物中心交通便利，项目周边交通状况良好，地铁直达最佳

					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs:[
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_561.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_819.png'
				],
				imgsList:[
					{
						url:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_561.png'
					},
					{
						url:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_819.png'
					}
				],
				typeList: [{
					Id: 0,
					Name: '视频'
				}, {
					Id: 1,
					Name: '图片'
				}],
				boxOption:0,
				navsOption:0,
				titleStyle:{},
				active:0,
				mainColor:'',
				controls:false,//显示默认控件
				files:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637516872805837677.mp4',
				EquityList:[
{
"Id":11,
"Title":"权益五",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_64.png",
"Content":"会员权益"
},
{
"Id":10,
"Title":"权益四",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_955.png",
"Content":"1对1客服"
},
{
"Id":9,
"Title":"权益三",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_417.png",
"Content":"会员权益"
},
{
"Id":8,
"Title":"权益二",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_864.png",
"Content":"会员权益"
},
{
"Id":7,
"Title":"所有权益",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_711.png",
"Content":"超级会员"
}
]
			}
		},
		onLoad(options) {
			let that=this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity:"0%"
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			changeHandler(i) {
				this.active = i;
			},
			previewImage(i) {
				console.log(i)
				uni.previewImage({
					urls: this.imgs,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			scroll(e) {
				this.boxOption = Math.floor((e.detail.scrollTop-50)/1.5);
				this.titleStyle.opacity=((e.detail.scrollTop-100)<0?0:Math.floor(e.detail.scrollTop-100))+"%"
				this.$forceUpdate()
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			enlarge(file) {
				// 全屏
				
				this.videoContext = uni.createVideoContext('myVideo');
				this.videoContext.requestFullScreen({
					direction:0
				})
			},
			videoControl(e){
				if(e.detail.fullScreen==false){
					this.videoContext.stop()
					this.controls=false
				}else{
					this.videoContext.play()
					this.controls=true
				}
			},
		}

	}
</script>

<style>
	.kotra-title {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}
	.label-b{
		height: 20px;
		padding: 0 3px;
		font-size: 13px;
		color: #FFF;
		border-radius: 4px;
		font-weight: bold;
	}
	.brand-xinx{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 15px;
	}
	.brand-xinx-item{
		width: 33%;
		font-size: 17px;
	}
	.brand-xinx-item-m{
		font-size: 12px;
		color: #A4A4A4;
		margin: 10px 0;
	}
	.brand-xinx-item-t{
		display: flex;
		align-items: flex-end;
		font-weight: bold;
	}
	.brand-x{
		width: 100%;
		display: flex;
		align-items: flex-start;
		margin-top: 18px;
	}
	.brand-x-l{
		font-size: 13px;
		color: #A4A4A4;
		width: 130rpx;
	}
	.brand-x-r{
		font-size: 13px;
		color: #1F1F1F;
		line-height: 20px;
		
		font-family: PingFang SC;
		width: calc(100vw - 40px - 130rpx);
	}
	.brand-title{
		width: 134rpx;
		margin-top: 30px;
	}
	.brand-title image{
		width: 100%;
		height: auto;
	}
	 .Listbox{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	 .Listbox-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 170rpx;
		align-items: center;
		justify-content: center;
	}
	 .list-item-text{
		width: calc(100vw / 4);
		margin-top: 5px;
		text-align: center;
	}
</style>
