<template>
  <el-dialog
    :title="$t1('单据修改')"
    :modal-append-to-body="falseValue"
    :close-on-click-modal="falseValue"
    :visible.sync="showDialog"
    :modal="falseValue"
    custom-class="dialog-style h5view-dialog"
    width="500px"
    top="0px"
    v-el-drag-dialog
    v-el-dialog-center
    :destroy-on-close="true"
    @close="close"
  >
    <div class="cont" style="height: calc(100vh - 73px);">
      <render ref="render" v-if="showRender" :wfModify="true" @modifyCallback="modifyCallback"></render>
    </div>
  </el-dialog>
</template>

<script>
import render from "./render";

export default {
  name: "previewDialog",
  props: {
    option: {
      type: Object,
      default: () => {
      }
    }
  },
  components: {render},
  created() {

  },
  mounted() {
    this.init()
  },
  data() {
    return {
      showDialog: true,
      falseValue: false,
      showRender: false

    };
  },
  methods: {
    init() {
      this.showRender = true;
      this.$nextTick(() => {
        this.$refs.render.init({
          code: this.option.code,
          dataId: this.option.dataId
        });
      })
    },
    close() {
      this.showDialog = false;
      this.$emit('update:visiable', false)
    },
    modifyCallback() {
      this.close();
      this.$emit('reload')
    }
  }
}
</script>

<style scoped>
/*::v-deep .h5-wrap .form-box .fix-bottom-btns + .c{height: calc(100vh - 175px) !important;} */

::v-deep .h5-wrap .form-box .fix-bottom-btns + .c {
  height: calc(100vh - 205px) !important;
}
</style>
