<!--
 * @Author: chris
 * @Date: 2026-01-16 14:59:10
 * @LastEditors: chris
 * @LastEditTime: 2026-01-20 15:49:10
-->
<script setup>
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  })

  const emits = defineEmits(['handleRead'])

  function handleRead(row) {
    emits('handleRead', row)
  }
</script>

<template>
  <el-table
    v-loading="props.loading"
    :data="props.tableData"
    border
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" v-if="columns[0].visible" />
    <el-table-column label="状态" align="center" prop="status" v-if="columns[1].visible">
      <template #default="scope">
        <el-tag :type="scope.row.status == 0 ? 'danger' : 'success'">{{ scope.row.status == 0 ? '未读' : '已读' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[2].visible">
      <template #default="scope">
        <span>{{ parseTime(scope.row.createTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="200">
      <template #default="scope">
        <el-button type="text" icon="el-icon-check" size="small" :disabled="scope.row.status == 1" @click="handleRead(scope.row)">标记已读</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
</style>
