<template>
  <div class="app-container">
    <div class="wcard">
      <ul class="mesUl">
        <li v-for="item in messageList" :key="item.id" :class="{'done':item.readFlag=='1'}" @click="readMessage(item)">
          <div>{{ item.name }}</div>
          <!--          <span class="date">{{ item.belongTime }}</span>-->
        </li>
        <li v-if="messageList.length<=0" class="done">
          暂无公告！
        </li>
      </ul>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :page-sizes="[15,30,45,60]"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="Messages">
import { onMounted, reactive, ref } from 'vue'
import { getMessage, reader, notice } from '@/api/system/homePage'
import _ from 'lodash'
import { useRouter } from 'vue-router'

const router = useRouter()
const messageList = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const total = ref(0)


onMounted(() => {
  // getMessageList()
  getList()
})

async function getList() {
  const res = await notice(queryParams.value)
  messageList.value = res.rows
  total.value = res.total
  console.log(res)
}

//
// async function getMessageList() {
//   const res = await getMessage(queryParams)
//
//   _.each(res.rows, (d) => {
//     switch (d.type) {
//       case 30001:
//         d.name = '你有一条会员缴费等待审批，点击去处理！'
//         d.path = '/member/audit'
//         break
//       case 30002:
//         d.name = '你有一条级位考试等待审批，点击去处理！'
//         d.path = '/level/approval'
//         break
//       case 30003:
//         d.name = '你有一条段位考试等待审批，点击去处理！'
//         d.path = '/rank/approval'
//         break
//       case 30004:
//         d.name = '你有一条会员调动等待审批，点击去处理！'
//         d.path = '/member/mobillize'
//         break
//       case 30005:
//         d.name = '你有一条单位会员认证等待审批，点击去处理！'
//         d.path = '/member/audit'
//         break
//       case 30006:
//         d.name = '你有一条段位成绩等待审批，点击去处理！'
//         d.path = '/rank/score/approval'
//         break
//       case 40001:
//         d.name = '你有一条级位申请待提交，点击去处理！'
//         d.path = '/level/apply/modify/:examId'
//         break
//       case 40002:
//         d.name = '你有一条段位位申请待提交，点击去处理！'
//         d.path = '/rank/apply/modify/:examId'
//         break
//     }
//   })
//   messageList.value = res.rows
//   total.value = res.total
// }

async function readMessage(item) {
  await router.push({
    path: '/view',
    query: { id: item.noteId }
  })
  
  // await reader({ id: item.noteId })
  // item.readFlag = '1'
}

</script>

<style scoped lang="scss">
.wcard {
  background: #fff;
  padding: 15px;
  overflow: hidden;
  position: relative;
  
  .po-title {
    position: absolute;
    
    h3 {
      font-size: 18px;
      color: #2B3133;
      margin: 0;
    }
    
    h2 {
      color: #014A9F;
      font-size: 30px;
      margin: 6px 0;
    }
    
    p {
      color: #7B7F83;
      font-size: 18px;
      margin: 0;
    }
  }
}

.mesUl {
  li {
    position: relative;
    line-height: 45px;
    padding-left: 40px;
    display: flex;
    justify-content: space-between;
    color: #666;
    cursor: pointer;
    
    & > div {
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
    }
    
    &:before {
      width: 6px;
      content: '';
      height: 6px;
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #AD181F;
      border-radius: 50%;
    }
    
    &:hover {
      background: #f4f4f4;
    }
    
    .link {
      display: inline-block;
    }
    
    .date {
      font-size: 12px;
      float: right;
      color: #999;
      width: 20%;
      text-align: right;
      padding-right: 15px;
    }
  }
  
  li.done {
    &:before {
      background: #f4f4f4;
    }
  }
}
</style>