<template>
  <span style="margin-left: 10px;">
    <template v-if="showButton">
      <a class="a-link" @click="openPreview()">
        <el-tooltip :enterable="false" effect="dark" :content="$t1('移动端单据页预览')" placement="top"
                    popper-class="tooltip-skin"><i class="iconfont icon-preview"/></el-tooltip>
      </a>
    <el-dialog
      :title="$t1('预览')"
      :append-to-body="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :modal="false"
      custom-class="dialog-style h5view-dialog"
      width="500px"
      top="0px"
      v-el-drag-dialog
      v-el-dialog-center
      :fullscreen="false"
      @close="close"
    >
    <div class="cont" style="height: calc(100vh - 73px);">
      <render ref="render" :isPreview="true" v-if="showRender"></render>
    </div>
  </el-dialog>
    </template>
  </span>
</template>

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

export default {
  name: "previewButton",
  props: {
    code: String,
    dataId: [String, Number]
  },
  components: {render},
  data() {
    return {
      showDialog: false,
      billSetting: null,
      billJson: null,
      showButton: false,
      showRender: false
    }
  },
  mounted() {
    this.initTemplate();
  },
  methods: {
    initTemplate() {
      return this.$http({
        url: USER_PREFIX + `/bill_setting/getByCode`,
        method: `post`,
        data: {
          stringOne: this.code
        },
        success: res => {
          if (res.objx) {
            this.showButton = true;
          }
        }
      });
    },
    openPreview() {
      this.showDialog = true;
      this.showRender = false;
      this.$nextTick(() => {
        this.showRender = true;
        this.$nextTick(() => {
          this.init();
        })
      })
    },
    init() {
      this.$refs.render.init({
        code: this.code,
        dataId: this.dataId,
        wfEnabled: true
      });
    },
    close() {
      this.showRender = false;
    }
  }
}
</script>

<style scoped>

</style>
