<template>
    <div id='layout-root'>
        <div style="{top: 0}">
            <div id="0列0行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 0 }">
                <div class="content-font titleStyle"> fill(缩放变形)</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'fill' }" :src="bgTestUrl" />
                </div>
            </div>
            <div id="1列0行" :style="{ left: coloumWidth * 1, top: tabLineHeight * 0 }">
                <div class="content-font titleStyle">contain</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'contain' }" :src="testImgPath" />
                </div>
            </div>
            <div id="0列1行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 1 }">
                <div class="content-font titleStyle">none</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'none' }" :src="testImgPath" />
                </div>
            </div>
            <div id="1列1行" :style="{ left: coloumWidth * 1, top: tabLineHeight * 1 }">
                <div class="content-font titleStyle">scale-down</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'scale-down' }" :src="testImgPath" />
                </div>
            </div>
            <div id="0列2行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 2 }">
                <div class="content-font titleStyle">cover</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'cover' }" :src="testImgPath" />
                </div>
            </div>
            <div id="1列2行" :style="{ left: coloumWidth * 1, top: tabLineHeight * 2 }">
                <div class="content-font titleStyle">none(小图)</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'none' }" :src="tinyImgPath" />
                </div>
            </div>
            <div id="0列3行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 3 }">
                <div class="content-font titleStyle">scale-down(小图)</div>
                <div class="frameStyle">
                    <img class="imageStyle" :style="{ objectFit: 'scale-down' }" :src="tinyImgPath" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import testImgPath1 from '../../assets/test.jpg';
import tinyImgPath1 from '../../assets/icon.png';
import { computed, shallowRef, onUnmounted } from "vue"

const testImgPath = computed(() => {
    return testImgPath1;
})
const tinyImgPath = computed(() => {
    return tinyImgPath1;
})
const coloumWidth = computed(() => {
    return 120;
})
const tabLineHeight = computed(() => {
    return 76;// imageSize.height + 26
})

/* 测试 src 响应式变化 */
const urlList = [
    tinyImgPath1, 
    testImgPath1
];
let urlIndex = 0;

let bgTestUrl = shallowRef(urlList[0]);

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

onUnmounted(() => {
  clearInterval(timerInterval);
 })

</script>


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

<style scoped>
.titleStyle {
    width: 100;
    height: 16;
}

.imageStyle {
    top: 2;
    left: 2;
    width: 100;
    height: 50;
}

.frameStyle {
    top: 16;
    /* titleHeight */
    width: 104;
    /* imageSize.width+4 */
    height: 54;
    /* imageSize.height+4 */
    background-color: rgba(0, 255, 0, 1)
}
</style>