<template>
  <div style="height: 110px; width:24%; flex:1;min-width: 260px;">
    <el-card :body-style="{ padding: '0px' }">
      <div style="display: flex; align-items: center;">
        <div><img class="cardImg" :src="cardImage" alt="Card Image" style="height: 100px; border-radius: 50%;  "/></div>
        <div>
          <div style="color:#909399;">{{ cardTitle }}</div>
          <div style="font-weight: bold;font-size: large">{{ cardMiddle }}</div>
          <div>
            <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
            <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>

import { toRefs, watchEffect } from "vue"

const props = defineProps({
  cardData: {
    type: Object,
    required: true,
  },
})
const { cardImage, cardTitle, cardMiddle, cardBottom, cardBottomRight } = toRefs(props.cardData)

watchEffect(() => {
  console.log(111, props.cardData)
})

</script>

<style scoped>

</style>
