<template>
	<view style="
      height: 100vh;
      overflow: hidden;
      width: 100vw;
      font-family: 'pingfang';
    ">
		<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 == 1"></u-swiper>
				<view style="background-color: #111; height: 700rpx; position: relative" v-if="active == 0">
					<video id="myVideo" :src="detailData.VideoUrl" style="width: 100%; height: 100%"
						:controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false"
						@fullscreenchange="videoControl" object-fit="fill"></video>
					<view @click="enlarge" 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, 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 style="
            width: 100px;
            height: 50rpx;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50rpx;
            left: 50%;
            bottom: 80px;
            margin-left: -50px;
          " v-if="imgsList.length > 0 && detailData.VideoUrl && detailData.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"
						class="custom-tab-item">
					</u-tabs>
				</view>
				<view v-if="imgsList.length > 0" style="
            height: 50rpx;
            position: absolute;
            background-color: rgba(0, 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">{{
            imgsList.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">{{
          detailData.Name
        }}</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;
            background-color: #fff;
            padding: 40rpx;
          ">
					<view style="display: flex; align-items: flex-start; margin-bottom: 30rpx">
						<view style="flex: 1">
							<view style="font-size: 42rpx; color: #1f1f1f; font-weight: 600">
								{{ detailData.Name }}
							</view>
							<view style="margin-top: 16rpx; display: flex; align-items: center">
								<!-- <u-tag
                  :text="detailData.ProjectTypeName"
                  mode="dark"
                  size="mini"
                  :bg-color="mainColor"
                /> -->
								<view class="carriertag">
									<view class="carriertagsub1">楼宇类别</view>
									<view class="carriertagsub2">{{detailData.CategoryName}}</view>
								</view>
							</view>
						</view>
						<!-- 关注 -->
						<!-- <view
              style="
                width: 120rpx;
                height: 120rpx;
                margin-left: 12rpx;
                margin-right: -40rpx;
              "
              @click="follow"
            >
              <image
                v-if="detailData.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="detailData.CollectId > 0"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/2024/Upload/Goods/638695271527470000.jpg"
                style="width: 100%; height: 100%"
              ></image>
            </view> -->
					</view>
					<!-- //奖章 -->
					<view class="MedalBox" v-if="detailData.listEnroll && detailData.listEnroll.length > 0">
						<view v-for="(item, index) in detailData.listEnroll" :key="index" class="MedalBoxItem">
							<image :src="item.MedalImageBig" mode="heightFix" style="height: 100%" />
						</view>
					</view>
					<view style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            ">
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">建筑面积：</text>
							<text :style="{color:mainColor}" style="font-weight: bold">{{ detailData.Areas }}</text>
						</view>
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">楼栋数量：</text>
							<text :style="{color:mainColor}" style="font-weight: bold">{{
			    detailData.BuildingNum
			  }}</text>
						</view>
					</view>
					<view style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            ">
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">楼宇层数：</text>
							<text :style="{color:mainColor}" style=" font-weight: bold">{{
                detailData.FloorNum
              }}</text>
						</view>
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">电梯数量：</text>
							<text :style="{color:mainColor}"
								style=" font-weight: bold">{{ detailData.ElevatorNum }}</text>
						</view>
					</view>

					<view style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            ">
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">楼层高度：</text>
							<text :style="{color:mainColor}"
								style="font-weight: bold">{{ detailData.FloorHeight }}m</text>
						</view>
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">投运时间：</text>
							<text :style="{color:mainColor}"
								style="font-weight: bold">{{ detailData.OperationTime }}</text>
						</view>
					</view>
					<view style="
		      display: flex;
		      align-items: center;
		      margin-bottom: 30rpx;
		      font-weight: 500;
		    ">
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">建设时间：</text>
							<text :style="{color:mainColor}"
								style="font-weight: bold">{{ detailData.ConstructionTime }}</text>
						</view>
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">统一运营：</text>
							<text :style="{color:mainColor}"
								style="font-weight: bold">{{ detailData.IsAllOperate==1?'是':'否' }}</text>
						</view>
					</view>
					<view style="
		      display: flex;
		      align-items: center;
		      margin-bottom: 30rpx;
		      font-weight: 500;
		    ">
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">物业费用：</text>
							<text :style="{color:mainColor}"
								style="font-weight: bold">{{ detailData.PropertyFee }}/月/㎡</text>
						</view>
						<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
							<text style="width: 156rpx; text-align: right">每月租金：</text>
							<text :style="{color:mainColor}"
								style="font-weight: bold">{{ detailData.RentFee }}/月/㎡</text>
						</view>
					</view>
					<!-- <view class="carrier-item-detail" v-if="detailData.Crowd!=''">
		  	<div class="title">是否统一运营</div>
		  			<div class="content">{{ detailData.IsAllOperate==1?'是':'否' }}</div>
		  </view>
		  <view class="carrier-item-detail" v-if="detailData.ConstructionTime!=''">
		  	<div class="title">建设时间</div>
		  			<div class="content">{{ detailData.ConstructionTime }}</div>
		  </view>
		  <view class="carrier-item-detail" v-if="detailData.PropertyFee!=''">
		  	<div class="title">物业费</div>
		  			<div class="content">{{ detailData.PropertyFee }}/月/㎡</div>
		  </view>
		  <view class="carrier-item-detail" v-if="detailData.RentFee!=''">
		  	<div class="title">月租金</div>
		  			<div class="content">{{ detailData.RentFee }}/月/㎡</div>
		  </view> -->

					<view style="
              font-size: 26rpx;
              color: #a4a4a4;
              margin-bottom: 30rpx;
              font-weight: 500;
			  display: flex;
            ">
						<text style="width: 128rpx; text-align: right; display: inline-block">开发商：</text>
						<text style="color: #1f1f1f; font-weight: bold;flex:1;width:1px;">{{
              detailData.Developers
            }}</text>
					</view>
					<view style="
		      font-size: 26rpx;
		      color: #a4a4a4;
		      margin-bottom: 30rpx;
		      font-weight: 500;
			  display: flex;
		    ">
						<text style="width: 128rpx; text-align: right; display: inline-block">物业公司：</text>
						<text style="color: #1f1f1f; font-weight: bold;flex:1;width:1px;">{{
		      detailData.PropertyComp
		    }}</text>
					</view>
					<view style="display: flex; align-items: center">
						<view style="
                width: 146rpx;
                height: 150rpx;
                background: #ffffff;
                box-shadow: 0px 4px 30px 0px rgba(167, 167, 167, 0.39);
                border-radius: 20px;
                display: flex;
                align-items: center;
				justify-content: center;
                padding: 10rpx;
              ">
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/2024/Upload/Goods/638695396161180000.png"
								style="width: 55%; height: auto" mode="widthFix"></image>
						</view>
						<view @click="goMap(detailData.Address, LatAndLon.lon, LatAndLon.lat)" style="
                flex: 1;
                padding-left: 34rpx;
                background: rgba(1,126,223, 0.05);
                height: 95rpx;
                display: flex;
                align-items: center;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
              ">
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_382.png"
								style="width: 27rpx; height: 33rpx; margin-right: 26rpx"></image>
							<view style="
                  width: 366rpx;
                  font-size: 30rpx;
                  color: #1f1f1f;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: 600;
                ">
								{{ detailData.Address }}
							</view>
							<u-icon name="arrow" size="22" color="#C2C2D1" style="margin: 0 30rpx 0 20rpx"></u-icon>
						</view>
					</view>
					<view style="
              height: 1px;
              background: #333f53;
              opacity: 0.1;
              margin: 60rpx 0;
            "></view>
					<!-- 新的 -->
					<view class="carrier-item-detail" v-if="detailData.SaleOrSelf!=''">
						<div class="title">销售/自持比例</div>
						<div class="content">{{ detailData.SaleOrSelf }}</div>
					</view>
					<view class="carrier-item-detail" v-if="detailData.BrandDemand!=''">
						<div class="title">目标招商业态</div>
						<div class="content">{{ detailData.BrandDemand }}</div>
					</view>

					<view class="carrier-item-detail" v-if="detailData.IndustryDirection!=''">
						<div class="title">产业方向</div>
						<div class="content">{{ detailData.IndustryDirection }}</div>
					</view>
					<view class="carrier-item-detail" v-if="detailData.BrandDemand!=''">
						<div class="title">招引需求</div>
						<div class="content">{{ detailData.BrandDemand }}</div>
					</view>
					<view class="carrier-item-detail" v-if="detailData.Other!=''">
						<div class="title">其他需求</div>
						<div class="content">{{ detailData.Other }}</div>
					</view>

					<!-- <view style="height: 30px;"> </view> -->
				</view>
			</view>
		</scroll-view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<view class="carrier-query-contact">
			<button @click="showContactInfo=true">
				<text style="margin-left: 10rpx;"  >获取联系方式</text>
			</button>
		</view>
		<contactInformation v-if="showContactInfo" :infor="detailData" @closeBtn="showContactInfo=false">
		</contactInformation>
	</view>

