<template>
    <div class="fullpage-container">
      <section-view :css-style="{'background-color':bgColors[0],'transition': 'background-color .3s ease-in'}">
        <section-limit-x >
        </section-limit-x>
      </section-view>
      <about-us id="aboutUs" :css-style="{'background-color':activeColor,'transition': 'background-color .3s ease-in'}" >
        <lottie-animation
          :style="{'opacity':activeColor===bgColors[1]?'1':'0'}"
          :loop="true"
          :speed="1000"
          :autoPlay="true"
          ref="anim"
          :animationData="require('@/assets/data/q3.json')"
        />
      </about-us>
      <focus-areas id="focusAreas" :css-style="{backgroundColor:bgColors[2],'transition': 'background-color .3s ease-in'}"></focus-areas>
      <our-portfolio id="ourPortfolio" :css-style="{'position':'relative','z-index':'1',backgroundColor:activeColor2,'transition': 'background-color .3s ease-in'}">
        <our-portfolio-item :style="{'opacity':activeColor2==='#fff'?'1':'0'}" v-for="(item) in portfolios" :key="item.title" :item="item"></our-portfolio-item>
      </our-portfolio>
      <div   id="portfolio"  :style="{'background-color':bgColors[4],'transition': 'background-color .3s ease-in'}">
        <div class="home-wrap">
          <portfolio :position="position" :top="top" :bottom="bottom" :staticData="portfolio"></portfolio>
          <partners :partners="partners" :showPartners="showPartners" ></partners>
          <our-founders><banner :images="banners"></banner></our-founders>
        </div>
      </div>
      <section-view id="situation" :css-style="{'background-color':activeColor3,'transition': 'background-color .3s ease-in'}">
        <situation :style="{'opacity':activeColor3=='#fff'?'1':'0'}">
          <email-footer ></email-footer>
        </situation>
      </section-view>
    </div>
