<template>
  <div class="user-info-in-list" @click="showInfo">
    <div class="user-avatar">
      <a-popover
        v-model="visible"
        arrowPointAtCenter
        autoAdjustOverflow
        placement="rightTop"
        trigger="click"
      >
        <template slot="content">
          <a-card
            :bodyStyle="{ padding: 0, paddingTop: '10px'}"
            :bordered="false"
            style="width: 300px"
          >
            <a-card-meta
              :title="`${info.nickname || '无昵称'} ${info.identity ? '('+info.identity.name+')': '' }`"
            >
              <a-avatar slot="avatar" v-if="info.avatar" :src="info.avatar" :size="64" />
              <a-avatar slot="avatar" v-else icon="user" :size="64" />
              <div slot="description">
                {{ info.username }}
              </div>
              <div slot="description">
                {{ info.created_at }}
              </div>
            </a-card-meta>
          </a-card>
        </template>

        <a-avatar v-if="info.avatar" :src="info.avatar" size="large" style="color: #fff; backgroundColor: #f9f9f9" />
        <a-avatar v-else icon="user" size="large" />

      </a-popover>
    </div>
    <div class="user-name">
      <div class="nickname">{{ info.nickname || '无昵称' }} {{ info.identity? `(${info.identity.name})`: '' }}</div>
      <div class="username">{{ info.username || '******' }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  components: {},
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          avatar: '',
          nickname: '',
          username: '',
          user_id: 0,
          chain: {
            addr: '',
            tokens: []
          }
        }
      }
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    showInfo () {
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped>

.user-info-in-list {
  cursor: pointer;
  display: flex;
  justify-content: center;

  .user-avatar {
    vertical-align: middle;
  }

  .user-name {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;

    div {
      // height: 20px;
      // line-height: 20px;
      text-align: left;
    }

    .username {
      color: #999;
    }
  }
}
</style>
