<template>
  <view class="news_info" v-if="newsData?.length">
    <view class="news_list_item_header">
      <view class="label"> 项目公告 </view>
      <view class="more" @click="toMessage">
        <text> 查看更多 </text>
        <view class="smallcircle"> </view>
        <uni-icons type="right" size="15" color="#C4C4C4"></uni-icons>
      </view>
    </view>
    <view class="news_list_item_footer">
      <swiper autoplay vertical circular>
        <template v-for="(i, index) in newsData" :key="`items_${index}`">
          <swiper-item>
            <view class="news_item_contents">
              <view class="title">
                {{ i?.title }}
              </view>
              <view class="time">{{ getFromNow(i?.created_at) }} </view>
            </view>
          </swiper-item>
        </template>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { onShow } from '@dcloudio/uni-app'
import { useWeAppAuthStore } from '@/common'
import { getFromNow } from '@/common/libraries/day'
import { getCurrentInstance, ref, watch } from 'vue'
import getUserLogin from '@/common/libraries/userUserLogin'
const auth = useWeAppAuthStore()
const newsData = ref<any>([])

const getNewList = () => {
  getApiLoading(Apis.Msg.MsgPropertyAnnouncements.List, {}).then(res => {
    newsData.value = res.data
    console.log(res)
  })
}

watch(
  () => auth?.data?.selected_house,
  () => {
    if (getUserLogin?.getLoginStatus()) {
      getNewList()
    }
  },
  {
    deep: true
  }
)

const toMessage = () => {
  uni.navigateTo({
    // url: '/INDEX/message_center/index/index'
    url: '/INDEX/message_center/list/index'
  })
}

// onShow(async () => {
//   await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
//   if (getUserLogin?.getLoginStatus()) {
//     getNewList()
//   }
//   console.log('onShow')
// })
</script>

<style lang="scss" scoped>
.news_info {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 30rpx;
  font-size: 28rpx;
  .news_list_item_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 0 30rpx;
    .label {
      color: #333;
      font-weight: 550;
    }
    .more {
      color: #999999;
      display: flex;
      align-items: center;
      font-weight: 400;
      .smallcircle {
        background-color: #f00;
        width: 10rpx;
        height: 10rpx;
        border-radius: 100rpx;
        margin: 0 5rpx;
      }
    }
  }
  .news_list_item_footer {
    padding-top: 15rpx;
    color: #666666;
    padding: 20rpx 30rpx 30rpx 30rpx;
    swiper {
      width: 100%;
      height: 50rpx;
      swiper-item {
        width: 100%;
        height: 50rpx;
      }
    }
    .news_item_contents {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 50rpx;
      .title {
        flex: 1;
        white-space: nowrap; /* 确保文本不会换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      }
    }
    .time {
      color: #999;
    }
  }
}
</style>
