<template>
  <div>
    <h3 class="homeTitle">待办提醒<router-link class="fr" to="/messages">更多<el-icon><ArrowRight /></el-icon></router-link></h3>
    <div class="wcard">
      <ul class="mesUl" :style="`height: ${mesHeight}px`">
        <li v-for="item in messageList" :key="item.id" :class="{'done':item.readFlag=='1'}" @click="readMessage(item)">
          <div>{{ item.name }}</div>
          <span class="date">{{ parseTime(item.createTime,'{m}-{d} {h}:{i}') }}</span>
        </li>
        <li v-if="messageList?.length<=0" class="done">
          暂无代办业务！
        </li>
      </ul>
    </div>
  </div>
</template>

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

const router = useRouter()
const messageList = ref([])

defineProps({
  mesHeight: {
    type: Number,
    default: 300
  }
})

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

async function getMessageList() {
  const res = await getMessage({
    pageNum: 1,
    pageSize: 10
  })

  _.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 = '/group/authentication'
        break
      case 30006:
        d.name = '你有一条段位成绩等待审批，点击去处理！'
        d.path = '/rank/score/approval'
        break
      case 40001:
        d.name = '你有一条级位申请待提交，点击去处理！'
        d.path = '/level/apply/modify/' + d.eventId
        break
      case 40002:
        d.name = '你有一条段位申请待提交，点击去处理！'
        d.path = '/rank/apply/modify/' + d.eventId
        break
      case 40003:
        d.name = '你有一条成绩维护的数据待提交，点击去处理！'
        d.path = '/rank/score/modify/' + d.eventId
        break
      case 50001:
        d.name = '你有一条新的个人会员申请，点击去处理！'
        d.path = '/member/list'
        break
    }
  })
  messageList.value = res.rows
}

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

</script>

<style scoped lang="scss">
.homeTitle{font-weight: 500;color: #2B3133;margin: 30px 0 15px;}
.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;}
  }
}
.home {
  background: RGBA(245, 247, 249, 1);
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  ul {
    padding: 0;
    margin: 0;list-style-type: none;
  }
}
.mesUl{
  overflow: auto;
  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; min-width: 80px}
  }
  li.done{&:before{background: #ddd;}}
}
</style>