<template>
  <div :class="isShowBlack">
    <div class="loading-view" v-if="!show && !imageUrl.length">
      <span class="girl"></span>
      <div class="boys">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div v-else style="text-align: center; min-height: 100vh">
      <sc-video
        ref="shareExamVid"
        v-if="isVideo"
        :src="videoUrl"
        :poster="imageUrl"
        :progressDot="progressDot"
        :lang="langCode"
      ></sc-video>
      <el-image
        :src="imageUrl"
        v-else-if="imageUrl && imageUrl.length > 0"
        :style="getActiveModuleStyle('image')"
        :fit="fit"
        lazy="true"
      />
    </div>
  </div>
</template>

<script>
import scVideo from "@/components/scVideo";
export default {
  name: "scvideo",
  components: {
    scVideo,
  },
  data() {
    return {
      isVideo: false,
      videoUrl: "",
      imageUrl: "",
      show: false,
      isShowBlack: "",
      langCode: "zh-cn"
    };
  },
  methods: {
    setIsShowBlack() {
      if (!this.show && !this.imageUrl.length) {
        this.isShowBlack = "";
      } else {
        this.isShowBlack = "bg-black";
      }
    },
    //设置当前样式
    getActiveModuleStyle(item) {
      if (item === "image") {
        var imgStyle = "";
        var winWidth = 0;
        var winHeight = 0;
        //获取窗口宽度
        if (window.innerWidth) winWidth = window.innerWidth;
        else winWidth = window.screen.width;
        //获取窗口高度
        if (window.innerHeight) winHeight = window.innerHeight;
        else winHeight = window.screen.height;
        if (winWidth > winHeight) {
          //宽屏
          imgStyle = "height:90vh;width:auto;";
        } else {
          //竖屏
          imgStyle = "height:auto;width:100%;";
          console.log(navigator.userAgent);
          var ua = navigator.userAgent,
            isWindowsPhone = /(?:Windows Phone)/.test(ua),
            isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
            isAndroid = /(?:Android)/.test(ua),
            isFireFox = /(?:Firefox)/.test(ua),
            // isChrome = /(?:Chrome|CriOS)/.test(ua),
            isTablet =
              /(?:iPad|PlayBook)/.test(ua) ||
              (isAndroid && !/(?:Mobile)/.test(ua)) ||
              (isFireFox && /(?:Tablet)/.test(ua)),
            isPhone = /(?:iPhone)/.test(ua) && !isTablet,
            isPc = !isPhone && !isAndroid && !isSymbian;
          if (isPc == false) {
            this.isShowBlack = "";
          }
        }
        return imgStyle;
      } else {
        if (this.isVideo) {
          return "padding:0px;background: black;";
        } else {
          return "padding:0px;";
        }
      }
    },
  },
  created() {
    var searchData = {
      RequestUrl: this.$route.query["fileUrl"],
      LanguageCode: this.$route.query["languageCode"],
    };
    if (searchData.LanguageCode === "en-US")
    {
      this.langCode = "en";
    }
    else
    {
      this.langCode = "zh-cn";
    }
    this.$API.wing.post("GetShareExamUrlAsync", searchData, (res) => {
      if (res) {
        this.show = true;
        this.imageUrl = res.PosterUrl;
        if (!this.imageUrl) {
          this.imageUrl = "";
        }
        this.videoUrl = res.VideoUrl;
        if (!this.videoUrl) {
          this.videoUrl = "";
        }
        if (res.VideoUrl && res.VideoUrl.length > 0) {
          this.isVideo = true;
          this.videoUrl = res.VideoUrl;
        } else {
          this.isVideo = false;
          this.videoUrl = "";
        }
      }
    });
    this.setIsShowBlack();
  },
};
</script>


<style scoped>
.bg-black {
  background-color: black !important;
}
.loading-view {
  width: 8em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -4em;
  font-size: 35px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
}

.loading-view span {
  width: 1em;
  height: 1em;
  --duration: 1.5s;
}

.girl {
  animation: slide var(--duration) ease-in-out infinite alternate;
}

