<template>
    <section class="AiAvatar">
      <el-row type="flex" v-if="type=='rect'">
        <div class="image-box">
          <el-image :src="value" :preview-src-list="preview?[value]:null"/>
        </div>
      </el-row>
      <el-avatar v-else-if="type=='circle'" :src="value">
        <slot v-if="!value"/>
      </el-avatar>
    </section>
  </template>
  
  <script>
  export default {
    name: "AiAvatar",
    model: {
      prop: "value",
      event: "change"
    },
    props: {
      value: {type: String, default: ""},
      preview: {type: Boolean, default: true},
      type: {default: "rect"}
    },
    data() {
      return {
      }
    },
    methods: {
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .AiAvatar {
    font-size: 12px;
    line-height: initial;
  
    .iconProfile_Picture {
      color: #89b;
    }
  
    :deep(.el-avatar) {
      background: #26f;
    }
  
    .image-box {
      width: 104px !important;
      height: 120px;
      text-align: center;
      background-color: #f5f5f5;
      border: 1px solid rgba(208, 212, 220, 1);
      border-radius: 2px;
      padding: 0;
  
      .iconfont {
        font-size: 32px
      }
  
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
  }
  </style>
  