<template>
  <div :class="PREFIX" :style="style">
    <div :class="`${PREFIX}-avator`" v-if="showAvatar && avatar">
      <img :src="avatar"/>
    </div>
    <div :class="`${PREFIX}-content`">{{ content }}</div>
  </div>
</template>

<script>
import { postUnit } from '@platform/utils'

const getVarStr = space => {
  if (typeof space === 'number') {
    return postUnit(space)
  }
  if (typeof space === 'string') {
    return `var(--hcm-${space})`
  }
  return '0'
}

export default {
  name: '<%= name %>',

  props: {
    content: {
      type: String,
      default: '',
    },
    showAvatar: Boolean,

    avatar: String,

    boxArea: {
      type: Object,
      default: () => ({
        margin: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
      }),
    },

    actions: Object,
  },

  data() {
    return {
      PREFIX: '<%= dirname %>',
    }
  },

  computed: {
    style() {
      const { boxArea } = this
      const { margin = {} } = boxArea || {}

      const marginLeft = getVarStr(margin.left)
      const marginTop = getVarStr(margin.top)
      const marginRight = getVarStr(margin.right)
      const marginBottom = getVarStr(margin.bottom)

      return {
        marginTop,
        marginRight,
        marginBottom,
        marginLeft,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.<%= dirname %> {
  display: flex;
  align-items: center;
  &-avator{
    width: 80px;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-content{
    padding-left: 16px;
  }
}
</style>
