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

<script setup>
import { useDictionaryStore } from "@/store";
import { readMessage } from "@/api/user";
const dictS = useDictionaryStore();
const porps = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const status = ref(true);
const route = useRoute();
//true关闭 false打开
const showStatus = ref(true);
const messages = ref([]);
//首次通知是否弹框
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 = new WebSocket(
  `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
);
ws.onopen = () => {};
ws.onmessage = (event) => {
  const receivedMessage = event.data;
  messages.value = JSON.parse(receivedMessage).content;
  if (firstNotice.value == false) {
    if (messages.value.length > 0) {
      showStatus.value = false;
    } else {
      showStatus.value = true;
    }
  }
};
const changePop = () => {
  showStatus.value = !showStatus.value;
  firstNotice.value = true;
};
ws.onclose = () => {
  console.log("实时连接断开");
};

watch(
  () => route,
  () => {
    if (route.name == "MessageMain") {
      status.value = false;
    }
  },
  {
    immediate: true,
  }
);
</script>
<style scoped lang="scss">
.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%;
          border-radius: 16px;
          padding: 20px;
          background-color: white;
          font-size: $f20;
        }

        .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;
    }
  }
}
</style>
