<template>
  <div
    class="welcome"
    :style="{
      backgroundImage: !isVideo
        ? `url(${g_CDN}images/${g_isMobile ? 'mbbg' : 'bg'}.jpg)`
        : '',
    }"
  >
    <img class="logo" :src="`${g_CDN}images/logo.png`" alt="" />
    <div class="wlvideo brightness" v-if="isVideo">
      <div class="videocon">
        <video
          ref="welcome"
          autoplay
          controls
          controlslist="nodownload noremoteplayback"
          disablePictureInPicture
          :src="`${g_CDN}videos/once.mp4`"
        ></video>
        <div @click="handleJump" class="vbtn">
          <img :src="`${g_CDN}images/jump.png`" alt="" />
        </div>
      </div>
    </div>

    <div class="wlcon" v-else>
      <img class="top1" :src="`${g_CDN}images/top1.png`" alt="" />
      <img class="top2" :src="`${g_CDN}images/top2.png`" alt="" />
      <img class="top3" :src="`${g_CDN}images/top3.png`" alt="" />
      <ul>
        <li @click="select('fdkk')">展馆漫游</li>
        <li @click="select('pano')">展区漫游</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showJump: "",
      isVideo: false,
      isKj: false,
    };
  },
  watch: {},
  methods: {
    select(type) {
      this.$bus.$emit("changeType", type);
      this.$bus.$emit("toggleBgm", true);
      this.handleJump();
      // this.isVideo = true;
      // this.startplay();
    },
    handleJump() {
      this.$bus.$emit("closeWel", true);
    },
    startplay() {
      this.$nextTick(() => {
        if (this.$refs.welcome) {
          this.$refs.welcome.play();
          this.$refs.welcome &&
            this.$refs.welcome.addEventListener("ended", () => {
              this.$bus.$emit("closeWel", true);
            });
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.isKj = this.getQueryVariable("type") == "kj";
      if (this.isKj) {
        setTimeout(() => {
          this.select("pano");
        }, 0);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.welcome {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 102%;
  height: 102%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 0;
  background-color: #7dbded;
  z-index: 9999;
  .logo {
    position: absolute;
    left: 60px;
    top: 36px;
    width: 140px;
  }
  .wlcon {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    > img {
      max-width: 100%;
      display: block;
      margin: 0 auto;
    }

    .top1 {
      width: 400px;
    }

    .top2 {
      width: 204px;
      margin: 16px auto;
    }

    .top3 {
      width: 440px;
    }

    > ul {
      margin: 110px auto 0;
      width: 365px;
      > li {
        @h: 60px;
        border: 2px solid @color;
        height: @h;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        letter-spacing: 2px;
        cursor: pointer;
        color: @color;
        background-color: rgba(255, 255, 255, 0.4);
        font-size: 20px;
        &:last-of-type {
          margin-top: 30px;
        }
      }
    }
  }

  .wlvideo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    height: 100%;
    .videocon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      > video {
        width: 50%;
      }
      .vbtn {
        margin: 30px auto;
        width: 80px;
        cursor: pointer;
        > img {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (max-width: 800px) {
  .welcome {
    .logo {
      position: absolute;
      right: 0;
      top: 0;
      left: unset;
      width: 30%;
    }
    .wlcon {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      width: 100%;
      > img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
      }

      .top1 {
        width: 50%;
      }

      .top2 {
        width: 40%;
        margin: 16px auto;
      }

      .top3 {
        width: 80%;
      }

      > ul {
        margin: 38% auto 0;
        width: 50%;
        > li {
          @h: 60px;
          border: 2px solid @color;
          height: @h;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 40px;
          margin-bottom: 14px;
          letter-spacing: 2px;
          cursor: pointer;
          color: @color;
          background-color: rgba(255, 255, 255, 0.4);
          font-size: 20px;
        }
      }
    }

    .wlvideo {
      .videocon {
        > video {
          width: 100%;
        }
        .vbtn {
          width: 60px;
        }
      }
    }
  }
}
</style>
