<!--
 * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\gateway.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="box" :style="{ width: '100%', height: '100%' }">

    <div class="title-box">
      <h2>
        <DecorationFadeOut>
          &nbsp;{{ props.title }}&nbsp;
        </DecorationFadeOut>        
      </h2>
      <div class="colorTip">
        <div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i>
          {{ t('messages.onLine') }}</div>
        <div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
          {{ t('messages.offline') }}</div>
      </div>
    </div>
    <ul class="gatewaystatus">
      <li v-for="item in props.data" @click="clickBotton(item)">
        <i :class="JSON.parse(item.gateway)
          ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
          : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
          "></i>
        <h2 class="titlesize-name">{{ item.title + '车间' }}</h2>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import border13 from "@/components/border/Border13.vue";
import { useI18n } from 'vue-i18n'
import { useMechanicsStore } from "@/store/module/Mechanics";
import { useRouter } from "vue-router";
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
const router = useRouter()
const store = useMechanicsStore();
let { t } = useI18n();
let props = defineProps<{
  title: string;
  data: any
}>();
const clickBotton = (item: any) => {
  store.changePage(item.index)
  router.push({
    name: 'Mechanicschild',
    params: {
      id: item.index
    }
  })
}
onMounted(() => { });
</script>

<style scoped>
h2 {
  color: #fff;
  font-size: 20px;
  flex: 1;
}

p {
  margin: 0 10px 0 10px;
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.gatewaystatus {
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gatewaystatus>li {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gatewaystatus>li {
  flex-direction: column;
}

.noonline {
  font-size: 5rem;
  color: rgb(228, 57, 97);
  position: relative;
  /* top: -20px; */
}

.online {
  font-size: 5rem;
  color: rgb(32, 174, 197);
  position: relative;
  /* top: -20px; */
}

.colorTip {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
}

.colorTip span {
  margin-right: 1rem;
}

.colorTip>div {
  margin-right: 1rem;
  font-size: 1rem;
}

.colorTip .icon-red {
  display: inline-block;
  /* background-color: #e43961; */
  /* border-radius: 1rem; */
  color: #e43961;
  width: 1rem;
  height: 1rem;
}

.colorTip .icon-blue {
  display: inline-block;
  /* background-color: #20aec5; */
  /* border-radius: 1rem; */
  color: #20aec5;
  width: 1rem;
  height: 1rem;
}

.titlesize-name {
  font-size: 1.5rem;
}

.title-box {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
</style>
