<template>
  <div id="main">
    <tunnel-title v-if="showTunnelTitle"/>
    <div class="box-top">
      <div class="back-tunnel" @click="router.push('/simulate/tunnel/list')">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
      <div class="top-length">
        <span>隧道总长度: {{ tunnelLength }}米</span>
        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate">开始模拟</span>
        <div v-else>
          <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
          <span class="all-btn" @click="endSimulate">结束模拟</span>
        </div>
        <!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
      </div>
      <div class="top-right" v-if="isPreview">
        <!--        <div class="current-site">-->
        <!--          <el-icon-->
        <!--              size="50"-->
        <!--              color="#0BE9FA"-->
        <!--              style="margin-left: 50px; cursor: pointer"-->
        <!--              @click="-->
        <!--              isVisited = true;-->
        <!--              getAlarmList();-->
        <!--            "-->
        <!--          >-->
        <!--            <Bell/>-->
        <!--          </el-icon>-->
        <!--        </div>-->
        <div class="current-user">
          你好！<span>{{ currentUser }}</span>
          <span>今天是：{{ currentDate }}</span>
          <div class="logout" @click="handleLogout"></div>
        </div>
      </div>
    </div>
    <device-manage
        v-if="showDevice"
        @cancel="cancelDeviceManage"
        @submit="submitDevice"
    />
    <!--    模拟隧道模式-->
    <preview-scene-simulate
        ref="previewRef"
        id="tunnel-box"
        :isedit="false"
        :device-data="largeScreenData"
        :tunnelLength="tunnelLength"
        :tunnelId="tunnelId"
        :tunnelAlias="tunnelAlias"
        :devRealtimeData="socketData"
    ></preview-scene-simulate>
    <div class="left" v-if="isPreview">
      <el-drawer
          v-model="drawerLeft"
          direction="ltr"
          modal-class="modal-box"
          :modal="false"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <fan-info
            v-if="showFan"
            :list="socketData.leftData"
            :isSimulate="true"
            :fan-data="largeScreenData"
            :transducer-data="largeScreenData"
            :loading="showFanLoading"
            :tunnel-id="tunnelId"
        />
        <!--        <used-ele-->
        <!--            v-if="showFan"-->
        <!--            :list="socketData.leftData"-->
        <!--            :loading="showUsedLoading"-->
        <!--            :ele-data="largeScreenData"-->
        <!--        />-->
      </el-drawer>
      <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
      <div v-else class="shrink-left" @click="closeLeft"></div>
    </div>
    <div class="right" v-if="isPreview">
      <el-drawer
          v-model="drawerRight"
          direction="rtl"
          modal-class="modal-box"
          :modal="false"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <wind-pressure-list
            v-if="showFan"
            :list="socketData.windPressure"
            :isSimulate="true"
            :win-data="largeScreenData"
            :loading="showWindLoading"
        />
        <air-info
            v-if="showFan"
            :list="socketData.sensor"
            :windSpeed="socketData.windSpeed"
            :isSimulate="true"
            :air-data="largeScreenData"
        />
        <bad-gas-info
            v-if="showFan"
            :list="socketData.sensor"
            :bad-gas-data="largeScreenData"
            :isSimulate="true"
            :tunnelId="tunnelId"
            :loading="showBadLoading"
        />
      </el-drawer>
      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
      <div v-else class="shrink-right" @click="closeRight"></div>
    </div>
  </div>
</template>

<script setup>
import PreviewSceneSimulate from "@/components/content/tunnelScene/TunnelSceneSimulate.vue";
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {
  getAlarmInfo,
  deleteAlarmSate,
  getAlarmDetail,
  updateAlarmState,
  endSimulation,
  blastingSimulation, simulationState,
} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {
  getScreenSimulateTunnel,
  getSimulateTunnelDetail,
} from "@/api/tunnelManage";

