<template>
  <div class="wrappper flex" :class="style">
    <div class="w-1/2">
      <img
        data-aos="zoom-in"
        data-aos-duration="1000"
        data-aos-easing="ease-in-out-cubic"
        data-aos-delay="100"
        :src="getImgUrl(props.data.url)"
        class="w-full"
      />
    </div>
    <div class="w-1/3 px-24 flex flex-col self-center isActive" ref="textWrapper">
      <svg-icon :iconClass="props.data.icon" class="w-12 h-12 mb-1" />
      <div :class="myStyles.secondHeader" class=" title">{{ props.data.title }}</div>
      <div class="text-sm text-gray-400 pt-4 text-justify">{{ props.data.detail }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, computed, ref, onMounted } from "vue"
import myStyles from '@/assets/style/style.module.css'
interface item {
  id: number,
  title: string,
  detail: string,
  icon: string,
  url: string
}
const props = withDefaults(defineProps<{
  data: item
}>(), {

})

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})

const style = computed(() => {
  return props.data.id % 2 == 0 ? ' flex-row-reverse' : 'flex-row'
})


</script>

<style scoped>
.title{
  text-align: left !important;
}
.wrapper {
  animation-delay: 2s;
}
/* 文字逐行进入效果 */
.isActive {
  animation: 3s cubic-bezier(0.43, 0.195, 0.02, 1) 0s forwards line_enter;
}

@keyframes line_enter {
  0% {
    opacity: 0;
    transform: translateY(100%) rotate(4deg) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-15%) translateZ(0);
  }
}
</style>
