<template>
  <view class="container" :style="{ 'background-color': bgColor }">
    <view class="header-bottom center" v-if="shopTitle">
      <view class="fixed">
        <view class="record dec-truncate">
          {{ shopTitle }}
        </view>
      </view>
    </view>
    <view class="content" :style="decoraterStyle">
      <shopHead
        v-if="headerName"
        :tab="headerConfig"
        :title="headerName"
        :bgColor="headerBgColor"
        @inited="headInited"
        @decEventHandler="headHandler"
      />
      <shop-decorater @inited="decInited" :header="'out'" ref="shopDecorater" />
      <li-load v-if="loading"></li-load>
    </view>
  </view>
</template>

<script>
import shopHead from "../components/shop-decorater/shopHead/index.vue";
import { setPromise } from "./request.js";
import { decAxios } from "./config.js";
let hander = null;
let onPageScrollTop = 0;
export default {
  components: {
    shopHead,
  },
  data() {
    return {
      shopTitle: "",
      bgColor: "",
      loading: true,
      waiting: false,
      paddingTop: 0,
      headerName: "",
      headerConfig: {},
      headerBgColor: "",
      decoraterStyle: "",
      decoraterAutoLoad: -1,
    };
  },
  onLoad() {
    // #ifdef H5
    const apiDomain = window.top.location.origin,
      that = this;
    hander = function (res) {
      if (res.data.type == "onLoad") {
        that.$refs["shopDecorater"].initData(res.data.res);
        that.loading = false;
      } else if (res.data.type) {
        setPromise(res.data.type, res.data.res);
      }
    };
    window.top.postMessage({ type: "onLoad" }, apiDomain);
    window.addEventListener("message", hander);
    // #endif
  },
  onHide() {
    window.removeEventListener("message", hander);
    hander = null;
  },
  mounted() {
    // #ifdef MP-WEIXIN
    const target = JSON.stringify([{}]);
    this.$refs["shopDecorater"].initData(target);
    // #endif
    // #ifdef H5
    const appDom = document.getElementById("app");
    const that = this;
    appDom.addEventListener("scroll", (e) => {
      that.pageScroll(e.target);
    });
    // #endif
  },
  provide() {
    return {
      decAxios: decAxios,
      decImgDomain: decAxios.decImgDomain,
    };
  },
  methods: {
    decInited(obj) {
      this.shopTitle = !obj.navMode ? obj.pageName : "";
      this.bgColor = obj.pageSet.bgColor || "";
      this.decoraterAutoLoad = obj.autoLoadAtBottom.index || -1;
      this.decoraterStyle = obj.globalStyle;
      this.headerName = obj.navMode ? obj.pageName : "";
      this.headerConfig = obj.shopBase;
    },
    headInited(obj) {
      this.paddingTop = obj.height || 57;
    },
    headHandler(obj, res) {
      console.log("headHandler:", obj, res);
    },
    pageScroll(e) {
      //nvue暂不支持滚动监听，可用bindingx代替
      // clientHeight scrollHeight: 4249 scrollTop
      onPageScrollTop = e.scrollTop;
      if (!this.waiting) {
        this.waiting = true;
        setTimeout(() => {
          //头部动画效果
          if (
            onPageScrollTop > 0 &&
            onPageScrollTop < this.paddingTop &&
            this.headerBgColor != "#ffffff60"
          ) {
            this.headerBgColor = "#ffffff60";
          } else if (
            onPageScrollTop <= 0 &&
            this.headerBgColor != "#ffffff00"
          ) {
            this.headerBgColor = "#ffffff00";
          } else if (
            onPageScrollTop >= this.paddingTop &&
            this.headerBgColor != "#ffffff"
          ) {
            this.headerBgColor = "#ffffff";
          }
          const isBottom = e.scrollHeight - e.clientHeight - 10;
          if (onPageScrollTop > isBottom) {
            this.reachBottom(); //触底了
          }
          this.waiting = false;
        }, 200);
      }
    },
    reachBottom() {
      if (this.decoraterAutoLoad > -1) {
        const decTarget = this.$refs["shopDecorater"];
        decTarget.reachBottom();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  padding-bottom: 20px;
}
.content {
  min-height: calc(100% - 50px);
}
.header-bottom {
  width: 100%;
  height: 44px;
  background: #ffffff;
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 9;
  }
  .record {
    font-size: 16px;
    color: #333333;
  }
}
</style>
