<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="details.imgs"
					:effect3d="false"
					:height="700"
					:interval="5000"
					:border-radius="0"
					@click="previewImage"
					name='name'
					 v-if="active==1"
				></u-swiper>
				<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">					
					<video id="myVideo" :src="details.VideoUrl" style="width: 100%;height: 100%;"
					object-fit ='fill'
					:controls='controls' 
					:show-center-play-btn='false'
					:show-fullscreen-btn='false' 
					@fullscreenchange='videoControl'
					></video>
					<view @click="enlarge(details.VideoUrl)" 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;" v-if="details.VideoUrl!=''">
					<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;">{{details.BannerList.length}}</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;">{{details.BrandName}}</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;">
						{{details.FullBrandName}}
					</view>
					<view style="width: 100%;height: 35px;display: flex;align-items: center;justify-content: space-between;">
						<view class="label-b" :style="{'background':mainColor}">
							{{details.ProjectName}}
						</view>
						<image v-if="details.CollectId>0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-love.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
						<image v-if="details.CollectId==0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
					</view>
					<view class="brand-xinx">
						<view class="brand-xinx-item">
							<view class="brand-xinx-item-t" :style="{color:mainColor}">{{details.ShopNum}}</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}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea!=0">{{details.EndBuiltUpArea}}<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndBuiltUpArea==0 && details.BuiltUpArea!=0">{{details.BuiltUpArea}}<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea!=0 && details.EndBuiltUpArea!=0">{{details.BuiltUpArea}}~{{details.EndBuiltUpArea}}<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea==0">/</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}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement!=0">{{details.EndAreaRequirement}}<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndAreaRequirement==0 && details.AreaRequirement!=0">{{details.AreaRequirement}}<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement!=0 && details.EndAreaRequirement!=0">{{details.AreaRequirement}}~{{details.EndAreaRequirement}}<text style="font-size: 12px;">㎡</text></view>
							<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement==0">/</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">{{details.StoreExpansion}}</view>
					</view>
					<view class="brand-x">
						<view class="brand-x-l">品牌定位：</view>
						<view class="brand-x-r">{{details.BrandType}}</view>
					</view>
					<view class="brand-x">
						<view class="brand-x-l">客群定位：</view>
						<view class="brand-x-r">{{details.CustomerType}}</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;">
							
							<image :src='details.Logo' style="width: 100%;height: 100%;" mode="aspectFill"></image>
						</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;">
								{{details.BrandName}}
							</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" >
							<image :src="EquityList[0].ImagePath" v-if="details.Plumbing==1" mode="widthFix"></image>
							<image :src="EquityList[0].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.Plumbing==1?'#424242':'#D6D6D6'}">{{EquityList[0].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[1].ImagePath" v-if="details.Sewage==1"  mode="widthFix"></image>
							<image :src="EquityList[1].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.Sewage==1?'#424242':'#D6D6D6'}">{{EquityList[1].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[2].ImagePath" v-if="details.RanQi==1"  mode="widthFix"></image>
							<image :src="EquityList[2].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.RanQi==1?'#424242':'#D6D6D6'}">{{EquityList[2].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[3].ImagePath" v-if="details.DianLiang!=''"  mode="widthFix"></image>
							<image :src="EquityList[3].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.DianLiang!=''?'#424242':'#D6D6D6'}">{{EquityList[3].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[4].ImagePath" v-if="details.XinFeng==1"  mode="widthFix"></image>
							<image :src="EquityList[4].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.XinFeng==1?'#424242':'#D6D6D6'}">{{EquityList[4].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[5].ImagePath" v-if="details.PaiYan==1"  mode="widthFix"></image>
							<image :src="EquityList[5].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.PaiYan==1?'#424242':'#D6D6D6'}">{{EquityList[5].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[6].ImagePath" v-if="details.KongTiao==1"  mode="widthFix"></image>
							<image :src="EquityList[6].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.KongTiao==1?'#424242':'#D6D6D6'}">{{EquityList[6].Title}}</text>
						</view>
						<view class="Listbox-item" >
							<image :src="EquityList[7].ImagePath" v-if="details.Caliber==1"  mode="widthFix"></image>
							<image :src="EquityList[7].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{color:details.Caliber==1?'#424242':'#D6D6D6'}">{{EquityList[7].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;" v-if="details.Advertising!=''">
						<h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse>
					</view>
					<view style="margin-top: 30px;" v-if="details.Advertising==''">
						无
					</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;" v-if="details.Other!=''">
						<h-parse :content="details.Other" @navigate="clickDescription"></h-parse>

					</view>
					<view style="margin-top: 30px;" v-if="details.Other==''">
						无
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import hParse from "@/components/u-parse/parse.vue";
	export default {
		components: {
		
		  hParse
		},
		data() {
			return {
				ID:0,
				details:{},
				typeList: [{
					Id: 0,
					Name: '视频'
				}, {
					Id: 1,
					Name: '图片'
				}],
				boxOption:0,
				navsOption:0,
				titleStyle:{},
				active:0,
				mainColor:'',
				controls:false,//显示默认控件
				EquityList:[
					{"Title":"上下水","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png",
						"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png",
					},
					{"Title":"排污","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png"},
					{"Title":"燃气","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png"},
					{"Title":"电量负荷","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png"},
					{"Title":"新风","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png"},
					{"Title":"排烟量","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png"},
					{"Title":"空调","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"},
					{"Title":"管径","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
					"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"},

				]
			}
		},
		onLoad(options) {
			let that=this
			if(options && options.id){
				this.ID = options.id
				this.GetBrandDetails()
			}
			
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity:"0%"
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			clickDescription(e) {
			  console.log(e);
			},
			GetBrandDetails(){
				this.request2(
					{
						url: '/api/AppletTrade/GetBrandDetails',
						data: {ID:this.ID}
					},
					res => {
						if(res.resultCode==1){
							this.details = res.data;
							console.log(this.details)
							if(res.data.VideoUrl==''){
								this.active=1
							};
							this.details.imgs=[]
							this.details.BannerList.forEach(x=>{
								let obj= {
									name:x
								}
								this.details.imgs.push(obj)
							})
							console.log(this.details.imgs)
							
						}
					}
				);
			},
			changeHandler(i) {
				this.active = i;
			},
			previewImage(i) {
				console.log(i)
				uni.previewImage({
					urls: this.details.BannerList,
					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
				}
			},
			getlove(){
				this.request2(
					{
						url: '/api/AppletTrade/GetCollect',
						data: {Type:2,SourceId:this.ID,Id:this.details.CollectId}
					},
					res => {
						if(res.resultCode==1){
							uni.showToast({
							  title: res.message,
							  icon:'none'
							});
							this.GetBrandDetails()
						}
					}
				);
			}
		}

	}
</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;
	}
	.Listbox-item image{
		width: 74rpx;height: auto;	
	}

	 .list-item-text{
		width: calc(100vw / 4);
		margin-top: 5px;
		text-align: center;
		font-size: 12px;
	}
</style>
