<template>
	<view style="
      height: 100vh;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
    ">
		<scroll-view scroll-y="true" style="height:100%;background: #f1f2f3;" @scroll="scroll">
			<view :style="{background:mainColor}">
				<view class="detail-box">
					<view class="header">
						<view class="title">
							{{ details.BrandName }}
						</view>
						<view class="tag-box" style="display: flex; overflow: hidden;margin-top: 10rpx;">
							<text class="tag1">品牌类型</text><text class="tag2">{{ details.CategoryName }}</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">
						<image :src="src" class="img" mode="aspectFill" v-for="(src, index) in details.BannerList"
							:key="index" @click="previewImage(index)"></image>
					</view>
					<view class="info1 flex flex-between">
						<view class="info1-item">
							<view class="info1-con" :class="[u.TenantId!=18?'active':'']"> {{details.ShopNum}} </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" :class="[u.TenantId!=18?'active':'']">
								{{details.AreaRequirement}} <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.CustomerType}}
							</view>
						</view>
						<view class="baseinfo-item flex">
							<view class="baseinfo-label"> 品牌定位： </view>
							<view class="baseinfo-con"> {{details.BrandType}} </view>
						</view>
						<!--  <view class="baseinfo-item flex">
              <view class="baseinfo-label"> 开店方向： </view>
              <view class="baseinfo-con"> 东边 </view>
            </view> -->
					</view>
				</view>
			</view>
			<view style="margin-top: 40rpx;padding:40rpx;background: #FFFFFF;">
				<view class="carrier-item-detail" v-if="details.Introduce!=''">
					<div class="title">品牌介绍</div>
					<div class="content">{{ details.Introduce }}</div>
				</view>
				<view class="carrier-item-detail" v-if="details.Cooperation!=''">
					<div class="title">合作条件</div>
					<div class="content">{{ details.Cooperation }}</div>
				</view>
				<view class="carrier-item-detail" v-if="details.PropertyDemand!=''">
					<div class="title">物业需求</div>
					<div class="content">{{ details.PropertyDemand }}</div>
				</view>
				<view class="carrier-item-detail" v-if="details.Complementary!=''">
					<div class="title">配套需求</div>
					<div class="content">{{ details.Complementary }}</div>
				</view>
				<view style="height: 50px;"></view>
			</view>

		</scroll-view>
		<view class="carrier-query-contact">
			<!-- <button
    	  open-type="contact"
    	  :send-message-title="detailData.CarrierName"
    	  :send-message-path="'/pages/kotra/brand/detail_brand?id=' + ID"
    	  :send-message-img="details.BannerList[0]"
    	  :show-message-card="true"
    	>
    	  <text style="margin-left: 10rpx;" :style="{background:mainColor}">获取联系方式</text>
    	</button> -->
			<button @click="showContactInfo=true">
				<text style="margin-left: 10rpx;" :style="{background:mainColor}">获取联系方式</text>
			</button>
		</view>
		<contactInformation v-if="showContactInfo" :infor="details" @closeBtn="showContactInfo=false">
		</contactInformation>
	</view>
</template>

<script>
	import hParse from "@/components/u-parse/parse.vue";
	import bianmarenTooltip from "../components/bianmaren-tooltips.vue";
	import contactInformation from "./components/contactInformation";
	let timer;
	export default {
		components: {
			hParse,
			bianmarenTooltip,
			contactInformation
		},
		data() {
			return {
				rate: 1,
				ID: 0,
				details: {},
				typeList: [{
						Id: 0,
						Name: "视频",
					},
					{
						Id: 1,
						Name: "图片",
					},
				],
				boxOption: 0,
				navsOption: 0,
				titleStyle: {},
				active: 0,
				mainColor: "",
				controls: false, //显示默认控件
				gravity: "top",
				tooltipShow: false,
				tooltipBtns: ["今日sad"],
				eleId: "", //点击元素
				showContactInfo: false,
				u: {},
			};
		},
		onLoad(options) {
			this.u = uni.getStorageSync("mall_UserInfo");
			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: this.mainColor,
				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/kotra/brand/detail_brand?id=" + this.ID,
				imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ?
					this.details.BannerList[0] : "",
			};
		},
		methods: {
			GetBrandDetails() {
				this.request2({
						url: "/api/AppletTrade/GetBrandEnterpriseDetails",
						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);
							});
						}
					}
				);
			},
			previewImage(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();
			}
		},
	};
</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 40rpx 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;
			display: flex;

			.img {
				min-width: 32%;
				flex: 1;
				height: 226rpx;
				margin-right: 10rpx;
			}

			.img:last-child {
				margin-right: 0;
			}
		}

		.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-con.active {
					color: #017EDF;
				}

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

	.carrier-item-detail {
		padding-left: 22rpx;
		position: relative;
		margin-bottom: 25rpx;
	}

	.carrier-item-detail::before {
		position: absolute;
		display: block;
		content: ' ';
		width: 12rpx;
		height: 12rpx;
		background: #017EDF;
		border-radius: 50%;
		top: 12rpx;
		left: 0px;
	}

	.carrier-item-detail .title {
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		line-height: 38rpx;
		margin-bottom: 28rpx;
	}

	.carrier-item-detail .content {
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height: 48rpx;
	}

	.carrier-query-contact {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		background: #fff;
		box-shadow: 0px 0rpx 30rpx rgba(0, 0, 0, 0.15);
		padding: 20rpx;
		z-index: 9;
		text-align: right;
	}

	.carrier-query-contact button {
		display: inline-block;
		border-radius: 16rpx;
		border: none;
		font-weight: 400 !important;
		outline: none;
		font-size: 14px;
		font-weight: 600;
		color: #fff;
		background: #017edf;
	}

	.carrier-query-contact button::after {
		border: none !important;
	}
</style>