<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\child\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-21 14:13:42
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="container">
    <swiper-container
      :slides-per-view="1"
      :initialSlide="page"
      effect="coverflow"
      :space-between="spaceBetween"
      :centered-slides="true"
      :pagination="{
        hideOnClick: true,
      }"
      @progress="onProgress"
      @slidechange="onSlideChange"
    >
      <swiper-slide v-for="res in store.mechanicsData" :key="res.index">
        <index :title="res.titleChild" :type="res.type"></index>
      </swiper-slide>
    </swiper-container>
  </div>
</template>

<script setup lang="ts" >
import { onBeforeMount, onMounted, onUnmounted, ref } from "vue";
// import { Swiper, SwiperSlide } from 'swiper/vue';
import { register } from "swiper/element/bundle";
import index from "./main/index.vue";
import { useRoute } from "vue-router";
import { gatDeviceStatusOfMF } from "@/http/Mechanics";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useMechanicsStore } from "@/store/module/Mechanics";
const route=useRoute()
const store = useMechanicsStore();
register();
let page = ref();
const spaceBetween = 10;
const onProgress = (e) => {
  // const [swiper, progress] = e.detail;
  // console.log(progress)
};

const onSlideChange = (e) => {
  // console.log(e.detail[0].activeIndex

  store.changePage(e.detail[0].activeIndex + 1);
};
async function gatDeviceStatusOfMFfun() {
  let result: any = await gatDeviceStatusOfMF();
  store.changeloading(true);
  if (result.code == 200) {
    store.changeMechanicsDatadata(result.data);
  }
}

function getWebsocket(val) {
  try {
    let data = JSON.parse(val);
    // if (data.type == "DeviceStatusCountsOfOutPlant") {
    //   console.log(data.msg);

    //   store.socketMechanicsDatadata(data.msg);
    // }
    //实时推送的数据
    if (data.type == "DeviceStatusInMF") {
      store.socketDeviceStatusInMF(data.msg);
    }
  } catch (err) {}
}
function errWebsocket(val) {
  // console.log(val);
}
onBeforeMount(() => {
  // page.value = store.page?store.page - 1:+route.params.id-1;
  store.changePage(+route.params.id)
  page.value=+route.params.id-1;
});
onMounted(() => {
  gatDeviceStatusOfMFfun();
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
onUnmounted(() => {
  closeWebsocket();
});
</script>

<style scoped>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
.swiper-container {
  height: 1080px;
  width: 1920px;
}

</style>

<style>
body {
  
  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none; /* IE + Edge */
  scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
  display: none;
}
</style>
