<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-title">
          <h1>美国康博斯威尔大学</h1>
          <h2>教育学硕士</h2>
        </div>
        <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>
    </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年，距今已有116年历史。这是一所声名卓著、实力雄厚的非营利性综合型高等学府。</span
          >
        </div>
        <div class="cap-xx animate__animated animate__fadeInUp animate__delay-0.2s">
          <!-- <span>在肯塔基、加利福尼亚、亚利桑那、伊利诺伊和佛罗里达等地共有10个校区。其中主校区坐落于美国“蓝草之州”—肯塔基州（Kentucky）康博斯威尔市，占地面积约2465亩，承担本科、硕士和博士的教学和研究工作。在中国已经与武汉大学、华中科技大学、西南财经大学、延边大学、陕西师范大学等40余所大学建立了合作关系。</span> -->
          <span
            >康博斯威尔大学的前身是一所独具特色的教师培养学院——拉塞尔教师培养学院，那时候教育先驱者们已经意识到了教师培养的重要性，自发成立了这所教师培养学院。至今，教育学院依然是康博斯威尔大学最好的学院之一。</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 class="div-item">
              <img src="@/assets/images/tir2.png" alt />
              <!-- <span>2020 年美国南部大学排名第 92</span> -->
              <span>连续 25 年上榜《美国新闻》全美最佳大学指南</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" style="justify-content: center;">
            <!-- <div class="div-item">
              <img src="@/assets/images/tir2.png" alt />
              <span>连续 24 年上榜《美国新闻》全美最佳大学指南</span>
            </div> -->
            <div class="div-item">
              <img src="@/assets/images/tir4.png" alt />
              <span>2021 年肯塔基州大学排名第 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 />
    <!-- 模块六 -->
    <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 = 13000
    },
    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 {
    margin-bottom: 40px;
    h2 {
      margin-top: 18px;
      font-size: 26px;
      color: #fff;
      font-weight: normal;
      // text-align: right;
    }
    h1 {
      font-size: 40px;
      color: #fff;
      font-weight: bold;
      // text-align: right;
    }
  }
}
.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>
