<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
		  open-type="contact"
		  :send-message-title="detailData.CarrierName"
		  :send-message-path="'/pages/kotra/carrier/detail_building?id=' + id"
		  :send-message-img="imgsList[0].url"
		  :show-message-card="true"
		>
		  <text style="margin-left: 10rpx;" :style="{background:mainColor}">获取联系方式</text>
		</button>
	</view>
  </view>
  
</template>
<script>
	import auth from "@/components/auth/index.vue";
	
export default {
	components: {
		auth
	},
  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: "",
      },
    };
  },
  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>
