<template>
	<view style="height: 100vh; overflow: hidden;box-sizing: border-box;position: relative;">
		<scroll-view scroll-y="true" style="height: 100%;" @scroll="scroll">
			<view class="bg-red">
				<view class="detail-box">
					<view class="header flex item-center">
						<view class="title">
							{{details.BrandName}}
						</view>
						<view class="tag-box">
							<text class="tag1">{{details.BrandType}}</text><text
								class="tag2">{{details.CustomerType}}</text>
						</view>
					</view>
					<view class="score-box flex item-center">
						<u-rate :current="rate" :count="5" :size="25" active-icon="star" active-color="#F30329"
							inactive-color="#b2b2b2" class="rate"></u-rate>
						<text class="score">4.9分</text>
						<text class="desire">开店意愿</text>
					</view>
					<view class="img-box">
						<view v-for="(src,index) in details.BannerList" :key="index">
							<image :src="src" class="img" mode="aspectFill" @click="previewImage(index)"></image>
						</view>
					</view>
					<view class="info1 flex flex-between">
						<view class="info1-item">
							<view class="info1-con">
								2
							</view>
							<view class="info1-title">
								店铺数量
							</view>
						</view>
						<view class="info1-item">
							<view class="info1-con">
								mall
							</view>
							<view class="info1-title">
								对标载体
							</view>
						</view>
						<view class="info1-item">
							<view class="info1-con">
								600 <text style="font-size: 24rpx;">㎡</text>
							</view>
							<view class="info1-title">
								面积需求
							</view>
						</view>
					</view>
					<view class="baseinfo">
						<view class="baseinfo-item flex ">
							<view class="baseinfo-label">
								拓店区域：
							</view>
							<view class="baseinfo-con">
								{{details.StoreExpansion}}
							</view>
						</view>
						<view class="baseinfo-item flex ">
							<view class="baseinfo-label">
								品牌定位：
							</view>
							<view class="baseinfo-con">
								商业地产+体育运动的新型“SPORTMALL”的全新商业场景
							</view>
						</view>
						<view class="baseinfo-item flex ">
							<view class="baseinfo-label">
								客群定位：
							</view>
							<view class="baseinfo-con">
								白领，家庭，学生等对体育有需求同时具有一定的消费能力的客户群体
							</view>
						</view>
						<view class="baseinfo-item flex ">
							<view class="baseinfo-label">
								行业定位：
							</view>
							<view class="baseinfo-con">
								高
							</view>
						</view>
						<view class="baseinfo-item flex ">
							<view class="baseinfo-label">
								开店方向：
							</view>
							<view class="baseinfo-con">
								东边
							</view>
						</view>
						<view class="baseinfo-item flex ">
							<view class="baseinfo-label">
								拓展对接人：
							</view>
							<view class="baseinfo-con">
								周董 18212151212
							</view>
						</view>
					</view>
					<view class="brand-title">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png"
							mode="widthFix"></image>
					</view>
					<view style="margin-top: 30rpx;" v-if="details.Advertising!=''">
						<h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse>
					</view>
					<view style="margin-top: 30rpx;" v-if="details.Advertising==''">
						无
					</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" id="ranqi" @click="showTips('ranqi',details.RanQiBZ,details.RanQi)">
							<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" id="dianliang"
							@click="showTips('dianliang',details.DianLiang,details.IsDianLiang)">
							<image :src="EquityList[3].ImagePath" v-if="details.IsDianLiang==1" mode="widthFix"></image>
							<image :src="EquityList[3].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text"
								:style="{color:details.IsDianLiang==1?'#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" id="paiyan"
							@click="showTips('paiyan',details.PaiYanBZ,details.PaiYan)">
							<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>
			</view>
		</scroll-view>
		<bianmarenTooltip :gravity="gravity" :tooltipShow="tooltipShow" :btns="tooltipBtns" :eleId="eleId">
		</bianmarenTooltip>
	</view>
</template>

