<template>
  <!-- 图标[park,scan,返回] 文本[title] 搜索[search]  -->
  <!-- 布局：居中-左右-左中右 -->
  <view class="dec-header" :style="{ height: totalHeight + 'px' }">
    <view
      v-if="arg.mode == 'custom'"
      :class="{ fixed: arg.styleArg == 'fixed' }"
    >
      <view
        class="header-top"
        :style="{ height: statusBarHeight + 'px' }"
      ></view>
      <view v-else class="header-bottom" @tap="showShopList" v-if="shopName">
        <view class="at-name" @tap.stop="switch">
          <uni-icons
            v-if="arg.back"
            @tap.stop="back"
            type="back"
            size="30"
            color="#333333"
            class="at-back"
          ></uni-icons>
          {{ shopName }}
          <uni-icons
            v-if="arg.shop"
            type="bottom"
            size="14"
            color="#333333"
            class="at-dot"
          ></uni-icons>
        </view>
        <view class="at-scan" @tap.stop="headFn('park')">
          <image
            lazy-load
            mode="widthFix"
            src="https://lirimall.test.tikcos.cn/lirimall/jeditor/333_1658414626394.png"
          />
        </view>
        <view class="at-scan" @tap.stop="headFn('scan')">
          <image
            lazy-load
            mode="widthFix"
            src="https://lirimall.test.tikcos.cn/lirimall/jeditor/222_1658414610148.png"
          />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "dec-header",
  props: {
    arg: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      totalHeight: 64,
      statusBarHeight: 20,
      titleBarHeight: 44,
      titleBarWidth: "",
      imgUrl: "https://lirimall.test.tikcos.cn/lirimall",
      fnIcon: {
        park: "/jeditor/333_1658414626394.png",
        scan: "/jeditor/222_1658414610148.png",
      },
    };
  },
  created() {
    //兼容苹果手机手机刘海屏状态栏显示不全的问题
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // 胶囊信息-头部高度
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height;
    const titleBarWidth = menuButtonInfo.left;
    this.titleBarHeight = titleBarHeight || 44;
    this.titleBarWidth = titleBarWidth || "";
    if (this.arg.mode == "custom") {
      this.totalHeight = this.statusBarHeight + this.titleBarHeight;
    } else {
      this.totalHeight = 0;
    }
    this.$emit("titleBarHeight", this.titleBarHeight);
  },
  mounted() {
    if (this.fixed) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".dec-header")
        .boundingClientRect((data) => {
          this.$emit("inited", data);
        })
        .exec();
    }
  },
  methods: {
    back() {
      uni.navigateBack({ delta: 1 });
    },
    switch() {},
  },
};
</script>
<style lang="scss" scoped>
.dec-header {
  position: relative;
  z-index: 10;
}
.fixed {
  position: fixed;
  width: 100%;
  left: 0rpx;
  top: 0rpx;
}
.header-top {
  height: var(--status-bar-height);
}
.header-bottom {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 88rpx;
  padding: 0rpx 20rpx;
  .at-name {
    height: 48rpx;
    width: 100%;
    font-size: 40rpx;
    line-height: 1.2;
    color: #333333;
    font-weight: bold;
    margin-right: 10rpx;
    @include textEllipsis(1);
  }
  .at-back {
    margin-right: 10px;
  }
  .at-dot {
    margin-left: 5px;
  }
  .at-scan {
    flex-shrink: 0;
    display: inline-block;
    height: 64rpx;
    width: 64rpx;
    border-radius: 50%;
    text-align: center;
    margin-left: 20rpx;
    background: #0000002e;
    overflow: hidden;
    image {
      height: 46rpx;
      width: 46rpx;
    }
  }
}
</style>
