<!-- 滚动展示 -->
<template>
  <div style="height: 100%; width: 100%;" @mouseover="handleMouseover" @mouseleave="handleMouseleave">
    <div class="mb-3" style="font-size: 13px; color: var(--color-666);">最近30天已有<span class="red">68人</span>提现成功，累计提现<span class="red">￥956817</span></div>
    <!-- 滚动 -->
    <div
      class="scroll-container"
      ref="scrollRef"
      style="height: calc(100% - 32px); overflow: hidden; font-size: 13px;color: var(--color-333);"
    >
      <!-- 数据list -->
      <div
        v-for="(item) in list"
        :key="item[keyText] || item.name"
        class="d-flex justify-space-between align-center"
        :style="`height: ${dataItemHeight}px;`"
      >
        <!-- 头像、用户名 -->
        <div class="d-flex align-center">
          <v-avatar size="30" :image="item.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
          <div class="ml-2">{{ formatName(item.name) }}</div>
        </div>
        <div class="d-flex" style="width: calc(100% - 65px);">
          <!-- 内容 -->
          <div v-if="item.time" style="flex: 1; text-align: center" class="ellipsisText mx-4">
            <span>{{ timesTampChange(item.time) }}</span>
          </div>
          <!-- <div class="d-flex ellipsisText mx-4" style="flex: 1;">
            <div>推荐到</div>
            <div class="ellipsisText ml-1" style="max-width: calc(50% - 20px);">{{ item.company }}</div>
            <div class="ellipsisText ml-1" style="max-width: calc(50% - 20px);">{{ item.job }}</div>
          </div> -->
          <!-- 赏金 -->
          <div>提现￥<span class="red">{{ item.money }}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { timesTampChange } from '@/utils/date'
import  { onMounted, ref } from 'vue'

defineOptions({name: 'publicRecruitment-bountyDisplay'})
defineProps({
  keyText: {
    type: String,
    default: 'id'
  }
})
const avatarList = [
  'https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300',
  'https://img0.baidu.com/it/u=1401084042,2724457850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=726',
  'https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg',
  'https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg',
  'https://q4.itc.cn/q_70/images03/20240528/298d4abda5e4469d98fa77e7cde46525.jpeg',
  'https://q5.itc.cn/q_70/images03/20240520/ceb0d77d1be24eea8cd3826994eac1c1.jpeg',
  'https://img1.baidu.com/it/u=3995643348,1848098846&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
]
let listSource = []
for (let index = 0; index < 68; index++) {
  const obj = {
    id: 'id' + (index+1),
    name: '用户' + (index+1),
    avatar: avatarList[index % 7],
    company: '某某公司' + (index+1),
    job: '某某职位' + (index+1),
    time: new Date(),
    money: index*index*(100 - index) || 100,
  }
  listSource.push(obj)
}

// 用户名加*号
const formatName = (name) => {
  if (!name.length) {
    return name
  } else if (name.length === 1) {  
    return name // 如果名字只有一个字，则直接返回该字  
  } else if (name.length === 2) {  
    return name.charAt(0) + '*' // 如果名字有两个字，则返回第一个字后跟一个星号  
  } else {  
    return name.charAt(0) + '**' // 如果名字有多于两个字，则返回第一个字后跟两个星号  
  }  
}

// 滚动实现代码部分
const dataItemHeight = 40 // 单位高度
const scrollRef = ref() // 容器的 dom 节点
const list = ref([...listSource]) // 滚动数据列表
let len = listSource.length // 记录原始数据的长度
const scrollItem = ref(null)
let top = 0 // 滚动的距离
let index = 0 // 索引
const scroll = () => {
  // 垂直方向滚动
  scrollRef.value?.scrollTo({
    top: top++,
  })
  if (top % dataItemHeight === 0) {
    // 哪一项滚不见了，就拿这一项 push 到列表中
    const target = list.value[index]
    if (target) list.value.push(target)

    if (index < len - 1) {
      // 不断递增
      index++
    } else {
      // 刚好滚动完一轮，重新来过，初始化数据
      top = 0
      index = 0
      scrollRef.value?.scrollTo({
        top: 0,
      })
      list.value = [...listSource]
    }
  }
  // 不断滚动
  setTimeout(() => { scrollItem.value = requestAnimationFrame(scroll) }, 30) // 延迟滚动-> 20 : 1px。即:1秒滚动50px
}
// const handleMouseover = () => { cancelAnimationFrame(scrollItem.value) } //暂停滚动
// const handleMouseleave = () => { scroll() } // 恢复滚动
onMounted(() => {
  // 如果数据长度形成的总高度少于容器高度，不设置滚动
  const clientHeight = scrollRef.value?.clientHeight
  if (len*dataItemHeight > clientHeight) {
    if ((len - 1)*dataItemHeight < clientHeight) {
      // 如果clientHeight刚好大于len*dataItemHeight，但不满足(len+1)*dataItemHeight会出现抖动。
      // 解决方法：将数据复制一份
      listSource = listSource.concat(...Array.from({ length: 1 }, () => [...listSource]))
      list.value = listSource
      len = listSource.length
    }
    scroll() // 启动滚动
  }
})
</script>
<style lang="scss" scoped>
.red {
  color: red;
}
.ellipsisText {
  // width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
