<template>
  <div class="body">
    <div :class="showStatus ? 'content noneContent' : 'content haveContnet'">
      <div class="headerTittle titleText">通知确认</div>
      <el-scrollbar class="itemScrollbar">
        <TransitionGroup name="list">
          <div v-for="(item, index) in messages" :key="index" class="item">
            <div class="itemContent">
              <div>{{ item.created }}</div>
              <div>{{ item.title }}</div>
              <div>{{ item.content }}</div>
            </div>
            <div class="btns">
              <el-button class="btn" type="primary" @click="submit(item, index)"
                >收到
              </el-button>
            </div>
          </div>
        </TransitionGroup>
        <div class="describeText">
          {{ messages.length < 1 ? "暂无数据" : "已到最底端~~~" }}
        </div>
      </el-scrollbar>
    </div>
    <div class="iconBox">
      <el-tooltip
        :disabled="!showStatus"
        content="点击打开通知"
        effect="dark"
        placement="right"
        trigger="hover"
      >
        <el-icon :size="40" class="icon" @click="changePop">
          <Expand v-if="showStatus" />
          <Fold v-else />
        </el-icon>
      </el-tooltip>
    </div>
    <!-- 静电环状态样式 -->

    <div class="lightsBox">
      <div>
        <div class="titleText">电烙铁状态：</div>
      </div>
      <div :class="{ activeLight0: lightIndex == 0 }" class="light"></div>
      <div :class="{ activeLight1: lightIndex == 1 }" class="light"></div>
      <div :class="{ activeLight2: lightIndex == 2 }" class="light"></div>
    </div>
  </div>
  <div class="staticBox">
    <div :class="braceletState == 0 ? 'static type0' : 'static type1'">
      <div class="titleText">静电手环状态：</div>
      <div class="titleText state">
        {{ braceletState == 0 ? "离线" : "在线" }}
      </div>
    </div>
    <!-- <el-button
        v-if="braceletState == 0"
        type="primary"
        class="staticBtn"
        @click="submit(item, index)"
        >重新检测</el-button
      > -->
  </div>
</template>

<script setup>
import { useDictionaryStore } from "@/store";
import { readMessage } from "@/api/user";
import { emitter, EventsNames } from "@/utils/common.ts";

const dictS = useDictionaryStore();
const porps = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
//true关闭 false打开
const showStatus = ref(true);
const lightIndex = ref(null);
const setExcelVal = (row, col, value) => {
  if (window.luckysheet) {
    window.luckysheet.setCellValue(row, col, value);
  }
};
const messages = ref([]);
const braceletState = ref(0);
//首次通知是否弹框
const firstNotice = ref(false);
const page = ref(1);
const emits = defineEmits(["update:modelValue"]);
const submit = async (item, index) => {
  const { data, code } = await readMessage([item.id]);
  if (code == "200") {
    messages.value.splice(index, 1);
    ElMessage.success("操作成功！");
  }
};
//连接地址
const ws = ref(null);
const addWebSocket = () => {
  ws.value = new WebSocket(
    `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
  );
  ws.value.onopen = () => {};
  ws.value.onmessage = (event) => {
    const receivedMessage = event.data;
    const type = JSON.parse(receivedMessage).msgType;
    switch (type) {
      //处理左侧弹框消息
      case "1":
        if (firstNotice.value == false) {
          messages.value = JSON.parse(receivedMessage).content;
          if (messages.value.length > 0) {
            showStatus.value = false;
          } else {
            showStatus.value = true;
          }
        }
        break;
      //回填表格数据
      case "2":
        emitter.emit(
          EventsNames.TEST_DATA,
          JSON.parse(JSON.parse(receivedMessage).content)
        );
        break;
      case "3":
        braceletState.value = JSON.parse(receivedMessage).content;
        break;

      case "4":
        lightIndex.value = JSON.parse(receivedMessage).content;
        break;
    }
  };
  ws.value.onclose = () => {
    if (ws.value.readyState == 3) {
      addWebSocket();
    }
  };
};

const changePop = () => {
  showStatus.value = !showStatus.value;
  firstNotice.value = true;
};
onMounted(() => {
  addWebSocket();
});
onUnmounted(() => {
  ws.value.onclose();
});
</script>
<style lang="scss" scoped>
.body {
  position: fixed;
  height: 100vh;
  left: 0;
  display: flex;
  justify-content: space-between;
  z-index: 11;
  top: 0;
  transition: 0.5s;

  .content {
    height: 100%;
    background-color: white;
    overflow: hidden;
    border-radius: 0 16px 16px 0;
    border-right: 1px solid #f1f3f5;

    .headerTittle {
      height: 40px;
      text-align: center;
      border-bottom: 1px solid #f1f3f5;
    }

    .itemScrollbar {
      height: calc(100vh - 40px);
      padding: 20px;

      .confirm {
        border: 2px solid #00800070 !important;
      }

      .item {
        border-radius: 16px;
        width: 100%;
        min-height: 80px;
        display: flex;
        justify-content: space-between;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #f1f3f5;

        .itemContent {
          height: 100%;
          width: calc(100% - 60px - 20px);
          border-radius: 16px;
          padding: 20px;
          background-color: white;
          font-size: $f20;
        }
        .itemContent div {
          word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
        }

        .btns {
          width: 60px;
          @include flex;
          margin-left: 20px;

          .btn {
            height: 100%;
            border-radius: 16px;
            font-size: $f20;
          }
        }
      }
    }
  }

  .noneContent {
    width: 0vw;
    transition: 0.5s;
    transform: translateX(-30vw);
  }

  .haveContnet {
    width: 30vw;
    transition: 0.5s;
  }

  .iconBox {
    width: 20px;
    height: 100%;
    @include flex;

    .icon {
      cursor: pointer;
    }
  }
}

.staticBox {
  position: fixed;
  top: 10px;
  left: 100px;
  display: flex;
  align-items: center;

  .static {
    height: 60px;
    background-color: white;
    border-radius: 16px;
    padding: 0 10px;
    display: flex;
    align-items: center;
  }

  .staticBtn {
    font-size: 20px;
    margin-left: 10px;
  }
}

.activeLight0 {
  box-shadow:
    0 0 15px yellow,
    0 0 25px yellow,
    0 0 35px rgb(169, 169, 89);
  background-color: yellow !important;
}

.activeLight1 {
  box-shadow:
    0 0 15px #00ff00,
    0 0 25px #98e998,
    0 0 35px #8ae88a;
  background-color: greenyellow !important;
}

.activeLight2 {
  box-shadow:
    0 0 15px #f44f54,
    0 0 25px #f44f54,
    0 0 35px #f44f54;
  background-color: red !important;
}

.lightsBox {
  position: fixed;
  top: 10px;
  right: 300px;
  width: 300px;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .light {
    background-color: grey;
    height: 30px;
    width: 30px;
    border-radius: 15px;
  }
}

.type1 {
  .state {
    color: green;
  }
}

.type0 {
  background-color: red !important;

  .titleText {
    color: white !important;
  }
}
</style>
