<template>
  <div class="layout_com_page">
    <vue-lazy-component>
      <div class="homepage-banner" :style="{ height: heightdy + 'px' }">
        <div class="video-box">
          <video
            x5-playsinline=""
            webkit-playsinline=""
            ref="video"
            id="myAudio"
            style="width: 100%;height: 80%; object-fit: fill;"
            src="https://zws-imgs-pub.ezijing.com/static/public/54f23971c68517443056d531c6d1f982.mp4"
            playsinline
          ></video>
          <div class="video-img" v-if="isShowPlay"></div>
          <div class="video-img-pop" v-if="isShowPlay"></div>
        </div>
        <div class="more">
          <div class="more-image">
            <div class="more-many" @click="many">了解更多</div>
            <div class="more-many ts-bu-stop" @click="stop" v-show="!isShowPlay">
              <span>学校视频</span>
              <img :src="require('@/assets/images/stop.png')" />
            </div>
            <div class="more-many ts-bu" @click="isShowPlayClick" v-show="isShowPlay">
              <span>学校视频</span>
              <img :src="require('@/assets/images/play.png')" />
            </div>
          </div>
          <div class="more-title">
            <h1>加州整合大学</h1>
            <h2>应用心理学硕士</h2>
          </div>
        </div>
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <div class="color-fff">
        <div class="homepage-main" :class="{ 'study-show': hoverCap }" :style="{ 'min-height': heightdy - 60 + 'px' }">
          <div class="cap">
            <div class="cap-image" ref="cap">
              <img :src="require('@/assets/images/mz.png')" alt :class="{ 'cap-image-hover': hoverCap }" />
            </div>
            <div class="cap-title">
              <div class="cap-h3">
                <span class="black">学校</span>
                <span class="red">介绍</span>
              </div>
            </div>
            <div class="cap-main" ref="counter">
              <span
                >加州整合大学（California Institute of Integral
                Studies）始创于1968年，是一所专注于心理学相关专业的非营利性研究型大学。学校位于美国加州湾区核心——旧金山，坐落在Twitter、Uber、Airbnb和市政府、收容所中间，是链接财富与道德、未来与传统的界限和平衡所在。</span
              >
            </div>
            <ul class="cap-item-box">
              <li>
                <div class="title">学校构成</div>
                <div class="txt">
                  加州整合大学是全美整合教育研究的创始者和中心，由4个学院共26个专业构成，涵盖了本科、硕士和博士的教学和研究工作。
                </div>
              </li>
              <li>
                <div class="title">学校特色</div>
                <div class="txt">
                  绝大多数项目均系围绕心理学理论和临床的细分方向进行专业设置，几十年间，孕育了大批政界、商界、学术界的杰出人才。
                </div>
              </li>
              <li>
                <div class="title">学术影响</div>
                <div class="txt">
                  加州整合大学连续15年蝉联美国加州心理咨询师资格考试通过率第1名，每年约有500名专业心理咨询师在这里持证。
                </div>
              </li>
            </ul>
            <!-- <div class="cap-xx animate__animated animate__fadeInUp animate__delay-0.2s">
              <span>在肯塔基、加利福尼亚、亚利桑那、伊利诺伊和佛罗里达等地共有10个校区。其中主校区坐落于美国“蓝草之州”—肯塔基州（Kentucky）康博斯威尔市，占地面积约2465亩，承担本科、硕士和博士的教学和研究工作。在中国已经与武汉大学、华中科技大学、西南财经大学、延边大学、陕西师范大学等40余所大学建立了合作关系。</span>
            </div> -->
            <!-- <div class="cap-many animate__animated animate__fadeInUp animate__delay-0.2s">
              <div class="cap-many-body">
                <div
                  v-for="(item, index) in capList"
                  :key="index"
                  :class="['cap-many-img',item.class]"
                >
                  <img :src="item.img" />
                  <span class="cap-many-padd">
                    {{itemValue(item.value)}}
                    <small>{{item.label}}</small>
                  </span>
                  <span class="cap-many-yt">{{item.small}}</span>
                </div>
              </div>
            </div> -->
            <div class="cap-more">
              <el-button type="primary" size="medium" @click="many">了解更多</el-button>
              <el-button type="primary" size="medium" @click="applyConsult">申请咨询</el-button>
            </div>
          </div>
        </div>
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <div
        class="homepage-wrapper"
        :style="{ 'min-height': heightdy - 60 + 'px' }"
        :class="[
          { 'wrapper-show-title': hoverWrapperTitle },
          { 'wrapper-show': hoverWrapperLi01 },
          { 'wrapper-show-a': hoverWrapperLi02 }
        ]"
      >
        <div class="homepage-son">
          <div class="title" ref="wrapper_title">
            <span class="animate__animated animate__flipInY">加州整合大学权威认证</span>
          </div>
          <div class="ul-wrapper">
            <div class="li-wrapper aos-init aos-animatea" ref="wrapper_li_01">
              <div class="div-item">
                <img src="@/assets/images/tir3.png" alt />
                <span>中国教育部承认院校</span>
              </div>
              <div class="div-item">
                <img src="@/assets/images/tir1.png" alt />
                <span>美国西部院校协会大学委员会认证</span>
              </div>
            </div>
            <!-- <div class="wrapper-center">
              <img src="@/assets/images/logofff.png" alt />
            </div> -->
            <div class="li-wrapper aos-init aos-animateb rz-new-mar" ref="wrapper_li_02">
              <div class="div-item">
                <img src="@/assets/images/tir2.png" alt />
                <span>2020年旧金山最佳在线学位项目 排名第3</span>
                <!-- <span>连续 24 年上榜《美国新闻》全美最佳大学指南</span> -->
              </div>
              <div class="div-item">
                <img src="@/assets/images/tir4.png" alt />
                <span>2020年心理学在线博士项目 全美排名第14</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </vue-lazy-component>
    <vue-lazy-component>
      <div class="homepage_h_join">
        <div class="join_bg"></div>
        <div class="text wrap">
          <div class="cobo-text">
            <div class="cobo-title">
              <span>加州整合大学</span>
              <span>整合理念</span>
            </div>
            <el-button @click="applyConsult">申请咨询</el-button>
          </div>
          <div class="cobo-text">
            <h4 class="">——东西方文化的整合</h4>
            <h4 class="">——心理学与其他学科之间的整合</h4>
            <h4 class="">——个体身体、头脑、心灵、精神面向的整合</h4>
            <h4 class="">——心理科学内部理论和临床，以及多种治疗流派的整合</h4>
            <!-- <h4 class="no_mar">的学习环境，为学生打造梦想的摇篮，塑造谦卑且具使命感</h4>
            <h4>的领导典范，培养具有卓越学术能力的专业人才。</h4>
            <div class="cobo-size">
              <span
                class="cobo-min"
              >To foster academic excellence through pre-professional certificates,</span>
              <span
                class="cobo-min"
              >associates, baccalaureate, masters, and doctoral programs through</span>
              <span
                class="cobo-min"
              >traditional, technical and online systems.To provide an environment for</span>
              <span
                class="cobo-min"
              >student success. To uphold the dignity of all persons and value diverse</span>
              <span class="cobo-min">perspectives.To model servant leadership through effective</span>
              <span class="cobo-min">stewardship of resources.</span>
            </div> -->
          </div>
        </div>
      </div>
    </vue-lazy-component>
    <div ref="leavex">
      <leavex
        :imgUrl="require('@/assets/images/mes1.png')"
        :imgUrlBg="require('@/assets/images/mesbk.png')"
        :leavheight="heightdy - 60"
      />
    </div>
    <vue-lazy-component>
      <page-footer />
    </vue-lazy-component>
  </div>
