<template>
  <view
    class="themes-head position-r"
    :style="{ 'padding-top': navHeight + 'px' }"
  >
    <view
      class="head-bx-h"
      :style="'height:'+ navHeight+'px;background:'+(shopInfo.bgimg ?'url('+ shopInfo.bgimg+');background-size: 100% auto;background-position: top 0 left 0':'')"
    >
      <view class="head-bx-ct position-a flex al-item-center">
        <text class="iconfont icon-icon_arrow_left" @tap="goBack"></text>
        <text
          class="iconfont icon-shouye"
          @tap="goto"
          data-url="/pages/index/index"
          data-opentype="reLaunch"
        ></text>
        <view class="search flex al-item-center j-between border-rius-r">
          <text class="iconfont icon-search"></text>
          <input
            placeholder="请输入搜索内容..."
            type="text"
            v-model="searchVlaue"
            @confirm="search"
          />
        </view>
      </view>
    </view>

    <view class="head-bx-cont">
      <view class="head-store flex al-item-center j-between">
        <view class="store-l flex al-item-center">
          <image class="store-logo" :src="shopInfo.logo"></image>
          <view class="store-l-c flex1">
            <view
              class="store-l-tlt flex al-item-center"
              @click="goto"
              :data-url="
                '/pagesA/shop/shop-detail?bid=' +
                shopInfo.id +
                '&pagestext=' +
                shopInfo.name
              "
            >
              <text class="head-store__name">{{ shopInfo.name || "" }}</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
            <!-- <view class="store-l-tx text-center" :style="{'background-color': '#FF8017'}">自营</view> -->
          </view>
        </view>
        <view class="store-r flex flex-colum al-item-center">
          <view
            @tap="followFn"
            class="store-r-tlt text-center"
            :class="shopInfo.isFollow ? 'followed' : 'isFollow'"
          >
            <image
              class="follow-icon"
              v-if="!shopInfo.isFollow"
              :src="event_rul + '/static/theme/follow-icon.svg'"
            ></image>
            <text>{{ shopInfo.isFollow ? "已关注" : "关注" }}</text>
          </view>
          <!-- <view class="store-r-tlt text-center" :style="{'border-color': '#FF8017', 'color': '#FF8017','border':' 1px solid'}">已关注</view> -->
          <view class="store-r-tx">{{ shopInfo.attention || 0 }}人关注</view>
        </view>
      </view>
      <view
        v-if="isShowNav"
        class="head-nav-list flex j-between"
        :class="{ 'isFixed': navFixed }"
        :style="'top:'+ (navHeight - 1) + 'px;background:'+(navFixed ? (shopInfo.bgimg ? 'url('+ shopInfo.bgimg+');background-size: 100% auto;background-position: top -60px left 0':''):'')"
      >
        <block v-for="(item, idx) in navBar" :key="idx">
          <view class="nav-list-itm" @tap="selectNav(idx)">
            <view class="itm-tx color-white">{{ item }}</view>
            <view
              v-show="navIndex == idx"
              class="itm-select border-rius-r"
            ></view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
var app = getApp();
export default {
  props: {
    navHeight: {
      type: Number,
      default: 0,
    },
    navList: {
      typa: Array,
      default: function() {
        return [];
      },
    },
    shopData: {
      typa: Object,
      default: {},
    },
    navIndex: {
      type: Number,
      default: 0,
    },
    isShowNav: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      bxContHeight: 0,
      timeout: null,
      timeouttwo: null,
      searchVlaue: "",
      shopInfo: this.shopData,
      event_rul: app.globalData.event_url,
      navBar: [],
    };
  },
  computed: {
    ...mapState(["opt","navFixed","heardHeight"]),
  },
  watch: {
    // 监听shopData变化
    shopData(newV, oldV) {
      this.shopInfo = newV;
    },
    navList: {
      handler: function(newV, oldV) {
        this.navBar = newV;
      },
      deep: true,
    }
  },
  mounted() {
    const vr = uni.getSystemInfoSync();
    this.styleHeight();
    this.getData();
  },
  beforeDestroy() {
    clearTimeout(this.timeout);
	clearTimeout(this.timeouttwo);
  },
  methods: {
    ...mapActions(["acNavHeightTop","acHeardHeight"]),
    getData() {
      if (this.navList.length == 0) {
        this.navBar = ["精选", "商品", "活动", "新品"];
      } else {
        this.navBar = this.navList;
      }
      const query = uni.createSelectorQuery().in(this);
      this.timeouttwo = setTimeout(() => {
        let listTop = 0;
        query.select(".head-nav-list").boundingClientRect((data) => {
          listTop = data ? Number(data.top) : 0;
        }).exec();
        query.select(".head-bx-cont").boundingClientRect((data) => {
          const heightTop = listTop - (data ? Number(data.top) : 0);
          this.acNavHeightTop(heightTop);
        }).exec();
      }, 200)
    },
    // 关注店铺
    followFn() {
      var that = this;
      console.log("打印店铺信息+++++", this.shopData, this.shopData);
      // 暂时写死 follow_id：27，正确为 follow_id：that.shopData.id
      app.post(
        "ApiMy/addFollow",
        { follow_id: that.shopData.id || "", type: "store" },
        function (res) {
          console.log("点击关注和取消关注addFollow===========", res);
          if (res) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
          that.getInfo();
        }
      );
    },

    getInfo() {
      var that = this;
      // 暂时写死 id：27，正确为 id：that.shopData.id
      app.post(
        "/ApiBusiness/follow",
        { bid: that.shopData.id || "" },
        function (res) {
          that.$set(that.shopData, "attention", res.data.followCount);
          that.$set(that.shopData, "isFollow", res.data.isFollow);

          console.log("-----", that.shopData);
          // 公共头部信息
          uni.setStorage({
            key: "header_data",
            data: that.shopData,
          });
        }
      );
    },

    styleHeight() {
      let query = uni.createSelectorQuery().in(this);
      query.select(".head-bx-cont").boundingClientRect();
      query.select(".themes-head").boundingClientRect();
		this.timeout = setTimeout(() => {
			query.exec((res) => {
			  if (res[0] != null && res[1] != null) {
			    this.bxContHeight = res[0].height;
          if(!this.navFixed) {
            this.acHeardHeight(res[1].height)
          }
			  }
			});
		}, 200)
    },
    // 返回
    goBack() {
      uni.navigateBack();
    },
    // 搜索
    search() {
      uni.navigateTo({
        url:
          "/pagesA/shop/search?keyword=" +
          this.searchVlaue +
          "&id=" +
          this.shopData.id,
      });
      return;
    },
    selectNav(idx) {
        this.$emit("navselect", idx, this.bxContHeight, this.heardHeight);
    },
  },
};
</script>

