<template>
  <div class="member-info" :style="`height:${height}px`">
    <dm-preview-img
      class="img"
      :img="memberImage"
      :width="width"
      :height="height">
    </dm-preview-img>
    <p :class="`${!hidePhone ? '' : 'pt10'}`">{{ memberName || '--'}}</p>
    <p v-if="!hidePhone" :class="`${memberPhone ? '' : 'hide'}`">{{ showPhoneTip ? '手机号码：' : '' }}{{memberPhone || '--'}}</p>
  </div>
</template>

<script>
// import headDefault from '@/assets/images/head-default.png';
export default {
  name: 'Memberinfo',
  props: {
    'memberName': { type: String },
    'memberImage': { type: String },
    'memberPhone': { type: String },
    'showPhoneTip': { type: Boolean, default: false }, // 是否展示手机号tooltip提示
    'width': { type: [ String, Number ], default: 40 },
    'height': { type: [ String, Number ], default: 40 },
    'hidePhone': { type: Boolean, default: false },
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin/index.scss';
.member-info {
  position: relative;
  .img {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
  }
  p {
    line-height:20px;
    @include muti-line-ellipsis(1);
    padding-left: 45px;
    color: $gray02;
  }
  p + p {
    font-size: 12px;
  }
}
</style>