<template>
  <div
    :class="[classes, animation ? prefixCls + '-img-animation' : '']"
    :style="{'width': width + 'px', 'height': height + 'px', 'line-height': type==='image' ? height-20 + 'px' : ''}"
  >
    <slot v-if="type !== 'avater'"></slot>
    <img v-if="type !== 'avater' && imageUrl" :src="imageUrl" alt="img">
    <img v-if="type === 'avater' && avaterUrl" :src="avaterUrl" alt="avater">
    <!-- 头像 -->
    <div v-if="type === 'avater' && !avaterUrl" class="avater-con">
      <span :style="{'font-size': width-(width*0.45) + 'px', 'margin-top':width*0.15 + 'px'}">
        <slot></slot>
      </span>
    </div>
  </div>
</template>

<script>
const prefixCls = "lion-panel";
import { oneOf } from "../../utils/assist.js";
export default {
  name: "LionPanel",
  data() {
    return {
      prefixCls: prefixCls
    };
  },
  props: {
    height: {
      type: [Number, String],
      default: 100
    },
    width: {
      type: [Number, String],
      default: 80
    },
    type: {
      validator(value) {
        return oneOf(value, ["avater", "image"]);
      },
      // default: ""
    },
    // 方形头像
    avaterSqu: {
      type: Boolean,
      default: false
    },
    // 是否展示图片动画
    animation: {
      type: Boolean,
      default: false
    },
    avaterUrl: {
      type: String,
      default: ""
    },
    imageUrl: {
      type: String,
      default: ""
    }
  },
  computed: {
    classes() {
      return [
        {
          [`${prefixCls}`]: !this.type,
          [`${prefixCls}-${this.type}`]: !!this.type,
          [`${prefixCls}-avater-squ`]: !!this.avaterSqu
        }
      ];
    }
  }
};
</script>

