<template>
  <div
    class="flex pb-10 cursor-pointer space-x-10 bg-white"
    :class="[active ? 'border-primary shadow-card' : 'border-white']"
  >
    <van-image
      :src="itemData.image"
      height="127"
      width="127"
      radius="15px"
      fit="cover"
      class="shrink-0"
    />
    <div class="flex w-0 flex-1 flex-col text-base text-black-6">
      <div class="truncate text-xl font-semibold text-black-3">
        姓名：{{ itemData.name }}
      </div>
      <div class="truncate">性别：{{ itemData.sexDictMap?.name }}</div>
      <div class="truncate">年龄：{{ itemData.age }}</div>
      <div class="truncate">驾龄：{{ itemData.drivingYears }}年</div>
      <div class="flex items-center justify-between">
        <div>
          <span class="">评分：</span>
          <van-rate size="14" disabled v-model="itemData.score" />
        </div>
        <van-button
          @click="$emit('onSelect')"
          type="primary"
          color="#FD9A00"
          size="small"
          style="width: 70px; font-size: 14px"
          round
          >选择</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({}),
  },
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped></style>
