<template>
  <el-dialog :visible.sync="show" :title="title" :append-to-body="true" width="80%" top="80px"
             :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="false">
    <div v-if="type === 'html'" class="preview-content" :style="{maxHeight:maxHeight}" v-html="content"></div>
    <div v-else-if="type === 'text'" class="preview-content" :style="{maxHeight:maxHeight}">
      <pre>{{ content }}</pre>
    </div>
    <div v-else-if="type === 'image'" class="preview-content center" :style="{maxHeight:maxHeight}">
      <el-image :src="content"></el-image>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="copy" v-if="showCopy">复 制</el-button>
      <el-button @click="show=false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>

  export default {
    name: 'ZyPreview',
    components: {},
    props: [],
    data() {
      return {
        maxHeight: (window.document.body.clientHeight - 300) + 'px',
        show: false,
        type: '',
        title: '',
        content: '',
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {},
    computed: {
      showCopy: {
        get() {
          return this.type === 'text' || this.type === 'html';
        },
        set() {
        }
      }
    },
    methods: {
      copy() {
        let oInput = document.createElement('textarea');
        oInput.value = this.content;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        document.body.removeChild(oInput);
        this.$message.success('复制成功');
      },
    },
  }
</script>
<style scoped lang="scss">
  .preview-content {
    width: 100%;
    overflow: scroll;
    padding-left: 15px;
  }

  .center {
    text-align: center;
  }
</style>
