<template>
    <div class="portfolio" >
        <h2 class="portfolio-t wow fadeInUp" >Portfolio</h2>
        <div class="portfolio-c"  id="iPortfolio">
          <div class="portfolio-c-l">
<!--            :style="{'position':position}"-->
            <div class="portfolio-c-l-fixed" id="ball"
                 :style="{'position':position,'top':top,'bottom':bottom}"
            >
              <img class="portfolio-c-l-fixed-img" v-lazy="assetsUri('images/ball.png')" alt="">
              <span>At LightLimX we believe tomorrow is built today.</span>
            </div>
          </div>
          <div class="portfolio-c-r">
            <ul class="portfolio-c-r-u">
              <li class="portfolio-c-r-l" v-for="(group,index) in staticData" :key="'_'+index">
                <h5 class="portfolio-c-r-l-t wow fadeInUp">{{group.title}}</h5>
                <div class="portfolio-c-r-l-d" >
                  <img v-lazy="assetsUri(item)" data-wow-delay=".4s"  class="wow fadeInRight" v-for="(item,ind) in group.images" :key="ind+'_'" alt="">
                  <img v-if="group.images&&(group.images.length%3<3)" style="opacity: 0" alt="">
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="portfolio-card">
          <div class="portfolio-card-item wow fadeInUp" :data-wow-delay="`${0.4+(index*0.2)}s`"  v-for="(item,index) in cards" :key="'cards_'+index">
            <img v-lazy="assetsUri(item.img)" v-if="item.img" class="portfolio-card-item-img" alt="">
            <span class="portfolio-card-item-btn" @click="$router.push({path:item.link})">
              {{item.btnText}}
              <van-icon name="arrow" class="portfolio-card-item-btn-icon"></van-icon>
            </span>
            <p>{{item.text}}</p>
          </div>
        </div>
    </div>
</template>

<script>
  import {assetsUri} from "../../utils";

  export default {
        name: "Portfolio",
    props:{
      // staticData:{
      //   default:()=>[],
      //   type:Array
      // },
      position:{
        default:'sticky',
        type:String
      },
      top:{
        default:'0px',
        type:String
      },
      bottom:{
        default:'initial',
        type:String
      }
    },
      data(){
          return {
            assetsUri,
            cards:[
              {
                img:'images/apply.png',
                btnText:'Apply For Investment',
                text:'We invert and partner with projects outside of our accelerator',
                link:'/contact'
              },
              {
                img:'images/invest.png',
                btnText:'Invest With Us',
                text:'Join our 1000-strong deal-sharing investor network',
                link:'/contact'
              },
            ],
            staticData:[
              {
                title:'Infrastructure',
                images:[
                  'images/portfolio/组 723@2x.png',
                  'images/portfolio/组 698@2x.png',
                  'images/portfolio/组 699@2x.png',
                  'images/portfolio/组 722@2x.png',
                ]
              },          {
                title:'Web 3.0',
                images:[
                  'images/portfolio/组 713@2x.png',
                  'images/portfolio/组 714@2x.png',
                  'images/portfolio/组 715@2x.png',
                  'images/portfolio/组 718@2x.png',
                  'images/portfolio/组 717@2x.png',
                  'images/portfolio/组 716@2x.png',
                  'images/portfolio/组 864@2x.png',
                  'images/portfolio/组 719@2x.png',
                ]
              },          {
                title:'GameFi',
                images:[
                  'images/portfolio/组 712@2x.png',
                  'images/portfolio/组 711@2x.png',
                  'images/portfolio/组 710@2x.png',
                  'images/portfolio/组 707@2x.png',
                  'images/portfolio/组 708@2x.png',
                  'images/portfolio/组 709@2x.png',
                  'images/portfolio/组 706@2x.png',
                  'images/portfolio/组 705@2x.png'
                ]
              },
              {
                title:'SocialFi',
                images:[
                  'images/portfolio/组 702@2x.png',
                  'images/portfolio/组 703@2x.png',
                  'images/portfolio/组 704@2x.png',
                  'images/portfolio/组 701@2x.png',
                ]
              }
            ]
          }
      }
    }
