<template>
  <div class="operator-dadge" :class="{'operator-dadge-open': isOpen}">
    <slot v-if="isOpen">
      <span>adfadsfasdf</span>
      <span>adfadsfasdf</span>
      <span>adfadsfasdf</span>
      <span>adfadsfasdf</span>
      <span>adfadsfasdf</span>
    </slot>
    <img src="../../../static/xinxi.png" alt="图片加载失败" class="img-responsive" @click="open">
    <span class="badge">42</span>
  </div>
</template>

<script>
export default {
  title: '抄表员汇总',
  data () {
    return {
      isOpen: false
    }
  },
  methods: {
    open () {
      this.isOpen = !this.isOpen
    }
  },
  ready () {
    const el = this.$el
    this._closeEvent = window.addEventListener('mouseup', (e) => {
      if (!el.contains(e.target) || e.target.nodeName.toLowerCase() == 'a') this.isOpen = false
    }, false)
  },
  beforeDestroy () {
    if (this._closeEvent) this._closeEvent.remove()
  }
}
</script>
<style lang="less">
  .operator-dadge {
    position: fixed;
    top: 5px;
    right: 5px;
    height: 35px;
    width: 60px;
    text-align: center;
    background: #324057;
    transition: 1s;
    span[class=badge] {
      position: absolute;
      right: 2px;
      top: 2px;
      background: red;
    }
    img {
      width: 30px;
      position: absolute;
      right: 15px;
      top: 5px;
      cursor: pointer;
    }
  }
  .operator-dadge-open {
    width: auto;
    max-width: 800px;
    min-width: 200px;
    transition: 1s;
  }
</style>
