<template>
  <li class="fbg-upload-image-item">
    <div class="fbg-upload-image-box">
      <img :src="src" />
      <!-- <fbg-progress type="circle" :percentage="percent"/> -->
      <div class="fbg-upload-image-box-modal">
        <div>
          <i class="fbg-icon-view" style="margin-right: 5px" @click="handleLookat(src)"/>
          <i class="fbg-icon-delete" @click="hanleRemove(src)"/>
        </div>
      </div>
    </div>
  </li>
</template>
<script>
import {Progress} from 'element-ui';
export default {
  components: {
    'fbg-progress': Progress
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    percent: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      
    }
  },
  inject: ['openBigImage'],
  methods: {
    handleLookat(src) {
      this.$emit('onLookat', src);
      this.openBigImage(src);
    },
    hanleRemove(src) {
      this.$emit('onRemove', src);
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg {
  &-upload {

  }
}
</style>