<template>
  <view class="content">
    <u-tabs
      v-if="myPageData.home_pages.navs.length > 1"
      name="name"
      :list="myPageData.home_pages.navs"
      :is-scroll="true"
      :active-color="mainColor"
      :current="active"
      :bar-width="80"
      :font-size="32"
	  :bold="false"
      @change="changeHandler"
    ></u-tabs>
    <template v-for="(item, i) in myPageData.home_pages.navs">
      <view :style="item.templateBg" :key="i" v-if="active == i">
        <template v-for="(d, di) in item.template.data">
          <search v-if="d.id == 'search'" :styleStr="d.data" :key="di"></search>
          <swiper v-if="d.id == 'banner'" :swipers="d.data" :key="di"></swiper>
          <empty v-if="d.id == 'empty'" :block="d.data" :key="di"></empty>
          <rubik v-if="d.id == 'rubik'" :ad="d.data" :key="di"></rubik>
          <goods v-if="d.id == 'goods'" :goods="d.data" :key="di"></goods>
          <notice v-if="d.id == 'notice'" :notice="d.data" :key="di"></notice>
          <gridnav v-if="d.id == 'nav'" :navs="d.data" :key="di"></gridnav>
          <pagetitle v-if="d.id == 'link'" :ts="d.data" :key="di"></pagetitle>
          <videopage
            v-if="d.id == 'video'"
            :video="d.data"
            :key="di"
          ></videopage>
          <copyright
            v-if="d.id == 'copyright'"
            :cop="d.data"
            :key="di"
          ></copyright>
          <checkin
            v-if="d.id == 'check-in'"
            :check="d.data"
            :key="di"
          ></checkin>
          <userbox v-if="d.id == 'user-info'" :ts="d.data" :key="di"></userbox>
          <view v-if="d.id == 'image-text'" class="imageText" :key="di">
            <view v-html="d.data.content"></view>
          </view>
          <userorder
            v-if="d.id == 'user-order'"
            :uo="d.data"
            :key="di"
          ></userorder>
          <mapi v-if="d.id == 'map'" :mapi="d.data" :key="di"></mapi>
          <checkform
            v-if="d.id == 'form'"
            :forms="d.data"
            :key="di"
          ></checkform>
          <addialog
            v-if="d.id == 'modal' && d.data.opened"
            :ads="d.data"
            :key="di"
          ></addialog>
          <quicknav
            v-if="d.id == 'quick-nav' && d.data.navSwitch == 1"	
            :navs="d.data"
            :key="di"
          ></quicknav>
        </template>
      </view>
    </template>
    <tabbar></tabbar>
	<view class="tips" v-if="add_show==1&& JSON.stringify(setting) != '{}'  "  :style="{
		'border-radius':setting.add_app_bg_radius+'rpx',
		'opacity':setting.add_app_bg_transparency/100
		}">
		<u-icon name="cross" color="#fff" @click="close"></u-icon>
		<view style="width: 1px;height: 20px;margin:0 10px;background: #fff;"></view>
		<Text style='color: #fff;'>{{setting.add_app_text}}</Text>
		<view class="triangle-up"></view>
	</view>
  </view>
</template>

<script>
import tabbar from "@/components/tabbar/index";
import search from "@/components/search/index";
import swiper from "@/components/swiper/index";
import empty from "@/components/empty/index";
import rubik from "@/components/rubik/index";
import goods from "@/components/goods/index";
import notice from "@/components/notice/index";
import gridnav from "@/components/gridnav/index";
import pagetitle from "@/components/pagetitle/index";
import videopage from "@/components/videopage/index";
import copyright from "@/components/copyright/index";
import checkin from "@/components/checkin/index";
import userbox from "@/components/userbox/index";
import userorder from "@/components/userorder/index";
import mapi from "@/components/mapi/index";
import checkform from "@/components/checkform/index";
import addialog from "@/components/addialog/index";
import quicknav from "@/components/quicknav/index";
export default {
  data() {
    return {
      title: "Hello",
	  myPageData:{},
      indexPageData: {},
      mainColor: "",
      active: 0,
      contentHeight: 0,
	  pageId:0,
	  setting:{},
	  add_show:1,
    };
  },
  components: {
    tabbar,
    search,
    swiper,
    empty,
    rubik,
    goods,
    notice,
    gridnav,
    pagetitle,
    videopage,
    copyright,
    checkin,
    userbox,
    userorder,
    mapi,
    checkform,
    addialog,
    quicknav
  },
  onLoad(options) {
	 console.log(options,'option');
	 if(options&&options.page_id){
		this.pageId=options.page_id
	 }
    let c = this.$uiConfig.is_bang ? 78 : 50;
    this.contentHeight = this.$utils.calcContentHeight(c);
    this.init();
	let set = uni.getStorageSync("basedata")? uni.getStorageSync("basedata").mall.setting:{};
	if(!uni.getStorageSync("add_top_app")){
		uni.setStorageSync("add_top_app", {add_top_app_show:1});
	}
	this.add_show = uni.getStorageSync("add_top_app")?uni.getStorageSync("add_top_app").add_top_app_show:1;
	this.setting =set;
	console.log(this.setting)
	
    uni.showNavigationBarLoading();
  },
  onShow() {
    setTimeout(() => {
      uni.hideNavigationBarLoading();
    }, 500);
    this.mainColor = this.$uiConfig.mainColor;
  },
  methods: {
    init() {
        this.request2(
          {
            url: '/api/Mall/GetHome',
            data: {
				page_id:this.pageId
            },
          },
          (res) => {
            this.indexPageData = res.data.home_pages.navs[0].template.data;
			this.myPageData=res.data;
			uni.setStorageSync("basedata", res.data);
            if (res.data.home_pages.title != "") {
              uni.setNavigationBarTitle({
                title: res.data.home_pages.title,
              });
			  uni.setNavigationBarColor({
				  //字体颜色
				  frontColor:res.data.navbar.top_text_color,
				  //背景颜色
				  backgroundColor:res.data.navbar.top_background_color
			  });
            }
            this.formatBg();
          },
		  (error)=>{
		  }
        );
    },
	close(){
		this.add_show =2;
		uni.setStorageSync("add_top_app", {add_top_app_show:2});
	},
    changeHandler(i) {
      this.active = i;
    },
    formatBg() {
      this.myPageData.home_pages.navs.forEach((y) => {
        y.template.data.forEach((x) => {
          if (x.id == "background") {
            let t = "";
            if (x.data.showImg) {
              y.templateBg += `background-color:#${x.data.backgroundColor};`;
              y.templateBg = `background-image:url('${backgroundPicUrl}');`;
              y.templateBg += `background-position:${x.data.positionText};`;
              y.templateBg += `background-repeat:${x.data.repeatText};`;
              y.templateBg += `background-size:${x.data.backgroundWidth}% ${x.data.backgroundHeight}%;`;
            } else {
              y.templateBg = `background:#${x.data.backgroundColor};`;
            }
            y.templateBg +=
              "overflow-y:auto;height:" + this.contentHeight + "px;";
            // y.templateBg +="padding-bottom:"+(this.$uiConfig.is_bang ? '88px' : '60px')+";box-sizing: border-box;";
          }
        });
      });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  /* align-items: center;
  justify-content: center; */
  padding-bottom:100rpx;
}
.content .tips{
	position: fixed;
	top:8px;
	right: 6px;
	height: 36px;
	background: #000000;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 10px;
	font-size: 12px;
	
}
.triangle-up{
	 width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 12px solid black;
	position: fixed;
	right: 65px;
	top:0px
}
/* .logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
} */
</style>
