<template>
  <view class="content" :style="{ 'padding-bottom': showtabs==ture? '100rpx':0 }">
    <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>
	<view v-if="showtabs==true">
		<tabbar></tabbar>
	</view>
    
	<view class="tips_t" 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,
	  showtabs:true,
    };
  },
  components: {
    tabbar,
    search,
    swiper,
    empty,
    rubik,
    goods,
    notice,
    gridnav,
    pagetitle,
    videopage,
    copyright,
    checkin,
    userbox,
    userorder,
    mapi,
    checkform,
    addialog,
    quicknav
  },
  onLoad(options) {
	  // let options= {//测试
		 //  scene:'share',
		 //  user_id:19992,
		 //  params:{"id":106118,"path":"/pages/goods/goods","user_id":19992}
	  // }
	 console.log(options,'option');
	 let c = this.$uiConfig.is_bang ? 78 : 50;
	 this.contentHeight = this.$utils.calcContentHeight(c);
	 if(options&&options.page_id){ 
		this.pageId=options.page_id
		this.showtabs=false
		this.contentHeight = this.$utils.calcContentHeight();
	 }
	 if(options&&options.user_id){
		 uni.setStorageSync("pid", {pid:options.user_id});
	 }

	 if(options&&options.scene){//兼容之前小程序的调转
		 this.getjump(options.scene)
		 
	 }
	 
    
    
    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)
	console.log(uni.getStorageSync("basedata"))
    uni.showNavigationBarLoading();
  },
  onShareAppMessage(res) {
    return {
      title:this.setting.share_title?this.setting.share_title:uni.getStorageSync("basedata").mall.name,
      path: "/pages/index/index?user_id=" + uni.getStorageSync('mall_UserInfo') ?uni.getStorageSync('mall_UserInfo').UserId:0,
      imageUrl: this.setting.share_pic?this.setting.share_pic:'',
    };
  },
  onShow() {	
    setTimeout(() => {
      uni.hideNavigationBarLoading();
    }, 500);
    this.mainColor = this.$uiConfig.mainColor;
	this.init()
  },

  methods: {
	  getjump(scene){
		  
		  let a= 'YZnsGuRojCKBkb1siP3VwkhkPFvh-D' //测试数据
		  this.request(
		    {
		      url: "",
		      data: {
		        r: "api/default/qr-code-parameter",
		        token: scene,
		      }
		    },
		    res => {
				console.log(res.data.detail.path)
				uni.setStorageSync("pid", {pid:res.data.detail.user_id?res.data.detail.user_id:0}); //存储上级的id
				let objurl=  this.ObjectToUrl(res.data.detail.data)
		  			 uni.navigateTo({
		  			   url:'/'+res.data.detail.path+'?'+objurl,
		  			 });
		    }
		  );
	  },
	  ObjectToUrl(e, t) {
	        var n = "";
	        for (var i in e)
	          n += "&" + i + "=" + (t ? encodeURIComponent(e[i]) : e[i]);
	        return n.substr(1);
	      },
    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 != "") {
				if(this.pageId==0){
					uni.setNavigationBarTitle({
					  title: res.data.home_pages.title,
					});
				}else{
					uni.setNavigationBarTitle({
					  title: res.data.home_pages.navs[0].name,
					});
				}
              
			  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};`;
            }
			if(this.myPageData.home_pages.navs.length>1){
				y.templateBg +=
				  "overflow-y:auto;height:" + this.contentHeight + "px;";
			}else{
				y.templateBg +=
				  "overflow-y:auto;height:" + (this.contentHeight+40) + "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; */
  
}
.content .tips_t{
	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>
