<!-- 通知公告列表 -->
<script lang="ts" setup name="NoticeList">
import dayjs from 'dayjs'
import noticeDetail from '@/views/system/notice/noticeDetail.vue'
import { getNoticeeApi, readNotice } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})
const user = useUserStore() // 用户信息
const list = ref<any[]>([]) // 通知公告列表做法
const loading = ref(false)
const detailDialogRef = ref()
const fetchData = () => {
  loading.value = true
  // 获取通知公告列表
  getNoticeeApi({
    alreadyRead: 0, // 0未读
    noticeEndTime: '',
    noticeNo: '',
    noticePublisher: '',
    noticeStartTime: '',
    noticeTitle: '',
    systemType: 1, // 1业务系统、2受检系统
    limit: 20,
    offset: 1,
  }).then((res) => {
    list.value = res.data.rows.map((item: { noticeTime: string }) => {
      return {
        ...item,
        noticeTime: dayjs(item.noticeTime).format('YYYY-MM-DD HH:mm'),
      }
    })
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

const handleClickTitle = (row: any) => {
  detailDialogRef.value.initDialog(row)
}

const confirm = (id: string, read: string) => {
  if (read === '0') {
    // 通知公告标记已读
    readNotice({
      userId: user.id,
      ids: [id],
    }).then(() => {
      fetchData() // 刷新通知公告
    })
  }
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div v-loading="loading" :class="list.length ? 'container-table' : 'empty-table'">
    <div v-for="item in list" :key="item.content" class="item">
      <span class="red" />
      <el-tooltip class="item" effect="dark" :content="item.noticeTitle" placement="top-start">
        <span class="title" @click="handleClickTitle(item)"> {{ item.noticeTitle }} </span>
      </el-tooltip>
      <span class="time"> {{ item.noticeTime }} </span>
    </div>
  </div>
  <el-empty v-if="!list.length" v-loading="loading" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
  <notice-detail ref="detailDialogRef" @confirm="confirm" />
</template>

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

.container-table {
  width: 100%;
  // padding: 0 10px;
  padding-left: 10px;
  font-size: 14px;
  height: 230px;
  overflow: auto;

  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 28px;

    .title {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .time {
      text-align: right;
      color: #a8abb2;
      white-space: nowrap;
      margin-left: 20px;
      font-size: 13px;
    }
  }
}

.red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9001b;
  margin-right: 8px;
}
</style>