<template>
  <ul role="list" class="w-full divide-y divide-gray-100">
    <li
      v-for="item in list"
      :key="item.emailOrderId"
      @click="selectEmail(item)"
      class="flex justify-between gap-x-6 py-3 px-2 hover:bg-slate-100 cursor-pointer"
    >
      <div class="w-full">
        <p class="text-sm leading-6 font-semibold text-gray-900	truncate">{{ item.subject }}</p>
        <p class="text-xs leading-5 text-gray-500 truncate">发送者：{{ item.sender }}</p>
        <p class="text-xs leading-5 text-gray-500 truncate">接收者：{{ item.resiver }}</p>
        <p class="mt-1 font-bold text-xs text-sky-500">{{ item.receivedDate }}</p>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  emits: ['selected'],
  setup(props, { emit }) {

    const selectEmail = (email: any) => {
      emit('selected', email)
    }

    return {
      selectEmail
    }
  }
})
</script>
