<template>
  <div class="card">
    <a-list size="large" :data-source="vdata.noticeList" :pagination="pagination">
      <template #renderItem="{ item }">
        <a-list-item class="list-ltem" @click="showDrawer(item.articleId)">
          <span>{{ item.title }}</span>
          <a style="color: #707070;">{{ item.createdAt }} <right-outlined :style="{fontSize: '12px', color: '#707070',marginLeft:'10px'}" />  </a>
        </a-list-item>
      </template>
      <template #header>
        <div class="title">全部公告</div>
      </template>
    </a-list>
  </div>
  <JeepayNoticeViewer ref="noticeViewer" />
</template>
<script lang="ts" setup>
import { defineComponent,onMounted,reactive,ref } from 'vue'
import { API_URL_NOTICELIST, req } from '@/api/manage'
const vdata = reactive({
  noticeList:[],
  noticeDate:{} as any
})
const noticeViewer  = ref()
const visible = ref<boolean>(false)
onMounted(() =>{
  reqTableDataFunc({
    pageSize:10,
    pageNumber:1
  }).then(res =>{
    vdata.noticeList = res.records
    pagination.total = res.total
  })
})
function reqTableDataFunc(params: any) { // 请求table接口数据
    return req.list(API_URL_NOTICELIST, Object.assign(params,{articleType:1}))

}

const showDrawer = (articleId) =>  {
  noticeViewer.value.showDrawer(articleId)  
}

const pagination = {
      onChange: (page: number) => {
        let params = {
          pageSize:10,
          pageNumber:page
        }
        reqTableDataFunc(params).then(res =>{
          vdata.noticeList = res.records
          pagination.total = res.total
        })
      },
      pageSize: 10,
      total:0
     
    }
</script>
<style lang="less" scoped>
:deep(.ant-list-pagination){
  margin-bottom: 10px;
  margin-right: 20px;
}
.card{
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px;
    .list-ltem{
        padding-left: 30px;
        font-weight: 400;
        font-size: 13px;
        color: #666;
        height: 60px;
        span{
            &:nth-child(1){
                cursor:pointer;
                
            }
            &:hover{
                color: #2691FF; 

            }
        }
    }
    .title{
        font-weight: bold;
        font-size: 14px;
        color: #333;
        padding-left: 30px;
    }
} 
</style>