<template>
  <div v-if="activeContactsData" class="normal-panel scroll-panel">
    <div class="container border flex-align-center flex-between">
      <div class="flex-align-stretch">
        <div class="avatar">
          {{activeContactsData.name.substr(0, 1)}}
        </div>        
        <div class="r-panel">
          <p>{{activeContactsData.name}}</p>
          <small class="color-grey"><i class="el-icon-mobile"></i>&nbsp;{{activeContactsData.phonenumber}}</small>
        </div>
      </div>
      <div>
        <slot name="edit" :data="activeContactsData"></slot>
        <slot name="del" :data="activeContactsData"></slot>
      </div>
    </div>
    <div class="container">
      <el-descriptions title="个人信息" :column="1">
        <el-descriptions-item label="姓名">{{activeContactsData.name}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{activeContactsData.phonenumber}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{activeContactsData.email}}</el-descriptions-item>
        <!-- <el-descriptions-item label="微信">{{activeContactsData.wechat}}</el-descriptions-item> -->
        <el-descriptions-item label="性别">{{activeContactsData.sex}}</el-descriptions-item>
        <el-descriptions-item label="单位">{{activeContactsData.company}}</el-descriptions-item>
        <el-descriptions-item label="部门">{{activeContactsData.depname}}</el-descriptions-item>
        <el-descriptions-item label="职位">{{activeContactsData.position}}</el-descriptions-item>
        <el-descriptions-item label="生日">{{activeContactsData.birthday}}</el-descriptions-item>
        <el-descriptions-item label="家庭住址">{{activeContactsData.homeaddress}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{activeContactsData.remarks}}</el-descriptions-item>
        <el-descriptions-item label="标签">
          <el-tag v-for="tag in activeContactsData.tag" :key="tag.index" :type="tag==='支持者'?'warning':tag==='反对者'?'danger':''" size="mini" style="margin:0 5px">{{tag}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="所属群组">{{activeContactsData.groupname}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  props:['activeContactsData']
}

</script>
<style>
</style>
<style scoped>
.normal-panel{
  width: 400px;
}
.scroll-panel{
  height: calc(100vh - 182px);
  overflow-y: scroll;
}
.scroll-panel::-webkit-scrollbar{
  display:none !important;
}
.r-panel{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
  margin-left: 10px;
}
.border{
  border-bottom:1px solid #f1f2f3;
  margin-top:-1px
}
.avatar{
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 1.5rem;
  color:#fff;
  border-radius: 100%;
  background: #3874F6;
}
</style>