<template>
  <view class="dec-header" :style="{ height: totalHeight + 'px' }">
    <view
      v-if="tab.mode == 'custom'"
      :class="{ fixed: tab.styleArg == 'fix' }"
      :style="{ background: bgColor }"
    >
      <view class="header-top" :style="{ height: statusBarHeight + 'px' }" />
      <view
        class="header-bottom"
        :class="{ center: center }"
        :style="{ height: titleBarHeight + 'px', width: titleBarWidth + 'px' }"
      >
        <view
          class="at-scan link"
          v-if="tab.lIcon == 'link'"
          @tap.stop="headFn('link', 'lIconLink')"
        >
          <image class="img" mode="widthFix" :src="tab.lIconImg" />
        </view>
        <view
          class="at-name dec-truncate"
          @tap.stop="nameSwitch"
          :style="{ color: tab.fontColor, 'font-size': fontSizeSetting + 'px' }"
        >
          <view class="at-back" v-if="tab.lIcon == 'back'" @tap.stop="back">
            <uni-icons type="back" size="24" :color="tab.fontColor" />
          </view>
          <text
            v-if="!!tab.title"
            :class="{
              'at-dot': tab.title == 'shop',
              white: tab.fontColor != 'black',
            }"
            >{{ title }}</text
          >
        </view>
        <slot />
        <view class="at-search" v-if="!!tab.search">
          <view
            @tap.stop="headFn('search')"
            class="wrap"
            :style="{ backgroundColor: tab.searchBg }"
          >
            <text :style="{ color: tab.fontColor }" class="search dec-truncate"
              >搜索</text
            >
            <view class="ic-search">
              <uni-icons type="search" :color="tab.fontColor" size="20" />
            </view>
          </view>
        </view>
        <template v-if="tab.rIcon">
          <view
            class="at-scan circle"
            @tap.stop="headFn('park')"
            v-if="tab.rIconFn.includes('park')"
          >
            <image
              class="img"
              mode="widthFix"
              src="https://lirimall.test.tikcos.cn/lirimall/jeditor/333_1658414626394.png"
            />
          </view>
          <view
            class="at-scan circle"
            @tap.stop="headFn('member')"
            v-if="tab.rIconFn.includes('member')"
          >
            <image
              style="width: 36rpx; margin-top: 8rpx"
              class="img"
              mode="widthFix"
              src="https://lirimall.test.tikcos.cn/lirimall/lirimall/member_1659434366749.png"
            />
          </view>
          <view
            class="at-scan link"
            :class="{ circle: tab.rIconCc }"
            @tap.stop="headFn('link', 'rIconLink')"
            v-if="tab.rIconFn.includes('link')"
          >
            <image class="img" mode="heightFix" :src="tab.rIconImg" />
          </view>
        </template>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "dec-header",
  props: {
    tab: {
      type: Object,
      default() {
        return {};
      },
    },
    title: {
      type: String,
      default: "",
    },
    bgColor: {
      type: String,
      default: "transparent",
    },
    center: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      totalHeight: 64,
      statusBarHeight: 20,
      fontSizeSetting: 16,
      titleBarHeight: 44,
      titleBarWidth: "",
    };
  },
  created() {
    //兼容苹果手机手机刘海屏状态栏显示不全的问题
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    this.fontSizeSetting =
      (systemInfo.fontSizeSetting || systemInfo.hostFontSizeSetting || 16) + 1;
    console.log("head-systemInfo:", systemInfo);
    // 胶囊信息-头部高度
    let menuButtonInfo = { top: 0, left: 0, height: 0 };
    // #ifndef H5
    if (uni.getMenuButtonBoundingClientRect) {
      menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    }
    // #endif
    const titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height;
    const titleBarWidth = menuButtonInfo.left;
    this.titleBarHeight = titleBarHeight || 44;
    this.titleBarWidth = titleBarWidth || "";
    if (this.tab.mode == "custom") {
      this.totalHeight = this.statusBarHeight + this.titleBarHeight;
    } else {
      this.totalHeight = 0;
    }
  },
  mounted() {
    if (this.tab.styleArg == "fix") {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".dec-header")
        .boundingClientRect((data) => {
          this.$emit("inited", data);
        })
        .exec();
    }
  },
  methods: {
    back() {
      uni.navigateBack({ delta: 1 });
    },
    nameSwitch() {
      const params = { moudle: "shopHead", type: "switch", desc: "切换门店" };
      this.$emit("decEventHandler", params, null);
    },
    headFn(val, key) {
      const params = { moudle: "shopHead", type: val, desc: "跳转" };
      this.$emit("decEventHandler", params, this.tab[key]);
    },
  },
};
</script>
