<template>
  <!-- 视频 -->
  <div
    class="videocon"
    v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo"
    :style="{
      backgroundColor: `${coverData.videoColorSelec}`,
    }"
  >
    <video
      v-if="coverData.videoMo"
      x5-playsinline="true"
      playsinline="true"
      webkit-playsinline="true"
      class="video"
      ref="openvideo$"
      preload
      autoplay
      :poster="coverData.videoMoIcon"
      :class="coverData.videoMoLoc == 'center' ? 'contain' : 'cover'"
      :src="coverData.videoMo"
      :controls="Boolean(coverData.coverVideoControl)"
      muted
    ></video>

    <img
      v-show="playing"
      @click.stop="bofang"
      class="bofang"
      :src="require('@/assets/images/default/bofang.png')"
      alt=""
    />

    <div @click.stop="jumpVideo" class="jump">
      {{
        countdownVideo > 0
          ? $t("common.jumpTips", { second: countdownVideo })
          : $t("common.jump")
      }}
    </div>
  </div>

  <!-- 图片 -->

  <div
    class="imgcon"
    v-if="coverData.coverSelect.toLowerCase().indexOf('img') > -1 && showImg"
    @click="closeImg"
  >
    <div
      @click="closeImg"
      class="image-front"
      :style="{
        backgroundImage: `url(${coverData.coverPc})`,
        backgroundSize: coverData.coverMoLoc == 'center' ? 'contain' : 'cover',
      }"
    ></div>
    <div
      class="img-background"
      v-if="coverData.coverMoLoc !== 'full'"
      :style="{
        backgroundImage:
          coverData.coverImgBac == 'imgTile'
            ? `url(${coverData.coverBac})`
            : `none`,
        backgroundColor:
          coverData.coverImgBac == 'imgTile'
            ? `none`
            : `${coverData.imgColorSelec}`,
      }"
    ></div>
    <div @click.stop="closeImg" class="jump">
      {{
        countdownImg > 0
          ? $t("common.jumpTips", { second: countdownImg })
          : $t("common.jump")
      }}
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed, onMounted, defineProps, unref } from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";
import { useI18n, getLocale } from "@/i18n";

const { t } = useI18n({ useScope: "global" });

const props = defineProps({
  coverData: {
    type: [Boolean, Object],
    default: () => {
      return {};
    },
  },
});
const store = useStore();
const openvideo$ = ref(null);
const playing = ref(true);

const show = ref(true);
const countdownImg = ref(3);
const countdownVideo = ref(3);
const timer = ref(null);

const showVideo = ref(true);
const showImg = ref(true);

const currentScene = computed(() => store.getters["scene/currentScene"]);

const closeImg = (isCall = false) => {
  useApp().then((app) => {
    showImg.value = false;
    if (props.coverData.coverSelect.toLowerCase().indexOf("and") > -1) {
      if (props.coverData.coverImageOrder == "later") {
        showVideo.value = true;
        showVideoDaoji();
      }
      app.render();
    } else {
      app.render();
    }
  });
};

const closeVideo = (isCall = false) => {
  useApp().then((app) => {
    showVideo.value = false;
    if (!isCall) {
      app.render();
    }
  });
};

const showImgDaoji = (cb = () => {}) => {
  timer.value = setInterval(() => {
    countdownImg.value--;
    if (countdownImg.value == 0) {
      clearInterval(timer.value);
      timer.value = null;
      cb();

      return;
    }
  }, 1000);
};

const showVideoDaoji = (isCall = false) => {
  timer.value = setInterval(() => {
    countdownVideo.value--;
    if (countdownVideo.value == 0) {
      clearInterval(timer.value);
      timer.value = null;
      return;
    }
  }, 1000);
};

const jumpVideo = (isCall = false) => {
  closeVideo(isCall);
  if (isCall) {
    showImg.value = true;
    showImgDaoji();
  }
};

// 执行图片封面
const executeImg = () => {
  showImgDaoji(() => {
    closeImg();
  });
};

onMounted(() => {
  console.log("coverData", unref(props.coverData));
  switch (true) {
    case props.coverData.coverSelect.toLowerCase().indexOf("and") > -1:
      if (props.coverData.coverImageOrder == "before") {
        // 倒计时结束需要唤起图片
        showVideoDaoji(true);
        showImg.value = false;
      } else {
        showImgDaoji(true);
        showVideo.value = false;
      }

      break;
    case props.coverData.coverSelect.toLowerCase().indexOf("video") > -1:
      showVideoDaoji(() => {
        props.coverData.coverVideoInWay == 1 && closeVideo();
      });
      break;
    case props.coverData.coverSelect.toLowerCase().indexOf("img") > -1:
      showImgDaoji(() => {
        props.coverData.coverImageInWay == 1 && closeImg();
      });
      break;
    default:
      break;
  }
  if (props.coverData.coverSelect) {
  }

  if (openvideo$.value) {
    openvideo$.value.addEventListener("ended", () => {
      if (props.coverData.coverVideoInWay) {
        closeVideo();
      }
    });

    openvideo$.value.addEventListener("playing", () => {
      if (playing.value) {
        playing.value = false;
      }
    });

    openvideo$.value.addEventListener("pause", () => {
      if (!playing.value) {
        playing.value = true;
      }
    });

    document.addEventListener(
      "WeixinJSBridgeReady",
      () => {
        console.log("WeixinJSBridgeReady", openvideo$.value);
        openvideo$.value.play();
      },
      false
    );
  }
}),
  useApp().then((app) => {
    app.Scene.on("ready", () => {
      if (show.value) {
        show.value = false;
      }
    });
  });
</script>
<style lang="scss" scoped>
.imgcon,
.videocon {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.imgcon {
  background-position: center;
  z-index: 10;
  .image-front,
  .img-background {
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;

    top: 0;
    z-index: 1;
    bottom: 0;
    left: 0;
  }
  .img-background {
    background-repeat: repeat;
  }
  .image-front {
    z-index: 10;
  }
}

.videocon {
  text-align: center;

  > video {
    max-width: inherit;
    height: auto;
    min-height: 100%;
    top: 50%;
    left: 50%;
    z-index: 99;
    display: inline-block;
    transform: translate(-50%, -50%);
    position: absolute;
  }

  .contain {
    height: 100%;
  }

  .cover {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .bofang {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 80px;
    height: 80px;
    z-index: 99999;
    pointer-events: none;
  }
}

.zidxhigh {
  z-index: 99;
}

.jump {
  position: absolute;
  right: 15px;
  top: 20px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  z-index: 999;
  color: #333333;
  border-radius: 1px;
  padding: 4px 12px;
  cursor: pointer;
}

@keyframes loading {
  100% {
    left: -900px;
  }
}
</style>