</template>
<script>
  import LottieAnimation from 'lottie-web-vue'
  import SectionLimitX from "../components/SectionLimitX/index";
  import AboutUs from "../components/AboutUs/index";
  import FocusAreas from "../components/FocusAreas/index";
  import OurPortfolio from "../components/OurPortfolio/index";
  import {portfolios} from "../assets/js/static";
  import OurPortfolioItem from "../components/OurPortfolioItem/index";
  import SectionView from "../components/SectionView/index";
  import Portfolio from "../components/Portfolio/index";
  import Partners from "../components/Partners/index";
  import OurFounders from "../components/OurFounders/index";
  import Banner from "../components/Banners/index";
  import Situation from "../components/Situation/index";
  import EmailFooter from "../components/EmailFooter/index";
  import {hanldePortflioData} from "../utils/filter";
  import animateMixin from '../utils/animateMixin'
  export default {
  name: 'IndexPage',
  layout:'index',
    mixins:[animateMixin],
  components:{
    EmailFooter,
    Situation,
    Banner,
    OurFounders,
    Partners,
    Portfolio,
    SectionView,
    OurPortfolioItem,
    OurPortfolio,
    FocusAreas,
    AboutUs,
    SectionLimitX,
    LottieAnimation
  },
  head() {
    return {

      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },
    created(){
      this.activeColor=this.bgColors[1]
      this.activeColor2=this.bgColors[3]
      this.activeColor3=this.bgColors[5]
    },
    mounted(){
      this.handleScroll()
      window.addEventListener('scroll',this.handleScroll)

    },
    async asyncData(config) {
      const {$axios,$config,payload}=config;
      if(payload){
        return
      }
      // const {baseURL}=$config
      // const result=await Promise.all([
      //   $axios.$get(`${baseURL}/partners/index?page=1&size=10`),
        // $axios.$get(`${baseURL}/portfolio/index?page=1&size=99`),
        // $axios.$get(`${baseURL}/carousel/index?page=1&size=10`),
      // ])
      // if(!result.length){
      //   return {}
      // }
      // console.log(result[1].content,'result',result[2].content)
      // if(!result[1].content){
      //   return {partners:result[0].content, banners:result[2].content,}
      // }
      // const myPortfolio=await hanldePortflioData(result[1].content)
      // return {partners:result[0].content, banners:result[2].content,portfolio:myPortfolio}
    },
    methods:{
      handleScroll(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        // const opacity = Math.abs(Math.round(scrollTop)) / 300;
        const clientWidth=document.documentElement.clientWidth;
        if(clientWidth>768){
          if(scrollTop>300){
              this.activeColor=this.bgColors[1]
          }else if(scrollTop<=300){
             this.activeColor=this.bgColors[0]
          }
        }else{
          this.activeColor=this.bgColors[1]
        }
        if(clientWidth<751){
          this.position='sticky'
          this.top='0'
          this.bottom='initial';
          return
        }
        const focusAreasDom= document.getElementById('focusAreas');
        const ourPortfolioDom= document.getElementById('ourPortfolio');
        const situationDom= document.getElementById('situation');
        const focusAreasSetTop=focusAreasDom.offsetTop;
        const ourPortfolioDomSetTop=ourPortfolioDom.offsetTop;
        const situationDomTop=situationDom.offsetTop;
        if(scrollTop>(focusAreasSetTop-300)){
          this.activeColor=this.bgColors[0]
          this.activeColor2=this.bgColors[4]
        }
        if(scrollTop>(ourPortfolioDomSetTop-300)){
          this.activeColor2='#fff'
        }
        if(scrollTop<(situationDomTop-300)){
          this.activeColor3=this.bgColors[4]
        }
        if(scrollTop>(situationDomTop-300)){
          this.activeColor3='#fff'
        }
        // else if(scrollTop<=300){
        //   this.activeColor=this.bgColors[0]
        // }
        const portfolioDom= document.getElementById('iPortfolio');
        const portfolioOffSetTop=portfolioDom.offsetTop;

        const portfolioHeight=portfolioDom.offsetHeight;
        const partnersDom= document.getElementById('partners');
        const partnersSetTop=partnersDom.offsetTop;
        this.showPartners=scrollTop>(partnersSetTop-300)
        const layoutHeight= document.getElementById('layout-header').offsetHeight;
        const ballHeight= document.getElementById('ball').offsetHeight;
        const portfolioTop=portfolioOffSetTop;
        if(scrollTop>portfolioTop){
          if(scrollTop>(portfolioHeight+portfolioTop-ballHeight)){
            this.position='absolute'
            this.bottom=0+'px';
            this.top='initial';
            return;
          }
          this.position='fixed'
          this.top=layoutHeight+'px';
          this.bottom='initial';
        }else if(scrollTop<=portfolioTop){
          this.position='absolute'
          this.top='0'
          this.bottom='initial';
        }
        // console.log(portfolioTop,'offSetTop',scrollTop,'clientWidth')
      }
    },
    destroyed(){
      window.removeEventListener('scroll',this.handleScroll)
    },
  data() {
    return {
      top:'0',
      bottom:'initial',
      position:'sticky',
      activeColor:'#2E2C2C',
      activeColor2:'#2E2C2C',
      activeColor3:'#2E2C2C',
      showPartners:false,
      bgColors:[
        '#2E2C2C','#fff','#000','#fff','#292727','#fff'
      ],
      partners:[
        {
          logo:'images/partners/组 764@2x.png',
        },  {
          logo:'images/partners/组 761@2x.png',
        },  {
          logo:'images/partners/组 762@2x.png',
        },  {
          logo:'images/partners/组 763@2x.png',
        },  {
          logo:'images/partners/组 756@2x.png',
        },  {
          logo:'images/partners/组 757@2x.png',
        },  {
          logo:'images/partners/组 758@2x.png',
        },  {
          logo:'images/partners/组 759@2x.png',
        },  {
          logo:'images/partners/组 755@2x.png',
        },  {
          logo:'images/partners/组 752@2x.png',
        },  {
          logo:'images/partners/组 753@2x.png',
        },  {
          logo:'images/partners/组 754@2x.png',
        },  {
          logo:'images/partners/组 751@2x.png',
        },  {
          logo:'images/partners/组 750@2x.png',
        },  {
          logo:'images/partners/组 749@2x.png',
        },  {
          logo:'images/partners/组 748@2x.png',
        },  {
          logo:'images/partners/组 744@2x.png',
        },  {
          logo:'images/partners/组 745@2x.png',
        }, {
          logo:'images/partners/组 746@2x.png',
        }, {
          logo:'images/partners/组 747@2x.png',
        },
        {
          logo:'images/partners/组 743@2x.png',
        },
        // ------------------------------------
        {
          logo:'images/partners/组 742@2x.png',
        },{
          logo:'images/partners/组 741@2x.png',
        },{
          logo:'images/partners/组 740@2x.png',
        },{
          logo:'images/partners/组 736@2x.png',
        },{
          logo:'images/partners/组 737@2x.png',
        },{
          logo:'images/partners/组 738@2x.png',
        },{
          logo:'images/partners/组 739@2x.png',
        },{
          logo:'images/partners/组 732@2x.png',
        },{
          logo:'images/partners/组 733@2x.png',
        },{
          logo:'images/partners/组 734@2x.png',
        },{
          logo:'images/partners/组 735@2x.png',
        },{
          logo:'images/partners/组 731@2x.png',
        },{
          logo:'images/partners/组 730@2x.png',
        },
        // --------------------------------
        {
          logo:'images/partners/组 729@2x.png',
        },{
          logo:'images/partners/组 728@2x.png',
        },{
          logo:'images/partners/组 727@2x.png',
        },{
          logo:'images/partners/组 726@2x.png',
        },{
          logo:'images/partners/组 725@2x.png',
        }
      ],
      banners:[
        {
          logo:'images/banners/图层 1@2x.png'
        },  {
          logo:'images/banners/图层 2@2x.png'
        },  {
          logo:'images/banners/图层 3@2x.png'
        },  {
          logo:'images/banners/图层-4@2x.png'
        },
      ],
      portfolio:[],
      title:'LightLimX',
      portfolios
    }
  }
}
</script>
<style lang="less" scoped>
  .home-wrap{
    /*max-width: 12;*/
    max-width: 13rem;
    margin: 0 auto;
  }
</style>
