<script setup>
import { apiSystemMessage } from '@/api/system'
import { useRouter } from 'vue-router'

const router=useRouter()

const emits=defineEmits(['change'])

const list = ref([])
function getMsgList() {
  apiSystemMessage.list().then(res => {
    if (res.Ret === 200) {
      list.value = res.Data.List || []
      const hasUnRead=list.value.some(item=>!item.IsRead)
      emits('change',hasUnRead)
    }
  })
}
getMsgList()

function handleGoCustomerDetail(e){
  router.push('/customer/userDetail?id=' + e.UserId)
}


</script>

<template>
  <div class="notice-wrap">
    <div class="title">客户到期提醒</div>
    <div class="list-wrap">
      <div
        :class="['item', item.IsRead ? 'item-read' : '']"
        v-for="item in list"
        :key="item.SysMessageReportId"
        @click="handleGoCustomerDetail(item)"
      >
        <span style="margin-right: 20px">{{ item.Content }}</span>
        <span>{{ item.CreateTime }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.notice-wrap {
  .title {
    padding: 20px 0;
    border-bottom: 1px solid #e7e7e7;
  }
  .list-wrap {
    max-height: 500px;
    overflow-y: auto;
    .item {
      padding: 10px;
      cursor: pointer;
      span {
        display: inline-block;
      }
    }
    .item-read {
      color: #999;
    }
  }
}
</style>