<template>
  <div class="layout_com_page">
    <!-- 模块一 -->
    <div class="homepage-banner" :style="{height: heightdy + 'px'}">
      <div class="video-box">
        <video
          ref="video"
          id="myAudio"
          style="width: 100%;height: 100%; object-fit: fill;"
          src="https://zws-imgs-pub.ezijing.com/static/public/5dfc623c5ab23055f931567d773747ad.mp4"
          playsinline
        ></video>
        <div class="video-img" 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">
          <h5>早期儿童教育-蒙台梭利教育硕士</h5>
          <h3>美国康博斯威尔大学</h3>
        </div>
      </div>
    </div>
    <!-- 模块二 -->
    <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/baidu-snapshot.png')"
            alt
            class="baidu-snapshot"
          />
          <img
            :src="require('@/assets/images/mz.png')"
            alt
            :class="{'cap-image-hover': hoverCap}"
          />
        </div>
        <div class="cap-title">
          <div class="cap-h3">
            <span class="red">学校</span>
            <span class="red">介绍</span>
          </div>
        </div>
        <div class="cap-main" ref="counter">
          <span>康博斯威尔大学（Campbellsville University）始创于1906年，是一所声名卓著、实力雄厚的综合性高等学府。是一所私立非营利性大学，其经费更多地投入到科研和教学上。</span>
        </div>
        <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
      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" ref="wrapper_li_02">
            <div class="div-item">
              <img src="@/assets/images/tir2.png" alt />
              <span>2020 年美国南部大学排名第 92</span>
              <span>连续 24 年上榜《美国新闻》全美最佳大学指南</span>
            </div>
            <div class="div-item">
              <img src="@/assets/images/tir4.png" alt />
              <span>2020 年肯塔基州大学排名第 2</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模块四 -->
    <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="no_mar">传统教学体系与在线教学体系相结合，营造多元化、国际化</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>
    <!-- 模块五 -->
    <leavex
      :imgUrl="require('@/assets/images/mes1.png')"
      :imgUrlBg="require('@/assets/images/mesbk.png')"
      :leavheight=" heightdy - 60"
    />
    <!-- 模块六 -->
    <page-footer />
  </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>
.baidu-snapshot{
  width: 100px !important;
  height: auto !important;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.000001;
}
.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%;
    video {
      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;
    }
  }
  .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: #af1b40ff;
        border: 0px;
        span {
          padding-right: 10px;
        }
      }
      .ts-bu-stop {
        span {
          padding-right: 10px;
        }
      }
      .video-play {
        cursor: pointer;
      }
    }
  }
  .more-title {
    h5 {
      font-size: 20px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: right;
      padding-right: 5px;
    }
    h3 {
      font-size: 42px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
}
.homepage-main {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/d3153d674eb0810028d69b13f075fbc6.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: #af1b40;
          width: 100%;
        }
        .red {
          color: #af1b40;
        }
      }
    }
    .cap-main {
      display: flex;
      flex-wrap: wrap;
      width: 50%;
      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;
  @media screen and (min-width: 320px){
    overflow: hidden !important;
  }
  .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;
            min-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 {
        font-size: 18px;
        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;
}
</style>