let largeScreen = computed(() => largeScreenData);
const authStore = useAuthStore();
const router = useRouter();
const previewId = reactive(router.currentRoute.value.params.tunnelId);
const siteId = reactive(router.currentRoute.value.params.siteId);
const previewRef = ref();
const showFan = ref(false);
const showDevice = ref(false);
const drawerLeft = ref(true);
const showTunnelTitle = ref(true);
const isPreview = ref(true);
const loading = ref(false);
const showFanLoading = ref(0);
const showWindLoading = ref(0);
const showBadLoading = ref(0);
const isStartSimulate = ref(true);
const drawerRight = ref(true);
const currentSiteId = ref(0);
const currentUser = ref("");
const currentUserId = ref(0);
const currentDate = ref(dateFormat());
const tunnelId = ref(0);
const tunnelLength = ref(0);
const tunnelAlias = ref('');
const constructionLength = ref(0);
let socket = reactive("");
const serialNumber = ref("");
const roleKey = ref("");
let token = getToken();
let send = {
  type: "ping",
};
const form = ref();
const largeScreenData = ref(null);
const socketData = reactive({
  leftData: [],
  windPressure: [],
  sensor: [],
  windSpeed: [],
});
let tunnelLen = computed(() => tunnelLength);
onMounted(() => {
  getUser();
  getScreenInfo(previewId);

  getBasicData(previewId);
  nextTick(() => {
    showFan.value = true;
  });
});
const startSimulate = () => {
  isStartSimulate.value = false;
  showDevice.value = true;
};
const cancelDeviceManage = () => {
  isStartSimulate.value = true;
  showDevice.value = false;
};
const submitDevice = () => {
  isStartSimulate.value = false;
  showDevice.value = false;
  getScreenInfo(previewId, true);

};
const simulatedBlasting = () => {
  ElMessageBox.confirm(`是否确定模拟爆破`, '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'delBox'
  }).then(() => {
    blastingSimulation(previewId, 10);
  })
};
const endSimulate = async () => {
  isStartSimulate.value = true;
  await endSimulation(previewId);
  ElMessage.success("结束模拟成功");
};
const getUser = () => {
  getUserInfo().then((res) => {
    currentUser.value = res.data.user.userName;
    currentUserId.value = res.data.user.userId;
    roleKey.value = res.data.roles[0];
    localStorage.setItem("roleKey", res.data.roles[0]);
    localStorage.setItem("userId", currentUserId.value);
  });
};
const getSimulationState = () => {
  simulationState(previewId).then((res) => {
    if (res.code === 1000) {
      if (res.data) {
        if (res.data.state) {
          isStartSimulate.value = false
        }
      } else {
        isStartSimulate.value = true
      }
    }
  });
};
getSimulationState()
const getBasicData = (id) => {
  getSimulateTunnelDetail(id).then((res) => {
    if (res?.code === 1000) {
      tunnelLength.value = res.data.totalLength;
      tunnelAlias.value = res.data.tunnelAlias;
      serialNumber.value = res.data.serialNumber;
      constructionLength.value = res.data.constructionLength;
      initWebSocket()
    } else {
      ElMessage.warning(res.msg);
    }
  });
};

const getScreenInfo = (id, flag) => {
  if (id) {
    tunnelId.value = id;
    // equipmentOption.value = []
    getScreenSimulateTunnel(id).then((res) => {
      if (res?.code === 1000) {
        if (res.data.frequencyChangerList.length !== 0) {
          showFanLoading.value = 1;
        } else {
          showFanLoading.value = 1;
        }
        if (res.data.windPressureSensorList.length !== 0) {
          showWindLoading.value = 1;
        } else {
          showWindLoading.value = 1;
        }
        if (res.data.sensorList.length !== 0) {
          res.data.sensorList.forEach((item) => {
            if (
                item.equipmentType === "dust" ||
                item.equipmentType === "carbonDioxide" ||
                item.equipmentType === "carbonMonoxide" ||
                item.equipmentType === "hydrogenSulfide" ||
                item.equipmentType === "sulfurDioxide" ||
                item.equipmentType === "sulfurMonoxide" ||
                item.equipmentType === "nitrogenDioxide"
            ) {
              showBadLoading.value = 0;
            } else {
              showBadLoading.value = 1;
            }
          });
        } else {
          showBadLoading.value = 1;
        }
        largeScreenData.value = res.data;

        getSimulationState()
        if (flag) {
          nextTick(() => {
            previewRef.value.TunnelSceneSimulateRender(res.data)
          })
        }
        // console.log("largeScreenData.value", largeScreenData.value);
      } else {
        ElMessage.warning(res.msg);
      }
    });

  }
};

const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
  drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
  ElMessageBox.confirm(`确认退出登录吗`, "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    authStore.userLogout();
    router.push("/login");
  });
};

