<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.createTime }}</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="getMessageList"
      />
    </div>
  </div>
</template>

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

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


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

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(item.path)
  await reader({ id: item.id })
  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: var(--el-color-primary);
      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>