<template>
  <div class="ivu-poptip">
    <div
      class="ivu-poptip-popper"
      x-placement="top"
      x-out-of-boundaries=""
    >
      <div class="ivu-poptip-content">
        <div class="ivu-poptip-arrow"></div>
        <div class="ivu-poptip-inner">
          <div class="ivu-poptip-body">
            <div
              class="ivu-poptip-body-content"
              :class="{'js-display-flex': canCopyFlag}"
            >
              <Button
                v-if="canCopyFlag"
                type="primary"
                size="small"
                @click.native="copy"
              >
                复制
              </Button>
              <div
                :style="{'padding-left': canCopyFlag ? '10px' : 0}"
                class="ivu-poptip-body-content-inner"
              >
                {{ content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    canCopyFlag: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  methods: {
    // 点击复制的处理
    copy() {
      const self = this;
      // copy事件的回调
      let copyCallback = function(e) {
        try {
          e.clipboardData.setData('text/plain', self.content);
          self.$Message.success('复制成功');
        } catch (error) {
          self.$Message.error('复制失败');
        }
        e.preventDefault();
      };
      // 监听copy事件
      document.addEventListener('copy', copyCallback);
      // copy
      document.execCommand('copy');
      // copy完后移除事件监听
      setTimeout(() => {
        document.removeEventListener('copy', copyCallback);
        copyCallback = null;
      }, 0);
    }
  }
};
</script>

<style lang="less" scoped>
.ivu-poptip-popper {
  display: none;
  position: fixed;
  will-change: top, left;
  text-align: center;
}
.js-display-flex {
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: flex;

  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.ivu-poptip-body-content {
  overflow: hidden;
}
</style>
