<template>
  <div class="item bg-white h-305 flex flex-col rounded-4">
    <div class="head px-24 lh-50 flex justify-between border-b border-b-solid border-b-gray-1">
      <div class="title fs-16 font-700">{{ title }}</div>
    </div>
    <div class="body px-24 py-5 h-full flex-1 overflow-auto">
      <div class="list" v-if="list.length">
        <div class="item h-87 border-bottom flex items-center justify-between" v-for="item in list">
          <div class="w-4/5">
            <div class="text truncate fs-14 c-333">2024-1-1 12:00:00 1.4 22:00以后系统将进入维2024-1-1 12:00:00 1.4 22:00以后系统将进入维护..</div>
            <div class="time fs-14 c-999">2023.03.13 15:23:14</div>
          </div>
          <span class="c-707070"><RightOutlined /></span>
        </div>
      </div>
      <div v-else class="flex items-center justify-center h-full">
        <img class="w-243" src="@/assets/images/no_data_3.png" alt="">
        <span class="c-999 m-l-46">{{ noneText }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import 'swiper/css';
import { defineProps } from 'vue'
import {RightOutlined} from '@ant-design/icons-vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  list: {
    type: Array,
    default: () => [],
  },
  noneText: {
    type: String,
    default: '暂无数据',
  },
})
const {title, list, noneText} = toRefs(props)
</script>

<style scoped lang="less">
.border-bottom{
  border-bottom: 1px solid #F4F4F4;
}
// .item {
//   border-radius: 8px;
//   .head {
//     margin-bottom: 20px;
//   }
//   .body {
//     display: flex;
//     justify-content: space-between;
//     .left {
//       .number {

//       }
//       .text {
//         font-size: 14px;
//         color: #999;
//       }
//     }
//   }
// }
</style>

