<template>
  <div class="container">
    <div>
      <img
        class="ruleImg"
        :src="activityRulesImageUrl"
        alt=""
        @click="jumpToUrl(activityRulesUrl)"
      />
    </div>
    <div v-for="(item, index) in contents" :key="index">
      <div v-if="+item.elementType === 108">
        <vccCard
          :data="item.vccCard"
          :component-id="item.componentId"
          :component-name="item.componentName"
          @reload="reload"
        />
      </div>
      <div v-if="+item.elementType === 109">
        <goodsTopic
          :data="item.vccCommodityTopics"
          :component-id="item.componentId"
          :component-name="item.componentName"
        />
      </div>
      <div v-if="+item.elementType === 110">
        <goodsNavigation
          :ceiling-style="item.vccNavigationInfo.ceilingStyle"
          :default-style="item.vccNavigationInfo.defaultStyle"
          :navigations="item.vccNavigationInfo.navigations"
          :component-id="item.componentId"
          :component-name="item.componentName"
        />
      </div>
    </div>
  </div>
</template>
<script>
import vccCard from './components/vccCard.vue';
import goodsTopic from './components/goodsTopic.vue';
import goodsNavigation from './components/goodsNavigation.vue';
import { getPageInfo } from '@/api/vccNewcomer.api';
import { setAppTitleColor } from '@/service/color.service';
import localStorage from '@/service/localStorage.service';
export default {
  components: {
    vccCard,
    goodsTopic,
    goodsNavigation
  },
  data() {
    return {
      bgImgUrl: '',
      activityRulesImageUrl: '',
      activityRulesUrl: '',
      titleBarColors: '',
      isLoad: false,
      contents: []
    };
  },
  mounted() {
    this.init();
    this.pageVisibilityChange();
  },
  methods: {
    reload() {
      this.init();
    },
    onPageShow(state) {
      console.log(state, 'event');
      if (!state) {
        this.init();
      }
    },
    // 处理页面隐藏
    pageVisibilityChange() {
      let hidden = 'hidden';
      let visibilityChange = 'visibilitychange';
      if (typeof document.hidden !== 'undefined') {
        hidden = 'hidden';
        visibilityChange = 'visibilitychange';
      } else if (typeof document.webkitHidden !== 'undefined') {
        hidden = 'webkitHidden';
        visibilityChange = 'webkitvisibilitychange';
      }
      window.addEventListener(
        visibilityChange,
        () => {
          this.onPageShow(document[hidden]);
        },
        false
      );
    },
    async init() {
      const [res] = await getPageInfo();
      this.bgImgUrl = res.bgImgUrl;
      this.activityRulesImageUrl = res.activityRulesImageUrl;
      this.activityRulesUrl = res.activityRulesUrl;
      this.contents = res.contents;
      this.titleBarColors = res.titleBarColors.split(',');
      const titleBarColors = [];
      this.titleBarColors.forEach(item => {
        if (item !== 'undefined') {
          titleBarColors.push(item);
        }
      });
      titleBarColors.length > 1
        ? setAppTitleColor(titleBarColors)
        : setAppTitleColor(titleBarColors[0]);
    },
    jumpToUrl(url) {
      if (url) {
        if (this.$bridge.isApp) {
          this.$bridge.openNewUrl({
            data: {
              newUrl: `xyqb://openHttp?jumpUrl=${url}`
            }
          });
        } else {
          console.log(url, 'url');
          url = url.replace(/{token}/, localStorage.get('vccToken'));
          window.location.href = url;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background-color: rgba(247, 248, 249);
}
.ruleImg {
  position: absolute;
  width: 11.2vw;
  height: auto;
  top: 5px;
  right: 0;
}
</style>