@keyframes slide {
  from {
    transform: translateX(0);
    filter: brightness(1);
  }

  to {
    transform: translateX(calc(8em - (1em * 1.25)));
    filter: brightness(1.45);
  }
}

.boys {
  width: 6em;
  display: flex;
  justify-content: space-between;
}

.boys span {
  animation: var(--duration) ease-in-out infinite alternate;
}

.boys span:nth-child(1) {
  animation-name: jump-off-1;
}

.boys span:nth-child(2) {
  animation-name: jump-off-2;
}

.boys span:nth-child(3) {
  animation-name: jump-off-3;
}

.boys span:nth-child(4) {
  animation-name: jump-off-4;
}

@keyframes jump-off-1 {
  0%,
  15% {
    transform: rotate(0deg);
  }

  35%,
  100% {
    transform-origin: -50% center;
    transform: rotate(-180deg);
  }
}

@keyframes jump-off-2 {
  0%,
  30% {
    transform: rotate(0deg);
  }

  50%,
  100% {
    transform-origin: -50% center;
    transform: rotate(-180deg);
  }
}

@keyframes jump-off-3 {
  0%,
  45% {
    transform: rotate(0deg);
  }

  65%,
  100% {
    transform-origin: -50% center;
    transform: rotate(-180deg);
  }
}

@keyframes jump-off-4 {
  0%,
  60% {
    transform: rotate(0deg);
  }

  80%,
  100% {
    transform-origin: -50% center;
    transform: rotate(-180deg);
  }
}

.loading-view span::before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 15%;
  box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3);
}

.girl::before {
  background-color: hotpink;
}

.boys span::before {
  background-color: dodgerblue;
  animation: var(--duration) ease-in-out infinite alternate;
}

.boys span:nth-child(1)::before {
  filter: brightness(1);
  animation-name: jump-down-1;
}

.boys span:nth-child(2)::before {
  filter: brightness(1.15);
  animation-name: jump-down-2;
}

.boys span:nth-child(3)::before {
  filter: brightness(1.3);
  animation-name: jump-down-3;
}

.boys span:nth-child(4)::before {
  filter: brightness(1.45);
  animation-name: jump-down-4;
}

@keyframes jump-down-1 {
  5% {
    transform: scale(1, 1);
  }

  15% {
    transform-origin: center bottom;
    transform: scale(1.3, 0.7);
  }

  20%,
  25% {
    transform-origin: center bottom;
    transform: scale(0.8, 1.4);
  }

  40% {
    transform-origin: center top;
    transform: scale(1.3, 0.7);
  }

  55%,
  100% {
    transform: scale(1, 1);
  }
}

@keyframes jump-down-2 {
  20% {
    transform: scale(1, 1);
  }

  30% {
    transform-origin: center bottom;
    transform: scale(1.3, 0.7);
  }

  35%,
  40% {
    transform-origin: center bottom;
    transform: scale(0.8, 1.4);
  }

  55% {
    transform-origin: center top;
    transform: scale(1.3, 0.7);
  }

  70%,
  100% {
    transform: scale(1, 1);
  }
}

@keyframes jump-down-3 {
  35% {
    transform: scale(1, 1);
  }

  45% {
    transform-origin: center bottom;
    transform: scale(1.3, 0.7);
  }

  50%,
  55% {
    transform-origin: center bottom;
    transform: scale(0.8, 1.4);
  }

  70% {
    transform-origin: center top;
    transform: scale(1.3, 0.7);
  }

  85%,
  100% {
    transform: scale(1, 1);
  }
}

@keyframes jump-down-4 {
  50% {
    transform: scale(1, 1);
  }

  60% {
    transform-origin: center bottom;
    transform: scale(1.3, 0.7);
  }

  65%,
  70% {
    transform-origin: center bottom;
    transform: scale(0.8, 1.4);
  }

  85% {
    transform-origin: center top;
    transform: scale(1.3, 0.7);
  }

  100%,
  100% {
    transform: scale(1, 1);
  }
}
</style>
