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

    <!-- 工具 -->
    <div class="tool-bar">
      <el-button v-if="print" icon="el-icon-printer" circle title="打印" @click="btnPrintClick" />
      <el-button v-if="edit" icon="el-icon-edit-outline" circle title="编辑" @click="btnEditClick" />
      <el-button v-if="remove" icon="el-icon-delete" circle title="删除" @click="btnDeleteClick" />
    </div>
  </el-dialog>
</template>

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

export default {
  components: { hmPreview },
  props: {
    height: { type: String, default: '100%' },
    type: { type: String, default: 'load' },
    print: { type: Boolean, default: false },
    edit: { type: Boolean, default: false },
    remove: { type: Boolean, default: false }
  },
  data() {
    return {
      visible: false,
      id: '',
      content: ''
    }
  },
  watch: {
    id(val) { console.log(val) }
  },
  mounted() { },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.content = ''
        this.getInfo()
      })
    },
    // 获取信息
    getInfo() {
      if (this.type === 'load') {
        // 加载
        this.$http.get('/crf/form', { params: { id: this.id }}).then(({ data: res }) => {
          if (res.data) {
            this.content = Base64.decode(res.data.content)
          }
        })
      } else {
        // 预览模板
        this.$http.get('/crf/template', { params: { crfId: this.id }}).then(({ data: res }) => {
          if (res.data) {
            this.content = Base64.decode(res.data.content)
          }
        })
      }
    },
    btnPrintClick() {
      this.$refs.ecrf.print()
    },
    btnEditClick() {
      this.$emit('edit', this.id)
    },
    btnDeleteClick() {
      this.$confirm(this.$t('prompt.info', { handle: this.$t('delete') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.delete('/crf/form/' + this.id).then(({ data: res }) => {
          this.$message.success('删除成功!')
          this.visible = false
          this.$emit('remove', this.id)
        })
      })
    }
  }
}
</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%;
      }
    }
  }
}

.tool-bar {
  position: absolute;
  width: 50px;
  bottom: 20px;
  right: 5px;

  .el-button + .el-button {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>
