<template>
  <div>
    <div @click="$emit('modify','from')">
      <i class="el-icon-message" />
      <span style="border-left:4px solid orange;height:20px;line-height:20px;font-weight:bold;margin-left:5px;padding-left:5px">{{ email.from }}</span>
    </div>
    <div style="padding:5px" @click="$emit('modify','to')"><span style="color:#999">recipient:</span>
      <span>{{ email.to }}</span>
    </div>
    <div style="font-size:14px;padding:10px;border-bottom:solid 1px #eee;font-weight:bold" @click="$emit('modify','title')">{{ email.title }}</div>
    <div style="padding-top:50px" @click="$emit('modify','message')">
      <div style="white-space:pre-wrap;" v-html="email.message" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Email2',
  props: {
    email: {
      type: Object
    }
  }
}
</script>

<style>

</style>
