<template>
  <view
    style="
      height: 100vh;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
    "
  >
    <scroll-view scroll-y="true" style="height: 100%" @scroll="scroll">
      <view class="bg-red">
        <view class="detail-box">
          <view class="header flex" style="popsition: relative">
            <view class="title">
              {{ details.BrandName }}
            </view>
            <view
              class="tag-box"
              v-if="
                details.FirstShopYear != null && details.FirstShopYear != ''
              "
            >
              <view class="tag1" style="width: 35px; height: 100%">{{
                details.FirstShopYear
              }}</view>
              <view class="tag2" style="width: 35px; height: 100%">首店</view>
            </view>
            <!-- 关注 -->
            <view
              style="
                width: 86px;
                height: 86px;
                margin-left: 12rpx;
                margin-right: -40rpx;
                position: absolute;
                top: 0;
                right: 30rpx;
              "
              @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="videoControl"
                  ></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="videoControl"
                  ></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="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">
              <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">
                {{ details.StoreExpansion }}
              </view>
            </view>
            <view class="baseinfo-item flex">
              <view class="baseinfo-label"> 拓展对接人： </view>
              <view
                class="baseinfo-con"
                v-if="
                  details.WishDescription == null ||
                  details.WishDescription == ''
                "
              >
                暂无
              </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">
            <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
            style="margin-top: 30rpx"
            v-if="
              details.WishDescription == '' || details.WishDescription == null
            "
          >
            无
          </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>
  </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: 5,
      ID: 0,
      details: {},
      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.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: {
    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 = [];
            this.details.BannerList.forEach((x) => {
              let obj = {
                name: x,
              };
              this.details.imgs.push(obj);
            });
          }
        }
      );
    },
    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;

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