<template>
  <div class="video-wrapper" :class="className">
    <div
      v-if="!isMobile"
      class="content"
      @mouseenter="handleMouseEnter"
      @mouseleave="showType = ''"
      @mousemove="handleMouseEnter"
      @click="handleClick"
      ref="target"
      :style="{ cursor: mouseCursor }"
    >
      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <div class="item-media">
              <img :src="item.poster" />
              <div
                class="video-play"
                @click.stop="open(item)"
                @mouseenter.stop="handleVideoMouseEnter"
                @mousemove.stop="handleVideoMouseEnter"
              ></div>
            </div>
            <div class="item-text">
              <div class="item-text-tit">{{ item.title }}</div>
              <div class="item-text-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
    <div v-else>
      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <div class="item-media">
              <img :src="item.poster" />
              <div
                class="video-play"
                @click.stop="open(item)"
                @mouseenter.stop="handleVideoMouseEnter"
                @mousemove.stop="handleVideoMouseEnter"
              ></div>
            </div>
            <div class="item-text">
              <div class="item-text-tit">{{ item.title }}</div>
              <div class="item-text-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
    <video
      v-if="isShow === true"
      class="video"
      :src="playVideo.src"
      controls="controls"
      preload="auto"
      autoplay="autoplay"
      x5-playsinline=""
      playsinline
      webkit-playsinline="true"
      ref="video"
    ></video>
    <div class="overlay" v-if="isShow === true" @click="close"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      list: [
        {
          title: '玛丽伍德大学校长致词',
          desc: 'Address from the President of Marywood University',
          src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4',
          poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster1.png'
        },
        {
          title: '玛丽伍德大学介绍',
          desc: 'The Introduction of Marywood University',
          src: 'https://webapp-pub.ezijing.com/project/marywood/marywood.mp4',
          poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png'
        }
      ],
      // 当前播放的视频
      playVideo: {},
      showType: '',
      showIndex: 0,
      mouseCursor: 'pointer',
      swiperOption: {
        speed: 400,
        autoplay: false,
        delay: 3000,
        loop: false,
        height: 500,
        slidesPerView: 'auto',
        centeredSlides: true
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    },
    className() {
      return {
        'is-h5': this.isMobile,
        'is-pc': !this.isMobile
      }
    }
  },
  methods: {
    handleMouseEnter(e) {
      const target = this.$refs.target.getBoundingClientRect()
      if (e.clientX - target.left < (target.right - target.left) / 2) {
        if (this.showIndex > 0) {
          this.mouseCursor =
            'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-left-dark.svg) 30 30, e-resize'
          this.showType = 'left'
        } else {
          this.mouseCursor = 'default'
          this.showType = ''
        }
      } else {
        if (this.showIndex < this.list.length - 1) {
          this.mouseCursor =
            'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-right-dark.svg) 30 30, e-resize'
          this.showType = 'right'
        } else {
          this.mouseCursor = 'default'
          this.showType = ''
        }
      }
    },
    handleVideoMouseEnter() {},
    handleClick() {
      console.log(this.showIndex)
      if (this.showType === 'left') {
        this.handlePrev()
      } else if (this.showType === 'right') {
        this.handleNext()
      }
    },
    handlePrev() {
      // 末尾的视频放到前面
      // const deleteVideo = this.list.splice(this.list.length - 1, 1)
      // this.list.unshift(deleteVideo[0])
      this.showIndex--
      if (this.showIndex <= 0) {
        this.mouseCursor = 'default'
        this.showType = ''
        this.showIndex = 0
      }
      this.$refs.mySwiper.swiper.slideTo(this.showIndex)
    },
    handleNext() {
      // 第一个视频放到最后
      // const deleteVideo = this.list.splice(0, 1)
      // this.list = this.list.concat(deleteVideo)
      this.showIndex++
      if (this.showIndex >= this.list.length - 1) {
        this.mouseCursor = 'default'
        this.showType = ''
        this.showIndex = this.list.length - 1
      }
      this.$refs.mySwiper.swiper.slideTo(this.showIndex)
    },
    open(item) {
      this.playVideo = item
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.video.play()
      })
      document.getElementsByTagName('body')[0].style.height = '100%'
      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
    },
    close() {
      this.isShow = false
      document.getElementsByTagName('body')[0].style.height = ''
      document.getElementsByTagName('body')[0].style.overflow = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  margin-top: 46px;
  .video-wrapper {
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/video_bg.png) no-repeat center center;
    background-size: cover;
  }
  .content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 65px 0;
  }
  .video-list {
    display: flex;
    flex-wrap: nowrap;
    height: 680px;
  }
  .video-item {
    display: flex;
    align-items: center;
    position: relative;
  }
  .video-item + .video-item {
    opacity: 0.4;
  }
  .video-poster {
    position: relative;
    width: 550px;
    height: 550px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }
  }
  .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 79px;
    height: 79px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
  }
  .video-content {
    width: 490px;
    padding: 20px;
    box-sizing: border-box;
  }
  .video-title {
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
  }
  .video-desc {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #ffffff;
  }
  .video-btn {
    position: absolute;
    left: -40px;
    top: 50%;
    width: 79px;
    height: 79px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-l.png) no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
  }
  .video-next {
    left: unset;
    right: -40px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
  }
  .overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.5);
  }

  .video {
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
  }
  .swiper-container {
    height: 550px;
    // .swiper-wrapper{
    // }
    .swiper-slide {
      width: 1080px !important;
      position: relative;
      display: flex;
      align-items: center;
      // margin-left:50px;
      .item-media {
        width: 550px;
        height: 550px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 79px;
          height: 79px;
          background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
          background-size: contain;
          transform: translate(-50%, -50%);
          cursor: pointer;
          z-index: 2200;
        }
      }
      .item-text {
        flex: 1;
        color: #fff;
        padding: 0 40px;
        .item-text-tit {
          font-size: 36px;
          line-height: 60px;
        }
        .item-text-desc {
          font-size: 20px;
        }
      }
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        // background: rgba(0, 0, 0, 0.6);
      }
      &.swiper-slide-active:after {
        display: none;
      }
    }
  }
}
.is-h5 {
  .overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.5);
  }
  .video-list {
    display: flex;
    padding: 0 0.3rem;
    overflow-x: auto;
  }
  .video-item {
    width: 3.25rem;
  }
  .video-item + .video-item {
    margin-left: 0.1rem;
  }
  .video-poster {
    position: relative;
    width: 3.25rem;
    height: 2.04rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }
  }
  .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.39rem;
    height: 0.39rem;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
  }
  .video-content {
    padding: 0.1rem 0;
  }
  .video-title {
    text-align: center;
    font-size: 0.12rem;
    color: #484848;
  }
  .video-desc {
    text-align: center;
    font-size: 0.12rem;
    color: #484848;
  }
  .video {
    width: 100%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
  }
  .swiper-container {
    // height: 4.5rem;
    // .swiper-wrapper{
    // }
    .swiper-slide {
      width: 3.2rem;
      position: relative;
      padding: 0 0.1rem;
      .item-media {
        width: 3rem;
        position: relative;
        img {
          width: 100%;
          height: 3rem;
        }
        .video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 79px;
          height: 79px;
          background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
          background-size: contain;
          transform: translate(-50%, -50%);
          cursor: pointer;
          z-index: 2200;
        }
        &:after {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.7);
        }
      }
      .item-text {
        flex: 1;
        color: #454545;
        padding: 0.1rem 0.2rem 0;
        .item-text-tit {
          font-size: 0.22rem;
          line-height: 0.5rem;
        }
        .item-text-desc {
          font-size: 0.16rem;
        }
      }
      &.swiper-slide-active .item-media:after {
        display: none;
      }
    }
  }
}
</style>
<template>
  <div class="video-wrapper" :class="className">
    <div
      v-if="!isMobile"
      class="content"
      @mouseenter="handleMouseEnter"
      @mouseleave="showType = ''"
      @mousemove="handleMouseEnter"
      @click="handleClick"
      ref="target"
      :style="{ cursor: mouseCursor }"
    >
      <!-- <ul class="video-list">
        <li class="video-item" v-for="(item, index) in list" :key="index">
          <div class="video-poster">
            <img :src="item.poster" />
            <div class="video-play" @click="open(item)"  @mouseenter.stop="handleVideoMouseEnter" @mousemove.stop="handleVideoMouseEnter" v-if="isMobile || index === 0"></div>
          </div>
          <div class="video-content">
            <div class="video-title">{{ item.title }}</div>
            <div class="video-desc">{{ item.desc }}</div>
          </div>
        </li>
      </ul> -->
      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <div class="item-media">
              <img :src="item.poster" />
              <div
                class="video-play"
                @click.stop="open(item)"
                @mouseenter.stop="handleVideoMouseEnter"
                @mousemove.stop="handleVideoMouseEnter"
              ></div>
            </div>
            <div class="item-text">
              <div class="item-text-tit">{{ item.title }}</div>
              <div class="item-text-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
      <!-- <div v-if="showType === 'left' && showIndex > 0" class="video-btn video-prev" @click="handlePrev"></div>
      <div v-if="showType === 'right' && showIndex < list.length - 1" class="video-btn video-next" @click="handleNext"></div> -->
    </div>
    <div v-else>
      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <div class="item-media">
              <img :src="item.poster" />
              <div
                class="video-play"
                @click.stop="open(item)"
                @mouseenter.stop="handleVideoMouseEnter"
                @mousemove.stop="handleVideoMouseEnter"
              ></div>
            </div>
            <div class="item-text">
              <div class="item-text-tit">{{ item.title }}</div>
              <div class="item-text-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
    <video
      v-if="isShow === true"
      class="video"
      :src="playVideo.src"
      controls="controls"
      preload="auto"
      autoplay="autoplay"
      x5-playsinline=""
      playsinline
      webkit-playsinline="true"
      ref="video"
    ></video>
    <div class="overlay" v-if="isShow === true" @click="close"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      list: [
        {
          title: '玛丽伍德大学校长致词',
          desc: 'Address from the President of Marywood University',
          src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4',
          poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster1.png'
        },
        {
          title: '玛丽伍德大学介绍',
          desc: 'The Introduction of Marywood University',
          src: 'https://webapp-pub.ezijing.com/project/marywood/marywood.mp4',
          poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png'
        }
      ],
      // 当前播放的视频
      playVideo: {},
      showType: '',
      showIndex: 0,
      mouseCursor: 'pointer',
      swiperOption: {
        speed: 400,
        autoplay: false,
        delay: 3000,
        loop: false,
        height: 500,
        slidesPerView: 'auto',
        centeredSlides: true
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    },
    className() {
      return {
        'is-h5': this.isMobile,
        'is-pc': !this.isMobile
      }
    }
  },
  methods: {
    handleMouseEnter(e) {
      const target = this.$refs.target.getBoundingClientRect()
      if (e.clientX - target.left < (target.right - target.left) / 2) {
        if (this.showIndex > 0) {
          this.mouseCursor =
            'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-left-dark.svg) 30 30, e-resize'
          this.showType = 'left'
        } else {
          this.mouseCursor = 'default'
          this.showType = ''
        }
      } else {
        if (this.showIndex < this.list.length - 1) {
          this.mouseCursor =
            'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-right-dark.svg) 30 30, e-resize'
          this.showType = 'right'
        } else {
          this.mouseCursor = 'default'
          this.showType = ''
        }
      }
    },
    handleVideoMouseEnter() {},
    handleClick() {
      console.log(this.showIndex)
      if (this.showType === 'left') {
        this.handlePrev()
      } else if (this.showType === 'right') {
        this.handleNext()
      }
    },
    handlePrev() {
      // 末尾的视频放到前面
      // const deleteVideo = this.list.splice(this.list.length - 1, 1)
      // this.list.unshift(deleteVideo[0])
      this.showIndex--
      if (this.showIndex <= 0) {
        this.mouseCursor = 'default'
        this.showType = ''
        this.showIndex = 0
      }
      this.$refs.mySwiper.swiper.slideTo(this.showIndex)
    },
    handleNext() {
      // 第一个视频放到最后
      // const deleteVideo = this.list.splice(0, 1)
      // this.list = this.list.concat(deleteVideo)
      this.showIndex++
      if (this.showIndex >= this.list.length - 1) {
        this.mouseCursor = 'default'
        this.showType = ''
        this.showIndex = this.list.length - 1
      }
      this.$refs.mySwiper.swiper.slideTo(this.showIndex)
    },
    open(item) {
      this.playVideo = item
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.video.play()
      })
      document.getElementsByTagName('body')[0].style.height = '100%'
      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
    },
    close() {
      this.isShow = false
      document.getElementsByTagName('body')[0].style.height = ''
      document.getElementsByTagName('body')[0].style.overflow = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  margin-top: 56px;
  .video-wrapper {
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/video_bg.png) no-repeat center center;
    background-size: cover;
  }
  .content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 65px 0;
  }
  .video-list {
    display: flex;
    flex-wrap: nowrap;
    height: 680px;
  }
  .video-item {
    display: flex;
    align-items: center;
    position: relative;
  }
  .video-item + .video-item {
    opacity: 0.4;
  }
  .video-poster {
    position: relative;
    width: 550px;
    height: 550px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }
  }
  .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 79px;
    height: 79px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
  }
  .video-content {
    width: 490px;
    padding: 20px;
    box-sizing: border-box;
  }
  .video-title {
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
  }
  .video-desc {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #ffffff;
  }
  .video-btn {
    position: absolute;
    left: -40px;
    top: 50%;
    width: 79px;
    height: 79px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-l.png) no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
  }
  .video-next {
    left: unset;
    right: -40px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
  }
  .overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.5);
  }

  .video {
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
  }
  .swiper-container {
    height: 550px;
    // .swiper-wrapper{
    // }
    .swiper-slide {
      width: 1080px !important;
      position: relative;
      display: flex;
      align-items: center;
      // margin-left:50px;
      .item-media {
        width: 550px;
        height: 550px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 79px;
          height: 79px;
          background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
          background-size: contain;
          transform: translate(-50%, -50%);
          cursor: pointer;
          z-index: 2200;
        }
      }
      .item-text {
        flex: 1;
        color: #fff;
        padding: 0 40px;
        .item-text-tit {
          font-size: 36px;
          line-height: 60px;
        }
        .item-text-desc {
          font-size: 20px;
        }
      }
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        // background: rgba(0, 0, 0, 0.6);
      }
      &.swiper-slide-active:after {
        display: none;
      }
    }
  }
}
.is-h5 {
  .overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.5);
  }
  .video-list {
    display: flex;
    padding: 0 0.3rem;
    overflow-x: auto;
  }
  .video-item {
    width: 3.25rem;
  }
  .video-item + .video-item {
    margin-left: 0.1rem;
  }
  .video-poster {
    position: relative;
    width: 3.25rem;
    height: 2.04rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }
  }
  .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.39rem;
    height: 0.39rem;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
  }
  .video-content {
    padding: 0.1rem 0;
  }
  .video-title {
    text-align: center;
    font-size: 0.12rem;
    color: #484848;
  }
  .video-desc {
    text-align: center;
    font-size: 0.12rem;
    color: #484848;
  }
  .video {
    width: 100%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
  }
  .swiper-container {
    // height: 4.5rem;
    // .swiper-wrapper{
    // }
    .swiper-slide {
      width: 3.2rem;
      position: relative;
      padding: 0 0.1rem;
      .item-media {
        width: 3rem;
        position: relative;
        img {
          width: 100%;
          height: 3rem;
        }
        .video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 79px;
          height: 79px;
          background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
          background-size: contain;
          transform: translate(-50%, -50%);
          cursor: pointer;
          z-index: 2200;
        }
        &:after {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.7);
        }
      }
      .item-text {
        flex: 1;
        color: #454545;
        padding: 0.1rem 0.2rem 0;
        .item-text-tit {
          font-size: 0.22rem;
          line-height: 0.5rem;
        }
        .item-text-desc {
          font-size: 0.16rem;
        }
      }
      &.swiper-slide-active .item-media:after {
        display: none;
      }
    }
  }
}
</style>