<script>
	import hParse from "@/components/u-parse/parse.vue";
	import bianmarenTooltip from '../components/bianmaren-tooltips.vue'
	let timer
	export default {
		components: {
			hParse,
			bianmarenTooltip
		},
		data() {
			return {
				rate: 1,
				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"
					},
					{
						"Title": "开口尺寸",
						"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
						"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png"
					},

				],
				gravity: 'top',
				tooltipShow: false,
				tooltipBtns: ["今日sad"],
				eleId: "", //点击元素
			}
		},
		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;
			uni.setNavigationBarTitle({
				title: "详情"
			})
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#D40224',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onShareTimeline() { //朋友圈
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
			return {
				title: this.details.FullBrandName ? this.details.FullBrandName : '',
				query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up + '&id=' + this.ID,
				imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ? this.details.BannerList[0] : '',
			};
		},
		onShareAppMessage(res) { //朋友
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
			return {
				title: this.details.FullBrandName ? this.details.FullBrandName : '',
				path: "/pages/index/index?user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up + '&id=' + this
					.ID + '&JumpType=15',
				imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ? this.details.BannerList[0] : '',
			};

		},
		methods: {
			showTips(id, text, showis) {
				clearInterval(timer);
				if (this.eleId == id && this.tooltipShow == true) {
					this.tooltipShow = false
				} else {
					console.log(text, showis)
					if (text != undefined && text != null && text != '' && showis == 1) {
						this.eleId = id;
						this.tooltipBtns = [text]
						this.tooltipShow = true;
						timer = setTimeout(() => {
							this.tooltipShow = false;
						}, 3000)
					} else {
						this.tooltipShow = false;
					}

				}

			},
			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;

							if (res.data.VideoUrl == '') {
								this.active = 1
							};
							this.details.imgs = []
							this.details.BannerList.forEach(x => {
								let obj = {
									name: x
								}
								this.details.imgs.push(obj)
							})
						}
					}
				);
			},
			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.tooltipShow = false
				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 lang="scss" scoped>
	.flex {
		display: flex;
	}

	.wrap {
		flex-wrap: wrap;
	}

	.flex-center {
		justify-content: center;
		align-items: center;
	}

	.flex-between {
		justify-content: space-between
	}

	.item-center {
		align-items: center;
	}

	.bg-red {
		background-color: #D40224;
	}

	.detail-box {
		width: 100%;
		box-shadow: 0px -4rpx 71rpx 0rpx rgba(111, 111, 111, 0.26);
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		padding: 40rpx 40rpx 90rpx 40rpx;
		font-family: PingFang SC;
		background-color: #FFFFFF;
		.header {
			margin-bottom: 20rpx;

			.title {
				font-size: 42rpx;
				font-weight: 800;
				color: #1F1F1F;
				margin-right: 20rpx;
			}

			.tag-box {
				border-radius: 6rpx;

				.tag1 {
					padding: 7rpx 10rpx;
					background-color: #1F1F1F;
					font-size: 20rpx;
					color: #FFFFFF;
				}

				.tag2 {
					padding: 7rpx 10rpx;
					background-image: linear-gradient(90deg, #E8CEA5, #CAA974);
					font-size: 20rpx;
					color: #1F1F1F;
				}
			}
		}

		.score-box {
			height: 40rpx;
			margin-bottom: 35rpx;

			.rate {
				margin-right: 20rpx;
			}

			.score {
				font-size: 20rpx;
				font-weight: 500;
				color: #F30329;
				margin-right: 20rpx;
			}

			.desire {
				font-size: 20rpx;
				color: #111111;
			}
		}

		.img-box {
			height: 226rpx;
			border-radius: 20rpx;
			overflow-x: scroll;
			overflow-y: hidden;
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
			margin-bottom: 45rpx;

			.img {
				width: 216rpx;
				height: 226rpx;
				margin-right: 10rpx;
			}
		}

		.info1 {
			margin-bottom: 60rpx;

			.info1-item {
				width: 200rpx;

				.info1-con {
					font-size: 34rpx;
					font-weight: bold;
					color: #F30329;
					text-align: center;
					margin-bottom: 18rpx;
				}

				.info1-title {
					text-align: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #A4A4A4;
				}
			}
		}

		.baseinfo {
			margin-bottom: 40rpx;

			.baseinfo-item {
				margin-bottom: 30rpx;

				.baseinfo-label {
					font-size: 24rpx;
					font-weight: 500;
					color: #A4A4A4;
					margin-right: 10rpx;
					white-space: nowrap;
				}

				.baseinfo-con {
					font-size: 26rpx;
					font-weight: 500;
					color: #1F1F1F;
				}
			}
		}
	}

	.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>
