<script setup>
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";
</script>

<template>
  <jsv-flex-div
    :style="{
      width: 300,
      flexDirection: 'row-reverse',
      flexWrap: 'wrap',
      justifyContent: 'center',
      alignItems: 'flex-end',
      backgroundColor: 'rgba(128,0,0,0.5)',
    }"
  >
    <!-- 测试主轴尺寸比内容的主轴尺寸小的场下的折行行为 -->
    <jsv-flex-div
      :style="{
        width: 30,
        flexWrap: 'wrap',
        backgroundColor: 'rgba(0, 128, 0, 0.5)',
      }"
    >
      <img :src="image1" :style="{ height: 50 }" />
      <img :src="image2" :style="{ height: 50 }" />
    </jsv-flex-div>
    <img :src="image3" :style="{ height: 50 }" />
    <img :src="image4" :style="{ height: 50 }" />
    <img :src="image1" :style="{ height: 50 }" />
    <img :src="image2" :style="{ height: 50 }" />
    <img :src="image3" :style="{ height: 50 }" />
    <img :src="image4" :style="{ height: 50 }" />

    <!-- 测试内嵌div, 且div中子项有top/left设置(确认PC环境下是否有问题) -->
    <div :style="{ height: 150, width: 100 }">
      <div
        :style="{
          left: 25,
          top: 50,
          height: 50,
          width: 50,
          backgroundColor: '#FF0000',
        }"
      >
        <div
          :style="{
            left: 10,
            top: 10,
            height: 30,
            width: 30,
            backgroundColor: '#00FF00',
          }"
        ></div>
      </div>
    </div>

    <!-- 测试子项目的strech, 孙子为flex-start -->
    <jsv-flex-div
      :style="{
        width: 60,
        flexDirection: 'column',
        alignSelf: 'stretch',
        alignItems: 'flex-start',
      }"
    >
      <img :src="image1" :style="{ height: 50 }" />
      <img :src="image1" :style="{ height: 50 }" />
    </jsv-flex-div>

    <!-- 测试内容内嵌有子view -->
    <div
      :style="{
        width: 80,
        height: 80,
        backgroundImage: `url(${image4})`,
      }"
    >
      <img :src="image1" :style="{ left: 10, top: 10, height: 40 }" />
      <img :src="image1" :style="{ left: 15, top: 15, height: 45 }" />
      <img :src="image1" :style="{ left: 20, top: 20, height: 50 }" />
    </div>
    <div
      :style="{
        width: 80,
        height: 80,
        backgroundColor: '#0F0F7F',
      }"
    >
      <img :src="image1" :style="{ left: 10, top: 10, height: 40 }" />
      <img :src="image1" :style="{ left: 15, top: 15, height: 45 }" />
      <img :src="image1" :style="{ left: 20, top: 20, height: 50 }" />
    </div>
  </jsv-flex-div>
</template>

<style scoped></style>
