<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"> {{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">
                {{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>
    </view>
  </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, //显示默认控件
      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: 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-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>
