<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==0"
				></u-swiper>
				<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==1">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616398636000_211.png" style="width: 100%;height: 100%;" mode="aspectFill"></image>
					<view style="position: absolute;left: 50%;right: 50%;margin-top: -49px;margin-left: -49px;width: 98px;height: 98px;border-radius: 20px;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: 37px;height: 44px;" 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;">
					111
				</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:''
			}
		},
		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,
				});
			},
		}

	}
</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;
	}
</style>
