<template>
  <TransitionGroup name="list" tag="div" @enter="onEnter" @before-enter="onBeforeEnter">
    <n-card v-for="(item, index) in list" size="small" :key="item.id" :bordered="false"
      @click="handdleClickArti(item.id)" :data-index="index">
      <div class="titel mt-2">
        <n-h6 prefix="bar">
          <n-text type="primary">
            {{ item.title }}
          </n-text>
        </n-h6>
      </div>
      <div class="cont">
        <div class="pro">{{ item.pro }}</div>
        <div class="author mb-2 mr-4">{{ item.nickname }}</div>
      </div>
    </n-card>
  </TransitionGroup>
</template>

<script setup>
//mark import
import gsap from 'gsap';


//mark data
const router = useRouter()
const props = defineProps({ 
  list: {
    type: Array,
    default: () => []
  }
})

//mark method
function handdleClickArti(id) {
  router.push('/mini/' + id)
}


function onBeforeEnter(el) {
  el.style.opacity = 0
  if (el.dataset.index % 2 == 0)
    el.style.transform = 'translateX(-500px)'
  else
    el.style.transform = 'translateX(500px)'
}


function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    x: 0,
    ease: 'slow',
    delay: el.dataset.index * 0.4,
    onComplete: done
  })
}


</script>

<style scoped lang="less">
:deep(.n-card) {
  width: 90%;
  margin: 0 0 20px 5%;
  box-shadow: @ps;
  background-color: #fafbfc;

}
:deep(.n-card__content) {
  padding: 0 !important;
}
.pro {
  text-indent: 20px;
}

.author {
  text-align: right;
}
</style>