<template>
	<view style="
      height: 100vh;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
    ">
		<scroll-view scroll-y="true" style="height: 100%" @scroll="scroll" v-if='details'>
			<view class="bg-red">
				<view class="detail-box">
					<view class="header flex" style="popsition: relative">
						<view class="title" style="display: flex; align-items: flex-end">
							{{ details.BrandName }}

							<view v-for="(item, index) in details.PrizeList" :key="index" class="screenBoxItem" @click="chooseYear(item)">
								<view class="screenBoxItemYear activeYear">{{ item.YearInfo
                }}</view>
								<view class="screenBoxItemName activeName">{{
                  item.Name
                }}</view>
							</view>
						</view>

						<!-- 关注 -->
						<!-- <view style="
                width: 120rpx;
                height: 120rpx;
                margin-left: 12rpx;
                margin-right: -40rpx;
                position: absolute;
                top: 0;
                right: 50rpx;
              "
						 @click="follow">
							<image v-if="details.CollectId == 0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png"
							 style="width: 100%; height: 100%"></image>
							<image v-if="details.CollectId > 0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_370.png"
							 style="width: 100%; height: 100%"></image>
						</view> -->
					</view>
					<view class="score-box flex item-center" v-if="details.OpenShopWish != -1">
						<u-rate :current="details.OpenShopWish" :count="5" :size="25" active-icon="star" active-color="#F30329" :disabled="true"
						 inactive-color="#b2b2b2" class="rate"></u-rate>
						<text class="score">{{ details.OpenShopWish ? details.OpenShopWish : "0" }}分</text>
						<text class="desire">开店意愿</text>
					</view>
					<view v-if="details.OpenShopWish == -1">
						<text class="desire">无开店意愿</text>
					</view>
					<view style="width: 100%">
						<view v-if="!details.VideoUrl || details.VideoUrl == ''" class="img-box">
							<view v-if="details.BannerList.length == 1" v-for="(src, index) in details.BannerList" :key="index" style="width: 100%; height: 226rpx">
								<image :src="src" style="width: 100%; height: 100%; border-radius: 20rpx" mode="aspectFill" @click="previewImage(0)"></image>
							</view>
							<view v-if="details.BannerList.length == 2" v-for="(src, index) in details.BannerList" :key="index" style="width: calc((100vw - 80rpx - 10rpx) / 2); height: 226rpx">
								<image :src="src" v-if="index == 0" style="
                    width: 100%;
                    height: 100%;
                    border-radius: 20rpx 0 0 20rpx;
                  "
								 mode="aspectFill" @click="previewImage(index)"></image>
								<image :src="src" v-if="index == 1" style="
                    width: 100%;
                    height: 100%;
                    border-radius: 0 20rpx 20rpx 0;
                  "
								 mode="aspectFill" @click="previewImage(index)"></image>
							</view>
							<view v-for="(src, index) in details.BannerList" :key="index" v-if="details.BannerList.length > 2" style="height: 226rpx">
								<image :src="src" class="img" mode="aspectFill" v-if="index == 0" @click="previewImage(index)" style="border-radius: 20rpx 0 0 20rpx"></image>
								<image :src="src" class="img" mode="aspectFill" v-if="index == 1" @click="previewImage(index)"></image>
								<image :src="src" class="img" mode="aspectFill" v-if="index == 2" @click="previewImage(index)" style="border-radius: 0 20rpx 20rpx 0"></image>
							</view>
						</view>
						<view v-else>
							<view v-if="details.BannerList.length == 1" class="img-box">
								<view style="
                    width: calc((100vw - 80rpx - 10rpx) / 2);
                    height: 226rpx;
                    position: relative;
                  ">
									<video id="myVideo" :src="details.VideoUrl" style="
                      width: 100%;
                      height: 100%;
                      border-radius: 20rpx 0 0 20rpx;
                    "
									 :controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false" @fullscreenchange="brandvideoControl"></video>
									<view @click="enlarge(details.VideoUrl)" style="
                      position: absolute;
                      left: 50%;
                      top: 50%;
                      margin-top: -30rpx;
                      margin-left: -30rpx;
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 20rpx;
                      background-color: rgba(255, 255, 255, 0.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 v-for="(src, index) in details.BannerList" :key="index" style="
                    width: calc((100vw - 80rpx - 10rpx) / 2);
                    height: 226rpx;
                  ">
									<image :src="src" style="
                      width: 100%;
                      height: 100%;
                      border-radius: 0 20rpx 20rpx 0;
                    "
									 mode="aspectFill" @click="previewImage(index)"></image>
								</view>
							</view>
							<view v-if="details.BannerList.length > 1" class="img-box">
								<view style="
                    width: calc((100vw - 80rpx - 20rpx) / 3);
                    height: 226rpx;
                    position: relative;
                  ">
									<video id="myVideo" :src="details.VideoUrl" style="
                      width: 100%;
                      height: 100%;
                      border-radius: 20rpx 0 0 20rpx;
                    "
									 :controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false" @fullscreenchange="brandvideoControl"></video>
									<view @click="enlarge(details.VideoUrl)" style="
                      position: absolute;
                      left: 50%;
                      top: 50%;
                      margin-top: -30rpx;
                      margin-left: -30rpx;
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 20rpx;
                      background-color: rgba(255, 255, 255, 0.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 v-for="(src, index) in details.BannerList" :key="index" style="
                    width: calc((100vw - 80rpx - 10rpx) / 3);
                    height: 226rpx;
                  "
								 v-if="index < 2">
									<image :src="src" style="width: 100%; height: 100%" v-if="index == 0" mode="aspectFill" @click="previewImage(index)"></image>
									<image :src="src" style="
                      width: 100%;
                      height: 100%;
                      border-radius: 0 20rpx 20rpx 0;
                    "
									 v-if="index == 1" mode="aspectFill" @click="previewImage(index)"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- //奖章 -->
					<view class="MedalBox" v-if="details.ListEnroll.length > 0">
						<view v-for="(item, index) in details.ListEnroll" :key="index" class="MedalBoxItem">
							<image :src="item.MedalImageBig" mode="heightFix" style="height: 100%" />
						</view>
					</view>
					<view class="info1 flex flex-between">
						<view class="info1-item">
							<view class="info1-con">
								{{ details.ShopNum }}
							</view>
							<view class="info1-title"> 店铺数量 </view>
						</view>
						<!-- <view class="info1-item">
              <view class="info1-con">
                {{ details.ProjectName }}
              </view>
              <view class="info1-title"> 对标载体 </view>
            </view> -->
						<view class="info1-item">
							<view class="info1-con">
								<view class="brand-xinx-item-t" :style="{ color: mainColor }" v-if="
                    details.AreaRequirement == 0 &&
                    details.EndAreaRequirement != 0
                  ">{{
                    details.EndAreaRequirement >= 10000
                      ? details.EndAreaRequirement / 10000 + "万"
                      : 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 >= 10000
                      ? details.AreaRequirement / 10000 + "万"
                      : 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 >= 10000
                      ? details.AreaRequirement / 10000 + "万"
                      : details.AreaRequirement
                  }}~{{
                    details.EndAreaRequirement >= 10000
                      ? details.EndAreaRequirement / 10000 + "万"
                      : 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>
							<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" v-if="details.CustomerType && details.CustomerType!='' ">
							<view class="baseinfo-label"> 客群定位： </view>
							<view class="baseinfo-con">
								{{ details.CustomerType }}
							</view>
						</view>
						<view class="baseinfo-item flex" v-if="details.BrandType && details.BrandType!='' ">
							<view class="baseinfo-label"> 行业定位： </view>
							<view class="baseinfo-con">
								{{ details.BrandType }}
							</view>
						</view>
				
						<view class="baseinfo-item flex" v-if="details.StoreExpansion && details.StoreExpansion!='' ">
							<view class="baseinfo-label"> 开店方向： </view>
							<view class="baseinfo-con">
								{{ details.StoreExpansion }}
							</view>
						</view>
						<view class="baseinfo-item flex" v-if="details.IsInChengdu && details.IsInChengdu==1 ">
							<view class="baseinfo-label"> 成都落地： </view>
							<view class="baseinfo-con">
								是
							</view>
						</view>
						<view class="baseinfo-item flex" v-if="details.Other && details.Other!='' ">
							<view class="baseinfo-label"> 招引需求： </view>
							<view class="baseinfo-con">
								<rich-text :nodes="details.Other"></rich-text>
							</view>
						</view>
						<view class="baseinfo-item flex" v-if="details.WishDescription && details.WishDescription != ''">
							<view class="baseinfo-label"> 拓展对接人： </view>
						</view>
						<view style="width: 100%; height: 360rpx" v-if="details.WishDescription && details.WishDescription != ''">
							<image :src="details.WishCard" style="width: 100%; height: 360rpx; border-radius: 20px" @click="previewImage2(details.WishCard)"></image>
						</view>
					</view>
					<view class="brand-title" v-if="details.WishDescription && details.WishDescription != ''">
						<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.WishDescription && details.WishDescription != ''">
						<h-parse :content="details.WishDescription" @navigate="clickDescription"></h-parse>
					</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 id="kiakou" class="Listbox-item" @click="showTips('kiakou', details.ShopSize, details.IsShopSize)">
							<image :src="EquityList[8].ImagePath" v-if="details.IsShopSize == 1" mode="widthFix"></image>
							<image :src="EquityList[8].Image_n" v-else mode="widthFix"></image>
							<text class="list-item-text" :style="{
                  color: details.IsShopSize == 1 ? '#424242' : '#D6D6D6',
                }">{{ EquityList[8].Title }}</text>
						</view>
						<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[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 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" 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[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>
			
				</view>
			</view>
		</scroll-view>
		<bianmarenTooltip :gravity="gravity" :tooltipShow="tooltipShow" :btns="tooltipBtns" :eleId="eleId">
		</bianmarenTooltip>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import hParse from "@/components/u-parse/parse.vue";
	import bianmarenTooltip from "../components/bianmaren-tooltips.vue";
	let timer;
	export default {
		components: {
			hParse,
			bianmarenTooltip,
			auth
		},
		data() {
			return {
				showAuth: false,
				u: {},
				rate: 5,
				ID: 0,
				details: null,
				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: "", //点击元素
				islook: false, //是否可以浏览心愿
			};
		},
		onLoad(options) {
			let that = this;
			if (options && options.id) {
				this.ID = options.id;

				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
				} else {
					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: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.GetBrandDetails();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			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 = [];
							if(this.details.Other && this.details.Other!=''){
								this.details.Other = this.textFormat(this.details.Other);
							}
							
							this.details.BannerList.forEach((x) => {
								let obj = {
									name: x,
								};
								this.details.imgs.push(obj);
							});
						}
					}
				);
			},
			textFormat(val) {
				// 格式化文字展示文本域格式文字
				if (val) {
					let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#');
					newString = newString.replace(/_#_@/g, '<br/>'); // IE7-8
					newString = newString.replace(/_@/g, '<br/>'); // IE9、FF、chrome
					newString = newString.replace(/\s/g, '&nbsp;'); // 空格处理
					return newString;
				}
			},
			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);
						},
					},
				});
			},
			previewImage2(i) {
				uni.previewImage({
					urls: [this.details.WishCard],
					current: 0,
					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,
				});
			},
			brandvideoControl(e) {
				console.log(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();
						}
					}
				);
			},
			// 关注与取消关注
			follow() {
				let that = this;
				let parms = {
					url: "/api/AppletTrade/GetCollect",
					data: {
						SourceId: this.ID,
						Id: this.details.CollectId,
						Type: 2,
					},
				};
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						that.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;
			align-items: flex-start;

			.title {
				max-width: calc(100vw - 100rpx - 70rpx);
				font-size: 42rpx;
				font-weight: 800;
				color: #1f1f1f;
				margin-right: 20rpx;
			}

			.tag-box {
				border-radius: 6rpx;
				width: 70px;
				display: flex;
				margin-top: 4px;
				height: 20px;

				.tag1 {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #1f1f1f;
					font-size: 20rpx;
					color: #ffffff;
				}

				.tag2 {
					display: flex;
					align-items: center;
					justify-content: center;
					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;

			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
			margin-bottom: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			overflow: hidden;

			.img {
				width: calc((100vw - 80rpx - 20rpx) / 3);
				height: 226rpx;
			}
		}

		.info1 {
			margin-bottom: 60rpx;

			.info1-item {
				// width: 200rpx;之前的3个是200  下面是2个 就平分了宽度
				width: calc((100vw - 80rpx - 20rpx) / 2);

				.info1-con {
					font-size: 30rpx;
					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;
	}

	.screenBoxItem {
		/* width: 130rpx; */
		height: 30rpx;
		background-color: #e2e2e2;
		border-radius: 23rpx;
		margin-right: 30rpx;
		display: flex;
		color: #999999;
		overflow: hidden;
		margin: 0 10rpx;
		overflow: hidden;
		border-radius: 6rpx;
	}

	.screenBoxItemYear {
		/* width: 50%; */
		height: 30rpx;
		background: #e2e2e2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		white-space: nowrap;
		border-radius: 6rpx 0px 0px 6rpx;
		box-sizing: border-box;
		padding: 0 10rpx;
	}

	.activeYear {
		background: #1f1f1f;
		color: #ffffff;
	}

	.screenBoxItemName {
		/* width: 50%; */
		height: 30rpx;
		background: #eaeaea;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		box-sizing: border-box;
		padding: 0 10rpx;
		white-space: nowrap;
		border-radius: 0px 6rpx 6rpx 0px;
	}

	.activeName {
		background: #d0aa7b;
		color: #111111;
	}

	.MedalBox {
		background: #f0f0f0;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	.MedalBoxItem {
		width: 30%;
		height: 135rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
	}
</style>
