<template>
  <el-dialog
    title="查看"
    :visible.sync="visible"
    append-to-body
    class="dialog-crf"
    top="4vh"
    width="240mm"
  >
    <hm-preview v-if="content" :value="content" class="hmPreview" />
  </el-dialog>
</template>

<script>
import hmPreview from './load-content'
const Base64 = require('js-base64').Base64

export default {
  components: { hmPreview },
  props: {
    id: { type: String, required: true },
    height: { type: String, default: '100%' }
  },
  data() {
    return {
      visible: false,
      content: ''
    }
  },
  watch: {
    id(val) {
      console.log(val)
    }
  },
  mounted() { },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.content = ''
        this.getInfo()
      })
    },
    // 获取信息
    getInfo() {
      this.$http.get('/crf/form', { params: { id: '1435810703477837825' }}).then(({ data: res }) => {
        if (res.data) {
          this.content = Base64.decode(res.data.content)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-crf {

  ::v-deep .el-dialog {
    margin-bottom: 10px;

    .el-dialog__header {
      padding: 10px 20px;

      .el-dialog__headerbtn {
        top: 10px;
        font-size: 20px;

        .el-dialog__close {
          font-weight: bolder;
        }
      }
    }
    .el-dialog__body {
      padding: 10px 0;
      text-align: center;
      background: #606266;

      height: calc(96vh - 55px);

      .hmPreview {
        background: #fff;
        height: 100%;
      }
    }
  }
}
</style>
