<script setup>
  import { ref } from 'vue'
  import { getUserNoticeList } from '@/api/my-index'
  import { navigateTo } from '../../../../utils/router'

  // 类型：1-系统 gear 2-消息 chatbubble 3-提醒 notification
  const iconMap = [
    { icon: 'gear', bg: '#05b0ff1f', color: '#05b0ff' },
    { icon: 'chatbubble', bg: '#23c4311a', color: '#23c431' },
    { icon: 'notification', bg: '#dcdf111f', color: '#dbdf11' }
  ]

  const paging = ref(null)
  const dataList = ref([])
  const getData = async (pageNum, pageSize) => {
    try {
      const res = await getUserNoticeList({
        pageNum,
        pageSize
      })
      paging.value.complete(res.rows)
    } catch (error) {
      paging.value.complete(false)
    }
  }

  const onGo = item => {
    navigateTo('/pages/my-index/set-up/message/details', { id: item.id })
  }
</script>

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    safe-area-inset-bottom
    use-safe-area-placeholder
    :default-page-size="15"
    :show-loading-more-no-more-view="false"
    @query="getData"
  >
    <view
      v-for="item in dataList"
      :key="item.id"
      class="card-box"
      @click="onGo(item)"
    >
      <view
        :style="{ background: iconMap[item.type - 1].bg }"
        class="icon-box"
      >
        <uni-icons
          :type="iconMap[item.type - 1].icon"
          :color="iconMap[item.type - 1].color"
          size="30"
        ></uni-icons>
      </view>
      <view class="content-box">
        <view class="top">
          <text>{{ item.title }}</text>
          <text>{{ item.createTime }}</text>
        </view>
        <text class="content">
          {{ item.content }}
        </text>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  .card-box + .card-box {
    border-top: 2rpx solid #f5f5f5;
    padding-top: 18rpx !important;
  }
  .card-box {
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    .icon-box {
      flex-shrink: 0;
      width: 84rpx;
      height: 84rpx;
      border-radius: 84rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
    }
    .content-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        justify-content: space-between;
        text {
          font-size: 32rpx;
          color: #333333;
          &:last-child {
            font-size: 28rpx;
            color: #a5a5a5;
          }
        }
      }
      .content {
        margin-top: 6rpx;
        font-size: 28rpx;
        color: #979797;
        // 超过1行显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-clamp: 1;
      }
    }
  }
</style>
