<script setup>
  import { reactive, ref } from 'vue'
  import { onPageScroll } from '@dcloudio/uni-app'

  const MAX_SCROLL = 446

  const cbNavBar = ref({})
  const topIcon = reactive({
    leftColor: '#ffffff',
    rightColor: '#ffffff'
  })

  onPageScroll(e => {
    cbNavBar.value?.updateScroll(e.scrollTop)
    if (e.scrollTop > MAX_SCROLL - 220) {
      topIcon.leftColor = '#000'
      topIcon.rightColor = '#000'
    } else {
      topIcon.leftColor = '#ffffff'
      topIcon.rightColor = '#ffffff'
    }
  })
</script>

<template>
  <view class="dynamic">
    <nav-bar
      ref="cbNavBar"
      isTopBg
      target-color="#f9f9f9"
      :max-scroll="MAX_SCROLL"
    >
      <template #back>
        <uni-icons
          :color="topIcon.leftColor"
          type="left"
          size="24"
        ></uni-icons>
      </template>
      <template #right>
        <uni-icons
          :color="topIcon.rightColor"
          type="camera"
          size="24"
        ></uni-icons>
      </template>
    </nav-bar>
    <view class="top-bg-img">
      <image
        src="https://wx4.sinaimg.cn/mw690/006i0nC8ly1hqugav3k6yj31o01o0aod.jpg"
        mode="aspectFill"
        class="img"
      ></image>
      <!-- 用户信息 -->
      <view class="user-info">
        <text>名字</text>
        <image
          src="https://img2.baidu.com/it/u=3408192385,656358498&fm=253&app=138&f=JPEG?w=760&h=760"
          mode="aspectFill"
          class="avatar"
        ></image>
      </view>
    </view>

    <!-- 动态列表 -->
    <view class="dynamic-list">
      <view v-for="item in 4" class="list">
        <image
          src="https://img1.baidu.com/it/u=2645961124,1296922095&fm=253&app=138&f=JPEG?w=800&h=1530"
          mode="aspectFill"
          class="avatar"
        ></image>
        <view class="content">
          <text class="name">名字</text>
          <text class="text">这是一条朋友圈的标题</text>
          <view class="img-list">
            <image
              src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
              mode="aspectFill"
              class="item-img"
            ></image>
          </view>
          <!-- 地址 -->
          <view class="address">
            <text>19分钟前</text>
            <text>重庆市渝北xxx寄街道</text>
          </view>
          <!-- 点赞评论 -->
          <view class="like-box">
            <view class="like">
              <uni-icons
                type="hand-up"
                size="20"
                color="#747474"
              ></uni-icons>
              <text>22</text>
            </view>
            <uni-icons type="chat" size="20" color="#747474"></uni-icons>
          </view>
          <!-- 评论内容 -->
          <view class="comment">
            <view v-for="item in 3" :key="item" class="comment-item">
              <text>Admin:</text>
              <text>确实的很好，值得推荐的很好</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/dynamic.scss';
</style>
