<script setup>
import { onUnmounted, shallowRef } from "vue";
import iconImgPath from "../../assets/icon.png";
import testImgPath from "../../assets/test.jpg";

/* 测试 background 响应式变化 */
const urlList = [`url(${iconImgPath})`, `url(${testImgPath})`];
let urlIndex = 0;

const bgSwitchList = [`使用img`, `使用color`, `img优先于color`];
let bgSwitchIndex = shallowRef(0); // 0, 1, 2切换

let bgTestUrl = shallowRef(urlList[0]);

let timerInterval = setInterval(() => {
  urlIndex++;
  if (urlIndex >= urlList.length) {
    urlIndex = 0;
  }
  bgTestUrl.value = urlList[urlIndex];

  bgSwitchIndex.value++;
  if (bgSwitchIndex.value >= bgSwitchList.length) {
    bgSwitchIndex.value = 0;
  }
}, 1500);

onUnmounted(() => {
  clearInterval(timerInterval);
});
</script>

<template>
  <div id="layout-root">
    <div
      class="content-font"
      :style="{
        width: 180,
        height: 25,
        backgroundColor: 'rgba(255, 255, 0, 1)',
      }"
    >
      style.backgroundColor
    </div>
    <div
      class="content-font"
      :style="{
        top: 30,
        width: 180,
        height: 25,
        backgroundImage: bgTestUrl,
      }"
    >
      style.backgroundImage(url)
    </div>
    <div
      class="content-font"
      :style="{
        top: 60,
        width: 180,
        height: 25,
        backgroundColor: bgSwitchIndex >= 1 ? 'rgba(255, 255, 0, 1)' : '',
        backgroundImage: bgSwitchIndex != 1 ? urlList[0] : '',
      }"
    >
      {{ bgSwitchList[bgSwitchIndex] }}
    </div>
    <div
      class="content-font"
      :style="{
        top: 100,
        width: 90,
        height: 40,
        backgroundImage:
          'linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0,255,0,1), rgba(0,0,255,1))',
      }"
    >
      gradient
    </div>
    <div
      class="content-font"
      :style="{
        top: 100,
        left: 92,
        width: 90,
        height: 40,
        backgroundImage: 'linear-gradient(rgba(255, 0, 0, 1), rgba(0,255,0,1))',
      }"
    >
      gradient
    </div>
  </div>
</template>

<style>
@import "../FontStyle.css";
</style>
