<!-- 列表组件 -->
<script lang="ts" setup name="TableList">
const $props = defineProps({
  list: {
    type: Array,
    default: () => ([]),
  },
  height: {
    type: Number,
    required: true,
  },
  limit: {
    type: Number,
    required: true,
  },
})
const notice = ref([
  {
    status: 1,
    content: '计量站设备溯源公告',
    time: '2023-09-01',
    type: '溯源公示',
  },
  {
    status: 1,
    content: '计量站设备溯源公告',
    time: '2023-09-01',
    type: '溯源公示',
  },
  {
    status: 0,
    content: '单位通知单位通知',
    time: '2023-09-03',
    type: '单位通知',
  }, {
    status: 0,
    content: '单位通知单位通知',
    time: '2023-09-03',
    type: '单位通知',
  },
  {
    status: 0,
    content: '单位通知单位通知',
    time: '2023-09-03',
    type: '单位通知',
  },
])
</script>

<template>
  <div 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.status === 1 ? 'green' : 'red'}`" />
      <div class="content">
        <span v-if="item.type"> {{ item.type }}| </span>{{ item.content }}
      </div>
      <div class="time">
        {{ item.time }}
      </div>
    </div>
  </div>
</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%;
    }

    .time {
      width: 20%;
      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>