<template>
  <WlPic
    :src="data"
    alt=""
    :style="{ width: listItem.imgWidth, height: listItem.imgHeight }"
    class="card-image"
    :class="{
      'card-image--clickable':
        props.listItem?.allowClick && props.listItem?.viewType,
    }"
    :fit="listItem.fit || 'cover'"
    @click.stop="onItem"
  />
</template>

<script setup lang="ts">
import WlPic from '@mobileUI/components/WlPic/src/index.vue';
import { VCardItem } from '../../types/interface';

interface Props {
  data: string;
  listItem: VCardItem;
}
const props = withDefaults(defineProps<Props>(), {
  data: '',
  listItem: () => {
    return {
      imgWidth: '30px',
      imgHeight: '30px',
      fit: 'cover',
    };
  },
});

const emit = defineEmits<{
  (e: 'onItem', val: any): void;
}>();

/* 点击某一行 */
const onItem = () => {
  if (!props.listItem?.allowClick) return;
  emit('onItem', {
    data: props.data,
    listItem: props.listItem,
  });
};
</script>

<style scoped lang="scss">
.card-image {
  width: j(30);
  height: j(30);
  border-radius: j(4);
  overflow: hidden;
  &--clickable {
    cursor: pointer;
  }
}
</style>
