<!-- 列表组件 -->
<script lang="ts" setup name="TableList">
import { getBoardApprove, getBoardMessage } from '@/api/eqpt/dashboard/index'
const $props = defineProps({
  height: {
    type: Number,
    required: true,
  },
  limit: {
    type: Number,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
})
const notice = ref<any[]>([])
const fetchData = () => {
  if ($props.name === '审批提醒') {
    getBoardApprove({
      messageModule: $props.name,
      offset: 1,
      limit: 5,
      readStatus: '0',
    }).then((res) => {
      notice.value = res.data.rows
    })
  }
  else {
    getBoardMessage({
      messageModule: $props.name,
      offset: 1,
      limit: 5,
    }).then((res) => {
      notice.value = res.data.rows
    })
  }
}
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div v-if="notice.length" class="container-table">
    <div v-for="item in notice" :key="item.content" class="item" :style="`height:${$props.height / $props.limit}px;display:flex;`">
      <span :class="`${item.readStatus === '1' ? 'green' : 'red'}`" />
      <div class="content">
        <span v-if="item.sourceModule"> {{ item.sourceModule }}| </span>{{ item.messageTopic }}
      </div>
      <div class="time">
        {{ item.messageTime }}
      </div>
    </div>
  </div>
  <el-empty v-else style="margin: 0 auto;" description="暂无数据" :image-size="50" />
</template>

<style lang="scss" scoped>
.container-table {
  width: 100%;
  // padding: 0 10px;
  padding-left: 10px;
  font-size: 14px;

  .item {
    // flex-direction: column;
    // align-items: center;
    align-items: center;

    .content {
      margin-left: 10px;
      width: 75%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .time {
      width: 40%;
      text-align: right;
    }
  }
}

.green {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: green;
}

.red {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(228 85 29);
}
</style>