<template>
    <section class="focus-areas-view" :style="isCssStyle">
      <div class="focus-areas-view-wrap">
        <h1 class="focus-areas-view-h1 wow fadeInUpBig">Focus Areas</h1>
        <h6 class="focus-areas-view-h6 wow fadeInUp"  data-wow-delay=".3s">The future is crafted by people who understand where things are heading.</h6>
        <p class="focus-areas-view-p wow fadeIn" data-wow-delay=".5s">The next innovation is already here.We believe that decentralization has the power to transform the global economy and create the largest one time shift in wealth.</p>
        <div class="focus-areas-view-wheel">
             <div id="home-hero" class="hero">
                 <div id="home-circles" class="container flex-grow-1 d-flex">
                     <div class="spin-circle-container">
                         <div class="spin-outer-container">
                             <div id="spinOuterCircle">
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/5.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/2.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/3.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/4.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/5.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/6.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/1.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/2.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/4.png')">
                                 </div>
                                 <div class="outer-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/6.png')">
                                 </div>

                             </div>
                         </div>
                         <div class="spin-inner-container">
                             <div id="spinInnerCircle">
                                 <div class="inner-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/7.png')">
                                 </div>
                                 <div class="inner-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/8.png')">
                                 </div>
                                 <div class="inner-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/9.png')">
                                 </div>
                                 <div class="inner-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/10.png')">
                                 </div>
                                 <div class="inner-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/8.png')">
                                 </div>
                                 <div class="inner-item">
                                     <img v-lazy="assetsUri('images/FocusAreas/9.png')">
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                <div class="hero-circle-text-container">
                    <div class="hero-circle-text">
                        <div id="hero-text-1">
                            <p  class="wow fadeInUp"  data-wow-delay=".3s">We focused exclusively on disruptive innovations related</p>
                            <p  class="wow fadeInUp"  data-wow-delay=".3s">to the Public chain ecosystem, Web3, NFT, GameFi, Layer2,</p>
                            <p  class="wow fadeInUp" data-wow-delay=".3s">DeFi , Metaverse and other fields.</p>
                        </div>
                    </div>
                </div>
             </div>
        </div>
      </div>
    </section>