</template>

<script>
import Leavex from '@/components/leavex/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import { dyHeight } from './mixins/index.js'
import TWEEN from 'tween.js'
export default {
  name: 'homepage',
  mixins: [dyHeight],
  components: {
    Leavex,
    PageFooter
  },
  data() {
    return {
      // capList: [
      //   {
      //     class: 'cap-many-one',
      //     img: require('@/assets/images/icon1.png'),
      //     value: 'animatedNum1',
      //     label: '个国家',
      //     small: '生源来自'
      //   },
      //   {
      //     class: 'cap-many-two',
      //     img: require('@/assets/images/icon2.png'),
      //     value: 'animatedNum2',
      //     label: '个',
      //     small: '学校专业'
      //   },
      //   {
      //     class: 'cap-many-three',
      //     img: require('@/assets/images/icon3.png'),
      //     value: 'animatedNum3',
      //     label: '+ 名',
      //     small: '全职教员'
      //   },
      //   {
      //     class: 'cap-many-four',
      //     img: require('@/assets/images/icon4.png'),
      //     value: 'animatedNum4',
      //     label: '万+ 名',
      //     small: '在校学生'
      //   }
      // ],
      input: '',
      num1: 0,
      isShowPlay: true,
      animatedNum1: 0,
      num2: 0,
      animatedNum2: 0,
      num3: 0,
      animatedNum3: 0,
      num4: 0,
      animatedNum4: 0,
      hoverCap: false,
      hoverWrapperTitle: false,
      hoverWrapperLi01: false,
      hoverWrapperLi02: false
    }
  },
  watch: {
    num1: function(newValue, oldValue) {
      var vm = this
      function animate(time) {
        window.requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween({ tweeningNumber: oldValue })
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 2000)
        .onUpdate(function() {
          vm.animatedNum1 = this.tweeningNumber.toFixed(0)
        })
        .start()
      animate()
    },
    num2: function(newValue, oldValue) {
      var vm = this
      function animate(time) {
        window.requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween({ tweeningNumber: oldValue })
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 2000)
        .onUpdate(function() {
          vm.animatedNum2 = this.tweeningNumber.toFixed(0)
        })
        .start()
      animate()
    },
    num3: function(newValue, oldValue) {
      var vm = this
      function animate(time) {
        window.requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween({ tweeningNumber: oldValue })
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 2000)
        .onUpdate(function() {
          vm.animatedNum3 = this.tweeningNumber.toFixed(0)
        })
        .start()
      animate()
    },
    num4: function(newValue, oldValue) {
      var vm = this
      function animate(time) {
        window.requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween({ tweeningNumber: oldValue })
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 2000)
        .onUpdate(function() {
          vm.animatedNum4 = Math.round((this.tweeningNumber.toFixed(0) / 10000) * 100) / 100
        })
        .start()
      animate()
    }
  },
  methods: {
    itemValue(key) {
      return this[key]
    },
    dyScroll(present, scrollTop) {
      if (this.$refs.cap && !this.hoverCap) {
        const topcap = this.getElementTop(this.$refs.cap)
        this.hoverCap = !!(present > topcap + 100)
      }
      if (this.$refs.wrapper_title && !this.hoverWrapperTitle) {
        const topcap = this.getElementTop(this.$refs.wrapper_title)
        this.hoverWrapperTitle = !!(present > topcap + 100)
      }
      if (this.$refs.wrapper_li_01 && !this.hoverWrapperLi01) {
        const topcap = this.getElementTop(this.$refs.wrapper_li_01)
        this.hoverWrapperLi01 = !!(present > topcap + 100)
      }
      if (this.$refs.wrapper_li_02 && !this.hoverWrapperLi02) {
        const topcap = this.getElementTop(this.$refs.wrapper_li_02)
        this.hoverWrapperLi02 = !!(present > topcap + 100)
      }
    },
    setAnimatedNum() {
      this.num1 = 52
      this.num2 = 110
      this.num3 = 700
      this.num4 = 12000
    },
    isShowPlayClick() {
      this.isShowPlay = false
      this.$refs.video.play()
      this.$refs.video.onended = () => {
        this.isShowPlay = true
      }
    },
    stop() {
      this.isShowPlay = !this.isShowPlay
      this.$refs.video.pause()
    },
    handleScroll() {
      this.setAnimatedNum()
    },
    many() {
      this.$router.push({
        name: 'major-set'
      })
    },
    applyConsult(state) {
      if (!state) {
        this.goAssignBlock('leavex', 50)
      } else {
        setTimeout(() => {
          this.goAssignBlock('leavex', 50)
        }, 500)
      }
    },
    goAssignBlock(el, speed) {
      const windowH = window.innerHeight
      const h = this.$refs[el].offsetHeight
      const t = this.$refs[el].offsetTop
      const top = t - (windowH - h) / 2
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let currentTop = scrollTop
      let requestId
      function step() {
        if (scrollTop < top) {
          if (currentTop <= top) {
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          currentTop += speed
        } else {
          if (top <= currentTop) {
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'details-recent-news') {
      next(vm => vm.applyConsult(true))
    } else {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
.color-fff {
  background: #fff;
}
.homepage-banner {
  width: 100%;
  position: relative;
  background: url('~@/assets/images/home.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  .video-box {
    z-index: 2;
    width: 100%;
    position: relative;
    height: 100%;
    background: #000;
    video {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      vertical-align: baseline;
    }
    .video-img {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: 3;
      background: url('~@/assets/images/home.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .video-img-pop {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: 4;
    }
  }
  .more {
    width: 80%;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: flex-end;
    position: absolute;
    bottom: 30%;
    .more-image {
      height: 100%;
      display: flex;
      .more-many {
        min-height: 54px;
        width: 132px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 40px;
        color: #fff;
        font-size: 18px;
        border: 1px solid;
        border-radius: 5px;
        cursor: pointer;
        color: rgba(255, 255, 255, 1);
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .ts-bu {
        width: 138px;
        background: #e27f4d;
        border: 0px;
        span {
          padding-right: 10px;
        }
      }
      .ts-bu-stop {
        span {
          padding-right: 10px;
        }
      }
      .video-play {
        cursor: pointer;
      }
    }
  }
  .more-title {
    h2 {
      margin-top: 16px;
      font-size: 26px;
      color: #e27f4d;
      font-weight: 400;
      text-align: right;
    }
    h1 {
      font-size: 36px;
      color: #fff;
      font-weight: 500;
      text-align: right;
    }
  }
}
.homepage-main {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/0b231f6b83983243fd13e2911c371b40.png) no-repeat center
    center;
  background-size: cover;
  display: flex;
  justify-content: center;
  .cap {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0px 40px 0px;
    .cap-image {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.9s;
      img {
        height: 100%;
        width: 70%;
        transition: all 0.9s;
      }
    }
    .cap-image-hover {
      width: 152px !important;
      height: 60px !important;
    }
    .cap-title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 0px 34px 0px;
      .cap-h3 {
        display: flex;
        font-size: 40px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        position: relative;
        &::before {
          content: '';
          position: absolute;
          bottom: -4px;
          height: 3px;
          background: #e27f4d;
          width: 100%;
        }
        .red {
          color: #e27f4d;
        }
        .black {
          color: #222;
        }
      }
    }
    .cap-main {
      display: flex;
      flex-wrap: wrap;
      width: 1000px;
      margin: 0 auto;
      span {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
      }
    }
    .cap-many {
      display: none;
      padding: 40px 0px 0px 0px;
      .cap-many-body {
        display: flex;
        width: 100%;
        justify-content: center;
        .cap-many-img {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 250px;
          .cap-many-padd {
            padding-top: 20px;
            color: #af1b40;
            display: inline-flex;
            font-size: 50px;
            align-items: baseline;
            justify-content: center;
            small {
              padding-left: 5px;
              font-size: 24px;
            }
          }
          .cap-many-yt {
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
            letter-spacing: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
    .cap-xx {
      display: none;
      flex-wrap: wrap;
      width: 80%;
      padding-top: 30px;
      margin: 0 auto;
      span {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
    .cap-more {
      width: 80%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 30px;
      .el-button {
        margin: 0px 52px;
        padding: 19px 37px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
.study-show {
  .cap-many,
  .cap-xx {
    display: flex !important;
  }
}
.wrapper-show {
  .aos-animatea {
    transform: perspective(2500px) rotateY(0) !important;
  }
}
.wrapper-show-title {
  .title {
    span {
      display: inline-block !important;
    }
  }
}
.wrapper-show-a {
  .aos-animateb {
    transform: perspective(2500px) rotateY(0) !important;
  }
}
.homepage-wrapper {
  width: 100%;
  position: relative;
  background: url('~@/assets/images/tir.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
  .homepage-son {
    width: 80%;
    margin: 0 auto;
    position: relative;
    .title {
      font-weight: 700;
      margin: 80px 0 0 0;
      height: 40px;
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      position: relative;
      text-align: center;
      span {
        display: none;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          bottom: -8px;
          height: 3px;
          background: #ffffff;
          width: 100%;
        }
      }
    }
    .aos-init {
      transition-duration: 1s;
      backface-visibility: hidden;
      transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
      transition-property: transform;
      transform: perspective(2500px) rotateY(100deg);
    }
    .ul-wrapper {
      margin: 55px 0 0 0;
      .li-wrapper {
        display: flex;
        justify-content: space-between;
        .div-item {
          display: flex;
          align-items: center;
          flex-direction: column;
          img {
            padding-bottom: 20px;
            width: 410px;
          }
          span {
            height: 33px;
            font-size: 22px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 33px;
            display: inline-block;
            text-align: center;
            min-width: 460px;
          }
        }
      }
      .wrapper-center {
        margin: 0px 0px 34px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.homepage_h_join {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: #202020;
  z-index: 5;
  .join_bg {
    background: url('~@/assets/images/cfbk.png');
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 260%;
    width: 100%;
    background-attachment: fixed;
  }
  .text {
    position: relative;
    z-index: 2;
    .cobo-text {
      flex: 1;
      h4 {
        width: 486px;
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 11px;
      }
      .cobo-size {
        display: flex;
        flex-direction: column;
        .cobo-min {
          color: #ccccccff;
          font-size: 14px;
          display: inline-flex;
        }
      }
      .cobo-title {
        display: flex;
        padding-bottom: 52px;
        flex-direction: column;
        span {
          font-size: 40px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }
      ::v-deep .el-button {
        height: 54px;
        color: #af1b40;
        width: 132px;
      }
    }
  }
  .wrap {
    width: 80%;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
  }
}

::v-deep input::-webkit-input-placeholder {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
::v-deep input::-moz-input-placeholder {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
::v-deep input::-ms-input-placeholder {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.video-scr {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}
.no_mar {
  padding-bottom: 5px !important;
}
.cap-item-box {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  li {
    position: relative;
    width: 320px;
    height: 254px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/907e29cdca94fd79c2725cc0b2161028.png);
    background-size: 100% 100%;
    .title {
      position: absolute;
      top: 10px;
      left: 30px;
      color: #fff;
      font-size: 18px;
    }
    .txt {
      padding-top: 60px;
      width: 260px;
      margin: 0 auto;
      font-size: 18px;
      color: #af1b40;
      line-height: 30px;
    }
  }
}
.rz-new-mar {
  margin-top: 60px;
}
.cap-more {
  ::v-deep .el-button--primary {
    background: #e27f4d;
    border: none;
  }
}
.demo-ruleForm {
  ::v-deep .el-button--primary {
    background: #e27f4d;
    border: none;
  }
}
</style>