const initWebSocket = () => {
  // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
  // let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`;
  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
  // let wsUrl = import.meta.env.VITE_BASE_WSURL + `/${token}/${serialNumber.value}`;
  // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
  // let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
  socket = new WebSocket(wsUrl);
  //连接发生错误的回调方法
  socket.onerror = function () {
    console.log("ws连接发生错误");
  };
  //连接成功建立的回调方法
  socket.onopen = function () {
    // console.log("ws连接成功");
  };
  //接收到消息的回调方法
  socket.onmessage = function (event) {
    // console.log("服务器返回的信息: ", JSON.parse(event.data));
    const type = JSON.parse(event.data).type;
    const data = JSON.parse(event.data).data;
    if (type === "simulate") {
      data.forEach((item) => {
        if (item.typeKey === "frequency") {
          socketData.leftData = data;
        } else if (item.typeKey === "windPressure") {
          socketData.windPressure = data;
        } else if (item.typeKey === "sensor") {
          socketData.sensor = data;
        } else if (item.typeKey === "windSpeed") {
          socketData.windSpeed = data;
        }
        nextTick(() => {
          previewRef.value?.changePointValue(item)
        })
      });
    }
  };
  //连接关闭的回调方法
  socket.onclose = function () {
    console.log("ws连接关闭");
    // initWebSocket()
  };
  setInterval(() => {
    socket.send(JSON.stringify(send));
  }, 30000);
};
</script>

<style lang="scss">
.el-drawer__header {
  display: none;
}

.el-drawer__body {
  padding: 160px 68px 0 68px;
  overflow: hidden;
}

.el-dropdown__popper.el-popper {
  background: transparent;
  //border: none;
  border: 1px solid #0e7daa;
  border-radius: 10px;
}

.dropdown-style {
  padding: 20px;
  margin-left: 50px;
  width: 150px;
  background: rgba(7, 35, 72, 0.9);

  .el-scrollbar__wrap {
    .el-dropdown__list {
      .el-dropdown-menu {
        background-color: rgba(7, 35, 72, 0.9);
        border-radius: 10px;
        padding: 5px;

        .el-dropdown-menu__item {
          color: #ffffff;
          //border:none;
          padding: 5px;

          border-bottom: 1px solid #05feff;

          &:last-child {
            border-bottom: none;
          }
        }

        .el-dropdown-menu__item.hover,
        .el-dropdown-menu__item:hover {
          background-color: transparent !important;
          color: #f7b500;
        }
      }
    }
  }

  .is-light {
    background: rgba(7, 35, 72, 0.9);
  }
}
</style>

<style lang="scss" scoped>

.box-top {
  //display: flex;
  //justify-content: space-between;
  position: relative;

  .all-btn {
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 11px;
    border: 2px solid #08b7b8;
    color: #0be9fa;
    text-align: center;
    margin-left: 40px;
    font-size: 38px;

    &:hover {
      color: #f7b500;
    }
  }

  .back-tunnel {
    position: absolute;
    top: 46px;
    cursor: pointer;
    margin: 0 0 0 70px;
    display: flex;
    align-items: center;
    width: 178px;
    height: 70px;
    line-height: 70px;
    border-radius: 11px;
    border: 2px solid #08B7B8;
    font-size: 38px;
    color: #FFFFFF;
    z-index: 9999;

    .back-icon {
      margin-right: 20px;
      margin-left: 23px;
      width: 33px;
      height: 33px;
      background-image: url('@/assets/images/site/zdgl_icon_fh.png');
    }
  }

}


#main {
  height: 100%;
  width: 100%;
  background-color: #072348;

  #tunnel-box {
    height: 100%;
  }
}

.alarm-dialog {
  :deep(.el-dialog) {
    height: auto !important;
    margin: 820px auto 0 auto;
  }
}

:deep(.el-table__body-wrapper) {
  height: 90px;
}

:deep(.el-table--fit) {
  width: auto;
  //height: 600px;
  background-color: transparent !important;

  .el-loading-mask {
    background: rgba(6, 34, 71, 0.78);

    .el-loading-spinner {
      .circular {
        width: 150px;
        height: 150px;
      }
    }
  }
}

:deep(.el-table__empty-block) {
  height: 200px !important;

  //display: none;
  .el-table__empty-text {
    font-size: 60px;
    color: #08b7b8;
  }
}