</template>
<script>
	import auth from "@/components/auth/index.vue";
	import contactInformation from "../brand/components/contactInformation.vue";
	export default {
		components: {
			auth,
			contactInformation
		},
		data() {
			return {
				showAuth: false,
				u: {},
				id: 0,
				imgsList: [],
				typeList: [{
						Id: 0,
						Name: "视频",
					},
					{
						Id: 1,
						Name: "图片",
					},
				],
				ProjectType: "",
				boxOption: 0,
				navsOption: 0,
				titleStyle: {},
				active: 0,
				mainColor: "",
				likeStatus: false,
				controls: false, //显示默认控件
				LatAndLon: {
					lon: "",
					lat: "",
				},
				detailData: {
					CreateDate: "",
				},
				showContactInfo: false,
			};
		},
		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.detailData.Name ? this.detailData.Name : "",
				query: "user_id=" +
					uid +
					"&SmallShopId=" +
					SmallShopId +
					"&Up=" +
					Up +
					"&id=" +
					this.id,
				imageUrl: this.imgsList.length > 0 ? this.imgsList[0].url : ""
			};
		},
		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.detailData.Name ? this.detailData.Name : "",
				path: "/pages/kotra/carrier/detail_building?id=" + this.id,
				imageUrl: this.imgsList.length > 0 ? this.imgsList[0].url : "",
			};
		},
		onLoad(options) {
			this.id = options.id;
			// this.ProjectType = options.type;

			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			} else {
				this.getDetail();
			}
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0%",
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
			console.log(this.mainColor)
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getDetail();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			changeHandler(i) {
				this.active = i;
			},
			previewImage(i, imgs = null) {
				const imgArray = imgs ? imgs : JSON.parse(this.detailData.Banner)
				uni.previewImage({
					urls: imgArray,
					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,
				});
			},
			goMap(name, lon, lat) {
				wx.openLocation({
					latitude: lat,
					longitude: lon,
					scale: 18,
					name,
					success: (res) => {
						// console.log(res)
					},
					fail: (err) => {
						// console.log(err)
					},
				});
			},
			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;
				}
			},
			// 获取详情
			getDetail() {
				let parms = {
					url: "/api/AppletTrade/GetBuildingDetails", //"/api/AppletTrade/GetCarrierDetails",
					data: {
						ID: this.id
					},
				};
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						this.detailData = res.data;
						this.ProjectType = res.data.ProjectTypeName;
						this.imgsList = [];
						if (!res.data.VideoUrl || res.data.VideoUrl == "") {
							this.active = 1;
						}
						if (res.data.Banner && res.data.Banner != '') {
							const imgs = JSON.parse(res.data.Banner)
							imgs.map((e) => {
								let obj = {
									url: e,
								};
								this.imgsList.push(obj);
							});
						}
						if (res.data.LatAndLon != null && res.data.LatAndLon.length > 0) {
							let LatLon = res.data.LatAndLon.split(",");
							this.LatAndLon.lat = parseFloat(LatLon[0]);
							this.LatAndLon.lon = parseFloat(LatLon[1]);
						}
					}
				});

			},
			// 关注与取消关注
			follow() {
				let that = this;
				let parms = {
					url: "/api/AppletTrade/GetCollect",
					data: {
						SourceId: this.id,
						Id: this.detailData.CollectId,
						Type: 4,
					},
				};
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						that.getDetail();
					}
				});
			},
		},
		mounted() {

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

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

	.FirstShopBox {
		margin-bottom: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.FirstShopBoxItem {
		width: 33.33%;
		height: 140rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	.HonorItem {
		height: 150rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.carriertag {
		/* width: 145rpx; */
		height: 40rpx;
		background: #fff;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin-left: 30rpx; */
		overflow: hidden;
	}

	.carriertagsub1 {
		height: 40rpx;
		background: #1f1f1f;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10rpx;
	}

	.carriertagsub2 {
		/* width: 81rpx; */
		padding: 0 10rpx;
		height: 40rpx;
		background: #d0aa7b;
		border-radius: 0px 4rpx 4rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

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

	.custom-tab-item .u-tab-item {
		line-height: 26px;
	}
</style>