<script setup>
import { onUnmounted, shallowRef } from "vue";
import { JsvFlexDiv } from "jsview";
import image1 from "./images/1.png";
import image2 from "./images/2.png";
import image3 from "./images/3.png";
import image4 from "./images/4.jpg";
import image5 from "./images/6.jpg";

let rMyWidth = shallowRef(undefined);
let rMyHeight = shallowRef(undefined);

// 测试flex处理，当尺寸为undefined, 0, null时的显示状态
const cWidth = [null, 50, undefined, 0, 0, undefined];
const cHeight = [null, 50, undefined, 0, undefined, 0];
let rIndex = shallowRef(0);
let rRefreshId = shallowRef(0);
let vInvToken = setInterval(() => {
  rIndex.value++;
  rMyWidth.value = cWidth[rIndex.value % cWidth.length];
  rMyHeight.value = cHeight[rIndex.value % cHeight.length];
}, 2000);

onUnmounted(() => {
  if (vInvToken > 0) {
    clearInterval(vInvToken);
    vInvToken = -1;
  }
});

const _onSizeTest1_1 = (width, height) => {
  console.log(`Flex ready Test1_1 w=${width} h=${height}`);
};
const _onSizeTest1_2 = (width, height) => {
  console.log(`Flex ready Test1_2 w=${width} h=${height}`);
};
</script>

<template>
  <div>
    <div
      :style="{
        fontSize: 30,
        lineHeight: 32,
        color: '#FF0000',
      }"
    >
      {{ `${rIndex % cWidth.length}` }}
    </div>
    <jsv-flex-div
      :style="{
        width: 300,
        height: 400,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'flex-end',
        alignItems: 'flex-start',
        alignContent: 'center',
      }"
      :onSized="_onSizeTest1_1"
    >
      <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
      <jsv-flex-div
        :key="rRefreshId"
        :style="{ flexWrap: 'wrap' }"
        :onSized="_onSizeTest1_2"
      >
        <img :src="image5" :style="{ width: rMyWidth, height: rMyHeight }" />
        <!-- <img :src="image5" :style="{ height: 0 }" /> -->
        <img :src="image2" :style="{ height: 45 }" />
        <div
          id="DivAnchor"
          :style="{ height: 60, width: 60, backgroundColor: '#FF0000' }"
        />
        <img :src="image1" :style="{ height: 45 }" />
        <img :src="image1" :style="{ height: 45 }" />
      </jsv-flex-div>
      <img :src="image3" :style="{ height: 50 }" />
      <!-- <img :src="image4" :style="{ height: 50 }" /> -->
    </jsv-flex-div>
  </div>
</template>

<style scoped></style>
