<template>
  <div class="browse-image-panel">
    <transition :name="'fade'" @after-enter="afterEnter">
      <div class="browse-image-mask" @click="close" v-if="state > -99"></div>
    </transition>
    <transition :name="'fade'" @after-leave="afterLeave">
      <img :src="source" v-if="state > -1">
    </transition>
    <Button type="ghost" shape="circle" icon="close" @click.native="close"></Button>
  </div>
</template>
<style lang="less">
@import "./index.less";
</style>
<script>
export default {
  components: {

  },
  props: {
    source: String,
    default() {
      return '';
    }
  },
  data() {
    return {
      state: -99
    }
  },
  computed: {

  },
  created: function () {

  },
  beforeMount: function () {

  },
  mounted: function () {
    this.state = -1;
  },
  beforeDestroy: function () {

  },
  destroyed: function () {
    document.body.removeChild(this.$el);
  },
  methods: {
    close() {
      this.state = -99;
    },
    afterLeave() {
      this.$destroy();
    },
    afterEnter() {
      this.state = 0;
    }
  },
  watch: {

  },
  directives: {

  }
}
</script>
