<script setup>
import { onMounted, onUnmounted, shallowRef } from "vue";
import { getDataUrl } from "../CommonUtils/ResourceData";
//无网络环境下使用
const DemoResourceBase = getDataUrl();
const item_url = DemoResourceBase
  ? `${DemoResourceBase}/27bda620942566673ab449a3ef765321.png`
  : "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/BakeViewDemo/AnimatePic/27bda620942566673ab449a3ef765321.png";

const staticLeftPos = shallowRef(0);
let moveLeftTimer = -1;

onMounted(() => {
  moveLeftTimer = setInterval(() => {
    if (staticLeftPos.value > 200) {
      staticLeftPos.value = 0;
    } else {
      staticLeftPos.value = staticLeftPos.value + 10;
    }
  }, 800);
});

onUnmounted(() => {
  if (moveLeftTimer != -1) {
    clearInterval(moveLeftTimer);
    moveLeftTimer = -1;
  }
});
</script>

<template>
  <div>
    <div
      :style="{
        left: staticLeftPos,
        width: 50,
        height: 50,
        backgroundImage: `url(${item_url})`,
      }"
    />
    <div
      className="blockStyle"
      :style="{
        backgroundColor: '#0000FF',
        animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
      }"
    />
    <img
      className="blockStyle"
      :style="{
        objectFit: 'contain',
        animation: 'opacityDemo_CompositeOpacity 3s infinite',
      }"
      :src="item_url"
    />
  </div>
</template>

<style scoped>
.blockStyle {
  top: 50;
  left: 50;
  width: 150;
  height: 150;
}

.picTitleTextClass {
  font-size: 25;
  height: 68;
  line-height: 34;
  color: #000000;
  text-align: "center";
}

@keyframes opacityDemo_CompositeOpacity {
  from {
    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
    opacity: 0.1;
  }
  to {
  }
}

@keyframes opacityDemo_CompositeNoOpacity {
  from {
    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
  }
  to {
  }
}
</style>
