<template>
  <div class="commons-notice">
    <el-dialog title="系统公告" v-model="value" width="460px" :align-center="true" :before-close="handleClose">
      <div class="title"></div>
      <div class="text-content" v-if="data.length > 0" style="margin-top: 10px">
        {{ data[index].content }}
      </div>
      <template #footer>
        <span class="dialog-footer"> </span>
      </template>
    </el-dialog>
    <div class="notice-table-warp" :class="modelValue ? 'notice-table-warp-open' : ''" @click.stop="closeNoticeTableModal">
      <div class="notice-table" @click.stop>
        <div class="tabs">
          <ul>
            <li style="padding-left: 0; border: none" @click="tableTagType = 1" :class="tableTagType == 1 ? 'active' : ''">全部（0）</li>
            <li @click="tableTagType = 2" :class="tableTagType == 2 ? 'active' : ''">待办（0）</li>
            <li @click="tableTagType = 3" :class="tableTagType == 3 ? 'active' : ''">通知（0）</li>
          </ul>
          <div class="more">查看更多&gt;</div>
        </div>
        <el-table :data="noticeData" style="width: 100%">
          <el-table-column prop="date" label="标题内容" width="250"> </el-table-column>
          <el-table-column prop="name" label="类型" width="120"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <span style="cursor: pointer">未读</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="notice-btn-box" style="margin-top: 20px">
          <el-button plain disabled>点击清空</el-button>
          <el-button type="primary" disabled>全部已读</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getToken } from "@/utils/auth";
defineProps({
  modelValue: {
    type: Object,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue"]);
const closeNoticeTableModal = () => {
  emit("update:modelValue", false);
};
const tableTagType = ref(1);
let noticeData = ref([]);
let index = ref(0);
let data = ref([]);
let value = ref(false);
const socketInit = () => {
  window.ws = new WebSocket(
    "ws://" + import.meta.env.VITE_APP_IP + ":20001" + import.meta.env.VITE_APP_WS_API + "/webStock/" + getToken()
    // 'ws://192.168.1.97:8300/webStock/' + window.localStorage.getItem('token')
  );
  //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
  window.ws.onopen = function () {
    //当WebSocket创建成功时，触发onopen事件
    console.log("open");
  };
  window.ws.onmessage = function (e) {
    //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
    //在data.value前面插入
    console.log(JSON.parse(e.data).data);
    data.value.unshift({ title: "最新公告", content: JSON.parse(e.data).data });
    index.value = 0;
    value.value = true;
  };
  window.ws.onclose = function (e) {
    //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    console.log("close");
  };
  window.ws.onerror = function (e) {
    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    console.log(error);
  };
};
socketInit();
const handleClose = () => {
  value.value = false;
};
</script>
<style lang="scss">
.notice-table-warp {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  display: none;
}

.notice-table-warp-open {
  opacity: 1;
  display: block;
}
.notice-table {
  position: fixed;
  right: 2px;
  top: 52px;
  padding: 0 20px 20px;
  width: 500px;
  background: #fff;
  box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 20;
  .notice-btn-box {
    text-align: right;
  }
  .tabs {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    font-weight: 400;
    ul {
      display: flex;
      margin: 23px 0;
      padding: 0;
      li {
        list-style: none;
        padding: 0 20px;
        cursor: pointer;
        height: 14px;
        line-height: 14px;
        border-left: 1px solid #dcdcdc;
      }
      .active {
        color: #0084ff;
      }
    }
    .more {
      color: #0084ff;
      cursor: pointer;
    }
  }
}
</style>
<style>
.commons-notice .el-table__row {
  height: 50px;
}
.commons-notice .el-dialog__footer {
  text-align: left !important;
  margin-top: 24px;
}
.commons-notice .more {
  color: #0084ff;
  float: right;
  cursor: pointer;
}
.commons-notice .el-dialog__header {
  background: #eeeeee;
}
.commons-notice .el-dialog__title {
  position: relative;
  padding-left: 30px;
  color: #333333;
  font-weight: bold;
}
.commons-notice .el-dialog__title::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAftJREFUOE+tlT9MU1EUxr9zWwgBI/D6Boh/EnbCRiImMhBCGqNhcnDQrbgRAyxGBgYICzXYDbrB4OBENIaY4GAMrmqc3DQxMrxWNGkH0Hv83m0ptvS1EHqTm/fuO+f+zjn3nHueoGYoIFju7kGXGeTrJOd1qlwqq30HdJdzCwX7GY9+7QsX/yO4Ph66gHb0+EkiUzAyRklnrcHyugirb4jKYj/YlgUcHOlVgJrxLkLMHJVSEOmLAFV/Vt2j8SzUrsh0/ncodEDnmec9BswsYV1Vu1RD6+842zmvUR6vkRcAm0Y+vxR6Ku7MVv3bMFir65nVT/gZDNNgBw1+oM7ACe9DTy0e4GHwQnS5uxedbRs8s1t1w1S7I9O5cRfJU/8j9Ybq6ll9ieLhfdFM7w1IfDsyAacFAkXonySB3gokNhuZhNMDGcLfNIGJXWZ3pDVA+z4EfiXwaouA384GzDApEpEUlzXrgI1Dhn7B4cEITOwCYob1aK40iCYMuVlS1BLAY0GMz8ssWxMNdElpVjaaJ+RZCaJ3GbIXASyXTdPC1udAcK8E8TcJvNO4sJtePfsa/bmbDvIj8QrGTDS8ei6QsDkk/Hl2mpm6zUH0bSliGaU8bBLHQ7XA832CXLDomsORxLUvgDfGTJ2pfcGuc1+6qn1VoK1ssBXoOX8B/wDYqv5bje949AAAAABJRU5ErkJggg==);
}
</style>
