<template>
  <div class="message-list">
    <div class="message-item" v-for="item in tableData" :key="item.id">
      <div class="m-head">
        <div class="m-title">
          <t-link hover="color" @click="open(item)">
          <span>{{ messageTypeFilter(item.messageType) }}</span>
          <t-tag
            theme="danger"
            variant="light"
            size="small"
            v-if="!item.readStatus"
            >未读</t-tag
          >
          </t-link>
        </div>
        <div class="m-time">{{ timestampFilter(item.sendTime, 'mm') }}</div>
      </div>
      <div class="m-body">
        <div class="m-content">{{ item.content }}</div>
        <t-space class="m-info" :size="5">
          <p>发起人：{{ item.formUser }}</p>
          <p>服务单元：{{ item.service }} </p>
          <p>客户类型：{{ item.customType }}</p>
          <p>客户名称：{{ item.custom }}</p>
          <template #separator>
            <t-divider layout="vertical" />
          </template>
        </t-space>
      </div>
    </div>

    <t-pagination
      v-if="pagination.total > 0"
      class="page-pagination"
      v-model="pagination.pageNumber"
      v-model:pageSize="pagination.pageSize"
      :total="pagination.total"
      showJumper
      :showPageSize="false"
      @change="onChange"
    />

    <div class="none-box" v-if="!tableData.length">
      <img src="../../../../assets/none_message.png" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script setup name="MessageList">
import { messageTypeFilter, timestampFilter } from '@/utils/filter';

const { tableData, pagination, onChange } = defineProps([
  'tableData',
  'pagination',
  'onChange',
]);
const emit = defineEmits(['open']);
const open = (row) => {
  emit('open', row);
};
</script>
