<template>
  <FlexRow
    :key="item.id" 
    backgroundColor="white" 
    radius="radius.md"
    justify="space-between"
    align="center"
    :padding="20"
    :gap="20"
  >
    <FlexRow :gap="20">
      <Image 
        :src="item.image"
        width="100rpx"
        height="100rpx"
        :defaultImage="UserHead"
        :failedImage="UserHead"
        round 
      />
      <FlexCol>
        <Text :fontSize="36" bold :text="`${item.name} ${item.sex === 0 ? '男' : '女'}`" />
        <Text :fontSize="26" :text="`手机：${item.mobile}`" />
        <Text :fontSize="26" :text="`地址：${item.address || '暂无'}`" />
        <Text :fontSize="26" :text="`可采编：${item.collectModuleText || '暂无'}`" />
      </FlexCol>
    </FlexRow>
    
    <slot name="action" :item="item" />
  </FlexRow>
</template>

<script setup lang="ts">
import type { VolunteerInfo } from '@/api/inhert/VillageApi';
import type { PropType } from 'vue'
import FlexRow from '@/components/layout/FlexRow.vue';
import Image from '@/components/basic/Image.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';

const UserHead = 'https://mncdn.wenlvti.net/app_static/xiangyuan/images/user/avatar.png';

defineProps({
  item: {
    type: Object as PropType<VolunteerInfo>,
    default: () => {},
  },
})
</script>
