<template>
  <!-- 预览 -->
  <dialogBox ref="preview" :isReset="false" divider :isButton="false" multiple title="XML报文">
    <div class="xmlMessage">
      {{ content }}
    </div>
    <div class="preview-dialog-button">
      <el-button id="copy_text" type="primary" plain @click="handleSubmit"
        :data-clipboard-text="content">复制报文</el-button>
      <el-button @click="handleclose">关闭</el-button>
    </div>
  </dialogBox>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
    }
  },
  methods: {
    handleSubmit () {
      var _this = this;
      var clipboard = new Clipboard('#copy_text');
      clipboard.on('success', e => {
        // 释放内存
        this.$message({
          message: '复制成功！',
          type: 'success'
        })
        clipboard.destroy()
        _this.$refs.preview.isHide()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({
          message: '该浏览器不支持自动复制',
          type: 'warning'
        });
        // 释放内存
        clipboard.destroy()
      })
    },
    handleclose () {
      this.$refs.preview.isHide();
    }
  }
}
</script>
<style scoped lang="scss">
.preview-dialog-button {
  text-align: center;
  margin: 20px 0;
}
</style>