<style lang="scss" scoped>
.themes-head {
  width: 100%;
  flex-shrink: 0;
  z-index: 3;
  
  .bg-fh {
	  width: 100%;
	  top: 0;
	  left: 0;
	  z-index: 33;
  }
  .head-bx-h {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-size: 100% 1020rpx;
    background-position: top 0 left 0;
    .head-bx-ct {
      height: 32px;
      left: 0;
      bottom: 4px;

      .icon-icon_arrow_left {
        padding-left: 30rpx;
        color: #fff;
        font-size: 50rpx;
      }
      .icon-shouye {
        font-size: 45rpx;
        color: #fff;
        padding: 10rpx 20rpx;
      }
      .search {
        margin-left: 20rpx;
        width: 60%;
        height: 100%;
        padding: 0 20rpx;
        background-color: #fff;

        .icon-search {
          font-size: 50rpx;
          color: #ababab;
        }
        input {
          padding-left: 20rpx;
        }
      }
    }
  }

  .head-bx-cont {
    padding-top: 30rpx;

    .head-store {
      color: #fff;
      padding: 0 28rpx;
      &__name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        text-align: justify;
      }
      .store-l {
        width: 80%;
        .store-logo {
          width: 100rpx;
          height: 100rpx;
          border-radius: 12rpx;
        }

        .store-l-c {
          padding-left: 20rpx;
          .store-l-tlt {
            font-size: 32rpx;
            white-space: pre-wrap;
            word-break: break-all;
            padding-right: 45rpx;
            display: flex;
            align-items: center;

            .icon-arrow-right {
              font-size: 40rpx;
              padding: 6rpx 0 0 0;
            }
          }
          .store-l-tx {
            min-width: 60rpx;
            // min-height: 30rpx;
            padding: 4rpx 10rpx;
            margin-top: 8rpx;
            line-height: 30rpx;
            display: inline-block;
            font-size: 24rpx;
            border-radius: 4rpx;
            font-size: 24rpx;
          }
        }
      }

      .store-r {
        .store-r-tlt {
          width: 120rpx;
          height: 48rpx;
          line-height: 48rpx;
          border-radius: 24rpx;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          &.isFollow {
              background-image: linear-gradient(
                152deg,
                rgba(255, 116, 25, 1) 0,
                rgba(237, 12, 12, 1) 100%
              );
            color: #fff;
            .follow-icon {
              width: 28rpx;
              height: 24rpx;
              margin-right: 6rpx;
            }
          }
          &.followed {
            color: #fff;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 200%;
              height: 200%;
              border: 2rpx solid #fff;
              box-sizing: border-box;
              transform: scale(0.5, 0.5);
              border-radius: 48rpx;
              transform-origin: 0 0;
            }
          }
        }

        .store-r-tx {
          padding-top: 6rpx;
          font-size: 22rpx;
        }
      }
    }

    .head-nav-list {
      padding: 0 28rpx;
      font-size: 28rpx;
      align-items: flex-start;
      background-size: 100% 1020rpx;
      &.isFixed {
        position: fixed;
        left: 0;
        right: 0;
		z-index: 36;
      }
      .nav-list-itm {
        padding: 28rpx 32rpx 0;
        .itm-tx {
          z-index: 6;
        }
        .itm-select {
          width: 100%;
          height: 6rpx;
          margin-top: 6rpx;
          z-index: 2;
          background: #fff;
        }
      }
    }
  }
}
</style>