<template>
  <div>
    <div v-if="value" :style="{ 'background-image': `url(${value})` }" class="image-view-avatar" :class="`image-view-avatar-${size}`">
      <div class="avatar-uploader-mask" @click="handlePreview">
        <div class="avatar-uploader-mask-btns">
          <i class="iconfont icon-search"></i>
        </div>
      </div>
    </div>
    <el-dialog class="photoPreviewer" fullscreen :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<style lang="scss">
  .image-view-avatar-small {
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80px auto;
    width: 80px !important;
    height: 40px !important;
    display: block !important;
  }
  .image-view-avatar-medium {
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 200px auto;
    width: 200px !important;
    height: 160px !important;
    display: block !important;
  }
  .image-view-avatar-large {
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 600px auto;
    width: 600px !important;
    height: 400px !important;
    display: block !important;
  }
  .image-view-avatar {
    &:hover {
      .avatar-uploader-mask {
        cursor: pointer;
        display: block;
      }
    }
    .avatar-uploader-mask {
      position: relative;
      display: none;
      border-radius: 4px;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      color: rgba(255, 255, 255, 0.9);
      background-color: rgba(0, 0, 0, 0.5);
      .avatar-uploader-mask-btns {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          font-size: 24px;
        }
      }
    }
  }
  .photoPreviewer {
    .el-dialog {
      background-color: rgba(0,0,0,0.3);
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 24px;
    }
    .el-dialog__header {
      border-bottom: 0;
    }
  }
</style>

<script>

export default {
  props: {
    value: String,
    size: {
      type: String,
      default: 'small'
    }
  },
  name: 'ImageView',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handlePreview() {
      this.dialogImageUrl = this.value;
      this.dialogVisible = true;
    }
  }
}
</script>