</script>

<style scoped lang="less">
.portfolio{
  padding-bottom: 1.04rem;
  &-card{
    margin-top: 1.86rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    &-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: .99rem;
      >p{
        text-align: center;
        max-width: 4.76rem;
        margin-top: .42rem;
        font-size: .24rem;
        font-family: Manrope;
        font-weight: 400;
        line-height: .48rem;
        color: #9B9B9B;
      }
      &-img{
        display: block;
        width: 2.24rem;
        height: 2.24rem;
      }
      &-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: .67rem;
        width: 3.80rem;
        height: .6rem;
        background: #EDEDED;
        border-radius: .1rem;
        font-size: .24rem;
        font-family: Manrope;
        font-weight: bold;
        color: #302D2C;
        line-height: .6rem;
        cursor: pointer;
        &-icon{
          display: inline-block;
          margin-left: .2rem;
          color: #342927 ;
          font-size: .12rem;
        }
        &:hover{
          background-color: #F49F00;
          transition: background-color .3s ease-in;
        }
      }
    }
  }


  &-t{
    padding-top: 1.38rem;
    padding-bottom: .94rem;
    text-align: center;
    font-size: .6rem;
    font-family: Manrope;
    font-weight: bold;
    line-height: .84rem;
    color: #FFFFFF;
  }
  &-c{
    display: flex;
    position: relative;
    justify-content: flex-end;
    &-l{
      &-fixed{
        width: calc(100% - 7.8rem);
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s ease-in;
        &-img{
          display: block;
          width: 100%;
          height: 100%;
          max-width: 5.53rem;
          max-height: 5.53rem;
          margin: 0 auto;
        }
        >span{
          display: block;
          max-width: 3.07rem;
          font-size: .30rem;
          font-family: Manrope;
          text-align: center;
          font-weight: 400;
          line-height: .6rem;
          color: #9B9B9B;
          margin: 0 auto;
          margin-top: -.6rem;
        }
      }
    }
    &-r{
      max-width: 7.8rem;
      flex: 1;
      &-u{
        overflow-x: hidden;
        padding: 0 .3rem;
        padding-top: .37rem;
        display: flex;
        flex-direction: column;
      }
      &-l{
        margin-top: .27rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &-t{
          display: inline-block;
          margin: 0 auto .54rem;
          border: 1px solid #393939;
          border-radius: .29rem;
          font-size: .24rem;
          font-family: Manrope;
          font-weight: bold;
          color: #F49F00;
          padding: 10px .35rem;
          box-sizing: border-box;
        }
        &-d{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          img{
            display: block;
            width: 2.06rem;
            height: 1.33rem;
            margin-bottom: .36rem;
            cursor: pointer;
            transition: all .3s ease-in;
            &:hover{
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1250px) {
  .portfolio{
    &-c{
      &-l{
        &-fixed{
          >span{
            display: none;
          }
        }
      }
    }
  }
}
  @media screen and (max-width: 768px) {
    .portfolio{
      padding-bottom: 1.04rem;
      &-card{
        margin-top: 1.43rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-wrap: wrap;
      }


      &-t{
        padding-top: 1.43rem;
        padding-bottom: 0;
      }
      &-c{
        display: flex;
        flex-direction: column;
        position: relative;
        &-l{
          &-fixed{
            width: 100% !important;
            img{
              margin: 0 auto;
            }
            >span{
              display: none;
            }
          }
        }
        &-r{
          flex: 1;
          &-u{
            padding-top: 0;
            display: flex;
            flex-direction: column;
          }
          &-l{
            margin-top: .6rem;
            &:first-child{
              margin-top: -0rem;
            }
            &-t{
              margin: 0 auto .54rem;
              border-radius: .4rem;
              font-size: .4rem;
              padding: .10rem .35rem;
            }
          }
        }
      }
    }
  }
</style>
