<template>
  <div class="page-content" ref="pageContent">
    <div class="head">
      <van-image class="bg" src="/img/commentBg.jpg" fit="cover" />
      <div class="headDiv p-16">
        <div class="headTop">
          <div class="d-flex justify-content-between">
            <div>
              <div class="border-bottom-1">
                <span class="day">{{ day }}</span>
                <span class="month1 ms-10">{{ month1 }}</span>
              </div>
              <div class="textSize text-end">{{ year }}</div>
            </div>
            <van-image class="logo border-radius-4" src="/img/completeLogo.jpg" />
          </div>
        </div>
        <div class="d-flex justify-content-end">
          <div class="border-radius-4 border-1 text-center p-8">
            <div>{{ month2 }}</div>
            <div>{{ week }}</div>
          </div>
        </div>
        <div class="textSize">
          <div>第一上海</div>
          <div class="mt-2">精选点评，让你了解更多行业新闻</div>
        </div>
      </div>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="list.length > 0">
      <van-list class="mt-10" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
        :immediate-check="false">
        <van-cell v-for="item in list" :key="item.inboxId"
          @click="$router.push({ name: 'comment-detail', query: { inboxId: item.inboxId } })">
          <div class="normal-title text-start balck-text-color f-b ellipsis-one">{{ item.inboxTitle }}</div>
          <div class="d-flex justify-content-between">
            <div class="content">{{ item.stockName ? item.stockName : '' }}</div>
            <div class="content">{{ item.createTime }}</div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-empty v-else />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getWeek } from '@/utils/index'
import moment from 'moment'
import { listLoadAndRefresh } from '@/mixins/list-load-and-refresh'
import { scrollList } from '@/mixins/scroll-list'
import { onBeforeRouteLeave } from 'vue-router'

let year = ref(moment().format('YYYY'))
let month1 = ref(moment().format('MMM'))
let month2 = ref(moment().format('M') + '月')
let week = ref(getWeek(moment().format('d')))
let day = ref(moment().format('DD'))

let pageContent = ref(null)
const scrollPosition = ref(0)

const refresh = () => {
  onRefresh()
}

import { workInboxList } from '@/utils/api'

const getData = async () => {
  const { data } = await workInboxList({
    curPage: curPage.value,
    limit: 20,
    inboxType: 4
  })
  return data
}

const { refreshing, finished, loading, curPage, list, onLoad, onRefresh } = listLoadAndRefresh(getData, 'comment')
const { setScrollTop, setScrollPositionAndRefreshFlag } = scrollList(pageContent, scrollPosition, refresh)

setScrollTop()
onBeforeRouteLeave((to, from) => {
  setScrollPositionAndRefreshFlag(to, 'comment-detail')
})
</script>

<style lang='scss' scoped>
.page-content {

  .head {
    position: relative;

    .bg {
      width: 100%;
      height: 220px;
    }

    .headDiv {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #fff;
      background: #171b2eb3;

      .headTop {
        .day {
          font-size: 60px;
        }

        .month1 {
          font-size: 26px;
        }

        .logo {
          height: 57px;
          width: 132px;
          border: 2px solid #fff;
        }
      }
    }
  }
}
</style>
