<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\MicrofactoryDev\component\swiper.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-10 16:02:29
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<!--
 * @FilePath: \daping\src\views\MicrofactoryDev\component\swiper.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-10 16:02:29
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :style="{ width: boxWH.width, height: boxWH.height }">
    <div class="boxtop" :key="topkey">
      <div class="top-item">
        <div class="div_p" style="color: #3ac541">
          <i class="iconfont icon-zhengque1 div-p-tip"></i>
          <h5>{{ devTip.on }} {{t('messages.units')}}</h5>
        </div>
        <h2>{{t('messages.DevRunNum')}}</h2>
      </div>
      <div class="top-item">
        <div class="div_p">
          <i
            :class="
              devTip.Status
                ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
                : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
            "
          ></i>
        </div>
        <h2>{{devTip.Status?t('messages.GatewayON'):t('messages.GatewayOff')}}</h2>
      </div>
      <div class="top-item">
        <div class="div_p" style="color: #ff9e5b">
          <i class="iconfont icon-jinggao div-p-tip"></i>
          <h5>{{ devTip.off }} {{t('messages.units')}}</h5>
        </div>
        <h2>{{t('messages.DevOffNum')}}</h2>
      </div>
    </div>
    <div class="boxbottom" :key="bottomkey">
      <swiper-container
        :slides-per-view="1"
        :space-between="spaceBetween"
        effect= "coverflow"
        :centered-slides="true"
        :pagination="{
          hideOnClick: true,
        }"
        :autoplay="{
          delay: 3000,
          disableOnInteraction:false,
        }"
        @progress="onProgress"
        @slidechange="onSlideChange"
      >
        <swiper-slide v-for="res in imageList" :key="res.id">
          <el-image
            style="width: 80%; height: 80%"
            :src="res.image"
            :fit="'scale-down'"
          >
          </el-image>
        </swiper-slide>
      </swiper-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { register } from 'swiper/element/bundle';
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
register()
const spaceBetween = 10;
let topkey = ref(0);
let bottomkey = ref(0);
const devTip = reactive({
  id: null,
  Status: null,
  on: 0,
  off: 0,
});
let imageList = reactive(null);
const onProgress = (e) => {};

const onSlideChange = (e) => {};
let boxWH = reactive({
  width: "0px",
  height: "0px",
});
function setchartWH(width: any, height: any) {
  boxWH.height = height + "px";
  boxWH.width = width + "px";
}
function changeData(val: any) {
  devTip.id = val.id;
  devTip.Status = val.Status;
  devTip.on = val.on;
  devTip.off = val.off;
  topkey.value++;
}
function changeImagelist(val: any) {
  let onNull = reactive([]);
  val.forEach((res) => {
    if (res.image) {
      onNull.push(res);
    }
  });
  imageList = onNull;
  onNull = reactive([]);
  bottomkey.value++;
}
defineExpose({
  setchartWH,
  changeData,
  changeImagelist,
});
</script>

<style scoped>
@import "@/assets/css/iconfont.css";
.boxtop {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top-item {
  width: 30%;
  height: 100%;
  background-image: url(@/assets/img/u8.png);
  background-size: 100% 100%;
}
.top-item .div_p {
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.div_p .div-p-tip {
  position: absolute;
  font-size: 1.5rem;
  top: 10%;
  left: 20%;
}
.div_p h5 {
  font-size: 1.5rem;
}
h2 {
  color: #fff;
}
.on {
  color: #20AEC5;
  font-size: 3.5rem;
}
.off {
  color: #797979;
  font-size: 3.5rem;
}
.boxbottom {
  width: 100%;
  height: 75%;
  /* overflow: hidden; */
}

 .swiper, swiper-container{
  width: 100%;
  height: 100%;
  display: inline-block !important;
}

</style>
