<template>
    <div class="fullpage-container">
      <section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/innovation/innovation.png')" class="innovation-section-view">
        <div class="innovation-div">
          <h2 class="innovation-div-t">Innovation Insights</h2>
        </div>
      </section-view>
      <section-view :css-style="{'background-color':'#fff'}">
        <p v-if="$fetchState.pending">Fetching mountains...</p>
        <p v-else-if="$fetchState.error">An error occurred :</p>
        <innovation-block v-else :static-data="staticData"></innovation-block>
        <my-pagination @change="handleLists" v-if="staticData.length" :page.sync="page" :total="total" :pager-count="9"></my-pagination>
        <email-footer></email-footer>
      </section-view>
      <div class="windows">
        <span></span>
      </div>
    </div>
</template>
<script>
  import animateMixin from '../../utils/animateMixin'
  import {
    assetsUri
  } from "../../utils";
  import SectionView from "../../components/SectionView/index";
  import EmailFooter from "../../components/EmailFooter/index";
  import InnovationBlock from "../../components/InnovationBlock/index";
  import MyPagination from "../../components/MyPagination/index";
    export default {
      name: "innovation",
      components: {MyPagination, InnovationBlock, EmailFooter, SectionView},
      layout:'index',
      watch: {
        '$route.query': '$fetch'
      },
      mixins:[animateMixin],
      async fetch() {
        const {query:{page,size}}=this.$route;
        if(page){
          this.page=page
        }
        if(size){
          this.size=size
        }
        await this.handleLists(this.page)
      },
      fetchOnServer: false,
      methods:{
        async handleLists(val){
          this.page=val;
          const {baseURL}=this.$config;
          const res= await this.$axios(baseURL+'/innovation/index?page='+this.page+'&size='+this.size)
          if(res.status!==200){
            return this.$toast(res.data.msg)
          }
          const {content,totalElements}=res.data
          this.total=totalElements;
          this.staticData=content;
        }
      },
      head() {
        return {
          title: this.title,
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: 'My custom description'
            }
          ]
        }
      },
      data(){
          return {
            title:'LightLimX-Innovation Insights',
            assetsUri,
            page:1,
            size:9,
            total:0,
            staticData:[]
          }
      }
    }
</script>

<style scoped lang="less">
.innovation{
  &-section-view{
    background-position: center bottom;
    background-size: 100% 2.92rem;
    background-repeat: no-repeat;
    /*background-size: ;*/
    padding-top: .95rem;
    min-height:3.87rem !important;
  }
  &-div{
    padding-top: 1.14rem;
    text-align: center;
    &-t{
      font-size: .48rem;
      font-family: Manrope;
      font-weight: bold;
      line-height: .32rem;
      color: #FFFFFF;
    }
  }
}
  @media screen and (max-width: 768px){
    .innovation{
      &-section-view{
        background-size: auto 6.24rem;
        padding-top: .88rem;
        min-height: 6.24rem !important;
      }
      &-div{
        padding-top: 1.99rem;
        &-t{
          font-size: .6rem;
        }
      }
    }
  }
</style>