</template>
<script>
import { assetsUri } from "../../utils";
import gsap from 'gsap'
import ScrollTrigger from './ScrollTrigger.js'
import Jquery from 'jquery'
gsap.registerPlugin(ScrollTrigger)
    export default {
        name: "FocusAreas",
        props:{
          cssStyle:{
            type:Object,
            default:()=>{
              return {}
            }
          }
        },
        data() {
          return {
            assetsUri,
          };
        },
  mounted () {
    const _this = this// 赋值vue的this
    Jquery(window).on('resize', function () {
      _this.setCircleSizes()
      ScrollTrigger.refresh()

      if (window.innerWidth < 992) {
        Jquery('.remove-for-mobile').remove()
      }
    }).resize()

    /* Register ScrollTrigger */

    /* Circle Timeline - Always & First for Speed Controls on Desktop */
    const circleTimeline = gsap.timeline({
      repeat: -1
    })

    circleTimeline
      .to('#spinInnerCircle', {
        duration: 120,
        rotation: 360,
        ease: 'none'
      })
      .to('#spinOuterCircle', {
        duration: 120,
        rotation: -360,
        ease: 'none'
      }, 0)
      .to('.inner-item', {
        duration: 120,
        rotation: -360,
        ease: 'none'
      }, 0)
      .to('.outer-item', {
        duration: 120,
        rotation: 360,
        ease: 'none'
      }, 0)

    ScrollTrigger.matchMedia({
      // DESKTOP
      '(min-width: 992px)': function () {
        /* Testimonials */

        ScrollTrigger.create({
          trigger: '#home-testimonials',
          markers: false,
          toggleClass: 'active',
          pin: '#home-testimonials .content',
          scrub: true,
          invalidateOnRefresh: true
        })

        /* Posts */
        gsap.defaults({ ease: 'power3' })
        gsap.set('.post-item', { y: 100 })

        ScrollTrigger.batch('.post-item', {
          onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
          onLeave: batch => gsap.set(batch, { opacity: 0, y: -100, overwrite: true }),
          onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
          onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 100, overwrite: true }),
          markers: false,
          end: 'bottom+=100px',
          invalidateOnRefresh: true
        })

      },
      // TABLET OR PHONE
      '(min-width: 400px) and (max-width: 991px)': function () {
        /* Testimonials */
        gsap.set('.testimonials-container', { y: 0 })

        ScrollTrigger.create({
          trigger: '#home-testimonials .content',
          markers: false,
          pin: true,
          anticipatePin: true,
          start: 'top-=120',
          invalidateOnRefresh: true
        })

        gsap.set('.testimonial-item', { y: 200 })

        ScrollTrigger.batch('.testimonial-item', {
          onEnter: batch => gsap.to(batch, { y: 0, overwrite: true }),
          onLeave: batch => gsap.set(batch, { y: 200, overwrite: true }),
          onEnterBack: batch => gsap.to(batch, { y: 0, overwrite: true }),
          onLeaveBack: batch => gsap.set(batch, { y: 200, overwrite: true }),
          invalidateOnRefresh: true
        })

        /* Posts */
        gsap.defaults({ ease: 'power3' })
        gsap.set('.post-item', { y: 50, opacity: 0 })

        ScrollTrigger.batch('.post-item', {
          onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
          invalidateOnRefresh: true
        })
      }
    })

  },
  methods: {
    setCircleSizes () {
      const containerWidth = Jquery('.spin-circle-container').width()
      const innerCircleSize = containerWidth * 0.75
      const outerCircleOverflow = containerWidth * 0.1
      const innerCircleOverflow = Math.round((containerWidth - innerCircleSize) * 0.9)
      const circleSize = containerWidth * 0.05

      Jquery('#spinOuterCircle').css({ width: containerWidth, height: containerWidth })
      Jquery('.spin-outer-container').css({ top: outerCircleOverflow })

      Jquery('#spinInnerCircle').css({ width: innerCircleSize, height: innerCircleSize })
      Jquery('.spin-inner-container').css({ top: innerCircleOverflow })

      this.setupSpinContainer('#spinOuterCircle', '.outer-item', containerWidth / 2)
      this.setupSpinContainer('#spinInnerCircle', '.inner-item', innerCircleSize / 2)
    },
    setupSpinContainer (spinContainer, spinContainerItem, spinRadius) {
      const radius = spinRadius
      const fields = Jquery(spinContainerItem)
      const container = Jquery(spinContainer)
      const width = container.width()
      const height = container.height()
      let angle = 0
      const step = (2 * Math.PI) / fields.length

      fields.each(function () {
        const x = Math.round(width / 2 + radius * Math.cos(angle) - Jquery(this).width() / 2)
        const y = Math.round(height / 2 + radius * Math.sin(angle) - Jquery(this).height() / 2)

        Jquery(this).css({
          left: x + 'px',
          top: y + 'px'
        })
        angle += step
      })
    }
  },
      computed:{
        isCssStyle(){
          return this.cssStyle
        }
      }
    }
</script>
<style scoped lang="less">
  @import './index.less';
  .focus-areas-view{
    background: url("~/static/images/FocusAreas/FocusAreas_bj.png") no-repeat;
    width: 100%;
    background-size: 100% 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: .77rem;
    &-wrap{
      width: 100%;
      max-width: 13rem;
      margin: 0 auto;
    }
    &-wheel{
      margin-top: 0;
      width: 100%;
      height: 7.32rem;
    }
    &-h1{
      font-size: .6rem;
      font-family: Manrope;
      font-weight: bold;
      line-height: .82rem;
      color: #FFFFFF;
      text-align: center;
    }
    &-h6{
      margin-top: .1rem;
      margin-bottom: 0;
      font-size: .16rem;
      font-family: Manrope;
      font-weight: 400;
      line-height: .22rem;
      color: #FFFFFF;
      text-align: center;
    }
    &-p{
      font-size: .22rem;
      font-family: Manrope;
      font-weight: bold;
      line-height: .44rem;
      color: #FFFFFF;
      text-align: center;
      max-width: 11.22rem;
      margin:  .74rem auto 0;
    }
  }
  @media screen and (max-width: 768px){
    .focus-areas-view{
      padding-top: .88rem;
      &-wheel{
        margin-top: 1.5rem;
        height: auto;
        min-height: 5.30rem;
      }
      &-h1{
        font-size: .6rem;
        line-height: .82rem;
      }
      &-h6{
        max-width: 5.5rem;
        margin:  0 auto;
        margin-top: .27rem;
        font-size: .24rem;
        line-height: .32rem;
      }
      &-p{
        max-width: 6.9rem;
        font-size: .3rem;
        line-height: .4rem;
        text-align: center;
        margin:  .29rem auto 0;
      }
    }
  }
</style>
