<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" height="600px" :columns="columns" :page="page" :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-layer v-model="visible" :title="'消息详情'" :type="4" :area="['500px', '100%']">
      <div style="padding: 20px">
        <div class="message-detail">
          <div class="detail-item">
            <span class="label">发送时间：</span>
            <span>{{ currentMessage.createtime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">接收人：</span>
            <span>{{ currentMessage.nickname }}</span>
          </div>
          <div class="detail-item">
            <span class="label">消息内容：</span>
            <div class="content">{{ currentMessage.notification_content }}</div>
          </div>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { layer } from '@layui/layer-vue'
import { getMailDataList,getMailUpdateMail } from '@/api/module/home'
// 修改分页参数定义
const page = reactive({
  current: 1,
  limit: 10,
  total: 1,
});
// 列表数据
const dataSource = ref([])

// 添加弹窗相关的响应式变量
const visible = ref(false)
const currentMessage = ref<any>({})

// 获取列表数据
onMounted(() => {
  getMailData()
})
const getMailData = () => {
  getMailDataList({
    page: page.current,
    limit: page.limit
  }).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource.value = res.data.data
      page.total = res.data.count
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}
// 表格列配置
const columns = [
  {
    title: "内容",
    width: "200px",
    key: "notification_content",
    align: 'center'
  },
  {
    title: "接收人",
    width: "120px",
    key: "nickname",
    align: 'center'
  },
  {
    title: "发送时间",
    width: "180px",
    key: "createtime",
    align: 'center'
  },
  {
    title: "状态",
    width: "100px",
    customSlot: ({ data }) => {
      return data.notify_status == 1 ? '未读' : '已读'
    },
    key: "notify_status",
    align: 'center'
  },
  {
    title: '操作',
    width: '120px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]

// 添加查看消息的方法
const viewMessage = async (data: any) => {
  currentMessage.value = data
  visible.value = true
  
  // 如果消息未读，则调用更新接口将其标记为已读
  await getMailUpdateMail({ id: data.id })
  getMailData()
}
</script>
<style scoped>
:deep(.layui-table-header .layui-table-cell) {
  background-color: #ECF8FA !important;
}

.message-detail {
  .detail-item {
    margin-bottom: 15px;
    
    .label {
      font-weight: bold;
      color: #333;
      margin-right: 10px;
    }
    
    .content {
      margin-top: 10px;
      line-height: 1.5;
      color: #666;
    }
  }
}
</style>