<template>
    <div class="fullpage-container">
      <section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/join/join.png')" class="join-section-view">
        <div class="join-div">
          <h2 class="join-div-t">Join LightLimX</h2>
        </div>
      </section-view>
      <div class="join-2-section-view" :style="{'position':'relative','z-index':'1','min-height':'100%','padding-bottom':'.5rem','box-sizing':'border-box'}" >
        <div class="join-2-section-view-wrap">
          <filter-input :locations="locations" @select="handleFilterSelect" :active.sync="activeLocation"></filter-input>
          <join-us-tabs @handleSelect="handleSelect" :active="active" :content="content" :options="positionType"></join-us-tabs>
        </div>
      </div>
    </div>
</template>

<script>
  import animateMixin from '../../utils/animateMixin'
  import {
    assetsUri
  } from "../../utils";
  import SectionView from "../../components/SectionView/index";
  import JoinUsTabs from "../../components/JoinUsTabs/index";
  import FilterInput from "../../components/FilterInput/index";
    export default {
        name: "join",
      components: {FilterInput, JoinUsTabs, SectionView},
      layout:'index',
      mixins:[animateMixin],
      async asyncData(config) {
        const {$axios,$config,payload}=config;
        if(payload){
          return
        }
        const {baseURL}=$config
        const {content} =await  $axios.$get(`${baseURL}/locations/index?page=1&size=99`)
        const locations=content.map((item)=>{
          return {
            ...item,
            id:item.id.toString()
          }
        })
        return {locations}
      },
      mounted(){
          this.activeLocation=this.locations[0].id;
          this.handlePositions().then((type)=>{
            this.active=type.length?type[0].id:''
            this.handlePositionOne()
          })
      },
      methods:{
          async handlePositions(){
            const {baseURL}=this.$config;
            const {data:{content,msg},status} = await this.$axios(`${baseURL}/join/index?page=1&size=99&locations_id=${this.activeLocation}`)
            if(status!==200){
              return  this.$toast(msg)
            }
            this.positionType=content.map((item)=>{
              return {
                ...item.position_type,
                id:item.id.toString()
              }
            })
            return this.positionType
          },
          async handlePositionOne(){
            const {baseURL}=this.$config;
            const res= await this.$axios(baseURL+'/join/one?id='+this.active)
            if(res.status!==200){
              return this.$toast(res.data.msg)
            }
            const {data}=res.data
            this.content=data?data.introduce:'';
          },
        handleSelect(item){
          this.active=item.id;
          this.handlePositionOne()
        },
        handleFilterSelect(item){
            this.activeLocation=item.id;
            this.handlePositions().then((type)=>{
              this.active=type.length?type[0].id:''
              this.handlePositionOne()
            })
        }
      },
      head() {
        return {
          title: this.title,
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: 'My custom description'
            }
          ]
        }
      },
      data(){
          return {
            title:'LightLimX-Join Us',
            active:'',
            locations:[],
            activeLocation:'1',
            content:'',
            assetsUri,
            positionType:[]
          }
      }
    }
</script>

<style scoped lang="less">
  .join-2-section-view{
    .join-2-section-view-wrap{
      max-width: 13rem;
      margin: 0 auto;
    }
  }
  .join{
    &-section-view{
      background-position: center bottom;
      background-size: 100% 4.4rem;
      background-repeat: no-repeat;
      /*background-size: ;*/
      padding-top: .95rem;
      min-height:5.35rem !important;
    }
    &-div{
      padding-top: 1.78rem;
      text-align: center;
      &-t{
        font-size: .48rem;
        font-family: Manrope;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }
  @media screen and (max-width: 768px){
    .join{
      &-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>
