<script setup lang="ts">
import { watch, ref } from 'vue';

interface Props {
  list: any[];
  autoplay: number;
}

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  autoplay: 10000,
});

const slide = ref('1');

watch(
  () => props.list,
  () => {
    listChange();
  }
);

function listChange() {
  console.log('999', props.list);
}
</script>
<template>
  <div class="my-carousel-box">
    <div class="content">
      <q-carousel
        v-model="slide"
        transition-prev="slide-right"
        transition-next="slide-left"
        animated
        infinite
        class="my-carousel"
      >
        <q-carousel-slide name="1" class="my-carousel-slide">
          <div class="item">
            <div class="item-equipment">
              <div class="pic"></div>
              <div class="item-name">Z01</div>
            </div>
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="2" class="my-carousel-slide">
          <div class="item">888</div>
        </q-carousel-slide>
        <q-carousel-slide name="3" class="my-carousel-slide">
          <div class="item">999</div>
        </q-carousel-slide>
      </q-carousel>
    </div>
    <div class="points">导航</div>
  </div>
</template>

<style lang="scss" scoped>
.my-carousel-box {
  width: 100%;
  height: 100%;

  display: flex;
  flex-flow: column nowrap;
}
.content {
  flex: 1;
}
.my-carousel {
  height: 100% !important;
  background-color: transparent;
}
.my-carousel-slide {
  padding: 0 !important;
}
.item {
  width: 100%;
  height: 100%;
  overflow: hidden;

  // 5列 * 2行
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.item-equipment {
  border: 1px solid red;
  display: flex;
  flex-flow: column nowrap;
  .pic {
    width: 100%;
    background-color: pink;
    background-image: url('https://img0.baidu.com/it/u=925843206,3288141497&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666803600&t=81f620f962ec6a70673c05d6a55328b5');
    background-size: 100% 100%;
    flex: 1;
  }
  .item-name {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: yellow;
  }
}
</style>
