<template>
  <div class="main">
    <div class="opt-bar">
      <button>«Back</button>
      <button>Reply</button>
      <button>Reply All</button>
      <button>Forword</button>
      <button>Delete</button>
      <button>Spam</button>
    </div>
    <div class="email-info">
      <div class="info-title" style="padding:5px" @click="$emit('modify','title')">{{ email.title }} <i class="btn el-icon-s-flag" /></div>
      <div class="sub-info">
        <div @click="$emit('modify','from')"><span class="head">From:</span>{{ email.from }} <i class="btn el-icon-star-off" /></div>
        <div @click="$emit('modify','sent')"><span class="head">Date:</span>{{ email.sent }}</div>
        <div @click="$emit('modify','to')"><span class="head">To:</span>{{ email.to }}</div>
      </div>
    </div>
    <div class="tips">
      This is not an official message. Be wary of info about password protection, prize announcements and cash offers. Don't call back to the phone numbers you do not recognize.
    </div>
    <div class="body" @click="$emit('modify','message')">
      <div class="item" style="white-space:pre-wrap;color:black;" @click="$emit('modify','message')" v-html="email.message" />
    </div>
    <div style="margin-left:10px">
      {{ email.from }}
    </div>
  </div>
</template>

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

<style scoped>
.main {
    border:1px dashed #eee;
  background-color: white;
  padding: 20px;
}
.opt-bar {
  font-size: 14px;
  display: flex;
  height: 40px;
  align-items: center;
  background-color: #bcc2cd;
  padding: 5px;
}
.email-info{
    background-color: #f6f6f6;
    padding:10px;
}
.opt-bar button {
  margin: 0 5px;
}
.sub-info{

    color:#333;
    font-size: 14px;
}
.head{

    margin:2px 10px;
    display: inline-block;
    width:60px;
    color:#999;
    text-align: right;
}
.info-title {
  font-weight: bold;
}

.tips{
    color:#666;
    padding: 10px;
    font-size: 12px;
    background-color: #FFF1B4;
}

.body{
    min-height: 300px;
    padding:20px;
}
</style>
