<template>
    <lay-container style="padding: 20px">
      <lay-card>
        <div style="padding: 10px">
          <span style="font-size: 18px;vertical-align: center;margin-right: 20px">站内信通知</span>
        </div>
        <lay-table size="lg" :columns="columns" :data-source="dataSource">
          <template v-slot:operator="{ data }">
            <lay-space>
              <span style="color: #00A394;cursor: pointer" @click="viewMessage(data)">查看</span>
            </lay-space>
          </template>
        </lay-table>
      </lay-card>
    </lay-container>
  </template>
  <script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { layer } from '@layui/layer-vue'

  // 列表数据
  const dataSource = ref([
    {
      id: 1,
      title: '系统维护通知',
      content: '系统将于今晚22:00-23:00进行例行维护，请提前做好相关工作安排。',
      sender: '系统管理员',
      receiver: 1,
      status: 0,
      createTime: '2024-03-20 10:00:00'
    },
    {
      id: 2,
      title: '会议提醒',
      content: '请于明天下午14:00准时参加月度工作总结会议。',
      sender: '办公室',
      receiver: 1,
      status: 1,
      createTime: '2024-03-19 15:30:00'
    }
  ])

  // 表格列配置
  const columns = [
    {
      title: "标题",
      width: "200px",
      key: "title",
      align: 'center'
    },
    {
      title: "发送人",
      width: "120px",
      key: "sender",
      align: 'center'
    },
    {
      title: "发送时间",
      width: "180px",
      key: "createTime",
      align: 'center'
    },
    {
      title: "状态",
      width: "100px",
      customSlot: 'status',
      key: "status",
      align: 'center'
    },
    {
      title: '操作',
      width: '120px',
      customSlot: 'operator',
      key: 'operator',
      align: 'center',
      fixed: 'right'
    }
  ]
  </script>
  <style scoped>
  .lay-table :deep(.layui-table-cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>
  