<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\childContent\chart\devImage.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-12 10:21:10
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="marginbox">
    <border6 ref="refborder6">
      <template v-slot>
        <div
          class="box"
          :key="keynum"
          :style="{ width: boxWH.width, height: boxWH.height }"
        >
          
          <div class="title-box"><h2>{{ props.title }}</h2>
            </div>
            <div v-if="imageList.length>0" class="swiperbox">
            <swiper-container
        :slides-per-view="1"
        :loop="true"
        :space-between="spaceBetween"
        effect= "coverflow"
        :centered-slides="true"
        :pagination="{
          hideOnClick: true,
        }"
        :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        enabled:false,
        }"
        :autoplay="{
          delay: 3000,
          disableOnInteraction:false,
        }"
        @progress="onProgress"
        @slidechange="onSlideChange"
      >
        <swiper-slide v-for="res in imageList" :key="res.id">
          <el-image
            style="width: 100%; height: 100%"
            :src="res.image"
            :fit="'scale-down'"
          >
          </el-image>
        </swiper-slide>
      </swiper-container>
        </div>
        </div>
       
      </template>
    </border6>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue"
import border6 from "@/components/borderBox/border6.vue";
import { register } from 'swiper/element/bundle';
register()
let props = defineProps<{
  title: string;
}>();
let keynum = ref(0);
let refborder6 = ref();
let marginbox = ref();
let boxWH = reactive({
  width: "0px",
  height: "0px",
});
const spaceBetween = 10;
let imageList = reactive([]);
function setchartWH(width: any, height: any) {
  marginbox.value.style.height = height + "px";
  marginbox.value.style.width = width + "px";
  boxWH.height = height - 10 + "px";
  boxWH.width = width - 10 + "px";
  refborder6.value.resetWH();
}
const setData = (value?: any) => {
    imageList=reactive([...value])

  keynum.value++;
  // data.value='设备名称'
};
const onProgress = (e) => {};

const onSlideChange = (e) => {};
defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped>
.title-box{
  display: flex;
  justify-content: space-between;
}
.title-box > h2{
  margin-left: 20px;
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
}
.swiperbox{
    width: 100%;
    height: 85%;
}
 .swiper, swiper-container{
  width: 100%;
  height: 100%;
  display: inline-block !important;
}
</style>