.query-form {
  :deep(.el-form-item__label) {
    font-size: 45px;
    height: 70px;
    line-height: 70px;
    color: #ffffff;
  }

  :deep(.el-select__wrapper.is-hovering) {
    .el-select__suffix {
      .el-icon {
        font-size: 55px;
      }
    }
  }

  :deep(.el-select-dropdown__item.is-hovering) {
    background-color: #064b66 !important;
  }

  :deep(.el-select__wrapper) {
    height: 70px;
    line-height: 70px;
    background-color: transparent;
    border: 1px solid #08b7b8;
    font-size: 35px;
    width: 356px;

    .el-select__suffix {
      .el-icon {
        font-size: 55px;
      }
    }

    .el-select__placeholder {
      color: #ffffff;
      height: 70px;
      line-height: 70px;
    }

    .el-select__placeholder.is-transparent {
      height: 70px;
      line-height: 70px;
    }
  }

  :deep(.el-form-item__content) {
    .el-select__popper {
      margin-top: -12px !important;
      background: #072247 !important;
      border: 1px solid #0f82af !important;

      .el-select-dropdown__item {
        font-size: 38px !important;
        height: 70px !important;
        line-height: 70px !important;

        > span {
          color: #ffffff;
        }
      }

      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        background-color: #064b66 !important;
      }
    }

    .el-button {
      height: 70px;
      font-size: 40px;
      border-radius: 10px;
    }

    .el-button--primary {
      background: #064b66;
    }

    .el-input {
      width: 380px;
      height: 70px;

      .el-input__wrapper {
        font-size: 40px;
        background-color: transparent;
        border: 1px solid #08b7b8;
        box-shadow: none;

        .el-input__inner {
          height: 70px;
          color: #ffffff;
        }

        .el-input__suffix-inner {
          .el-icon {
            font-size: 55px;
          }
        }
      }
    }
  }
}

.device-table {
  margin-top: 7px;

  :deep(.el-button) {
    font-size: 40px;
  }

  .active {
    color: #ffffff;
    background: #0f7da9;
  }

  .wind-switch {
    margin-left: 65px;
  }

  .switch {
    margin-top: 22px;
    display: flex;
    width: 200px;
    height: 50px;
    border-radius: 6px;
    border: 1px solid #05feff;
    overflow: hidden;
    color: #51a2b3;
    line-height: 40px;
    font-size: 36px;

    & > div {
      flex: 1;
      text-align: center;
      cursor: pointer;
    }
  }

  :deep(.el-table--fit) {
    //width: 1780px !important;
    width: auto;
  }

  :deep(.cell) {
    height: 80px;
    line-height: 80px;
    color: #fff;
    font-size: 38px;
  }

  :deep(.el-table tr) {
    background-color: #1c5971;
  }

  :deep(
      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
    ) {
    background-color: #1c5971;
  }

  :deep(.el-table__row--striped) {
    background-color: #13849c !important;
  }

  :deep(
      .el-table--striped
        .el-table__body
        tr.el-table__row--striped
        td.el-table__cell
    ) {
    background-color: #13849c !important;
  }

  :deep(.el-table__cell) {
    .el-input {
      width: 180px;
      height: 53px;
    }

    .el-input__wrapper {
      border-radius: 6px;
      border: 1px solid #05feff;
      background-color: transparent;

      .el-input__inner {
        color: #ffffff;
        font-size: 40px;
        height: auto;
        line-height: normal;
      }
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    display: none;
  }
}

.pagination {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 0;
  color: #60ddde;
  font-size: 38px;
  font-weight: bold;

  :deep(.el-pagination.is-background) {
    .btn-next,
    .btn-prev {
      background-color: transparent;
    }

    .el-pager {
      li {
        margin: 0 0 0 40px;
      }

      li.is-active {
        background-color: #60ddde;
      }
    }
  }

  > span:first-child {
    margin-right: 60px;
  }

  > span:last-child {
    margin-left: 71px;
  }

  :deep(.btn-prev) {
    background-color: transparent;
    font-size: 38px;
    font-weight: bold;
    color: #60ddde;
    margin-right: 20px;
  }

  :deep(.btn-next) {
    background-color: transparent;
    font-size: 38px;
    font-weight: bold;
    color: #60ddde;
    margin-left: 30px;
  }

  :deep(.el-pager li.is-active) {
    width: 70px;
    height: 70px;
    background: #60ddde;
    border-radius: 50%;
    color: #071f40;
    font-size: 38px;
    font-weight: bold;
  }

  :deep(.el-pager li) {
    margin-left: 40px !important;
  }

  :deep(.el-pager li:not(.is-active)) {
    width: 70px;
    height: 70px;
    border: 1px solid #60ddde;
    border-radius: 50%;
    background-color: transparent;
    font-size: 38px;
    font-weight: bold;
    color: #60ddde;
  }
}
</style>
