<template>
  <div class="email">
    <div class="title">
      <i class="el-icon-message" style="font-size: 30px;margin:0 20px" />
      <span @click="$emit('modify','title')">{{ email.title }}</span>
    </div>
    <div class="info">
      <div>
        <i class="el-icon-s-tools" style="font-size: 40px; color: #999;margin:0 10px" />
      </div>
      <div>
        <div class="">
          <span @click="$emit('modify','from')"><span>From:</span><span style="color:#666"> {{ email.from }}</span> </span>
          <span style="margin-left:20px" @click="$emit('modify','sent')"><span>Sent:</span><span style="color:#666"> {{ email.sent }}</span></span>
        </div>
        <div class="" style="margin-top:5px" @click="$emit('modify','to')">
          <span>To:</span><span style="color:#666"> {{ email.to }}</span>
        </div>
      </div>
    </div>
    <div class="body">
      <div @click="$emit('modify','message')"><span>Message:</span><span style="white-space:pre-wrap" v-html="email.message" /></div>
    </div>
  </div>
</template>

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

<style lang="scss">
.email {
  border: dashed 1px #eee;
}
.title {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 10px 5px;
  font-size: 24px;
  background-color: #eee;
}

.info {
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 20px;
  background-color: #fcfcfc;
  border-bottom: dashed 1px #ccc;
}

.body {
  padding: 20px;
  font-size: 18px;
  line-height: 30px;
}
</style>
