<template>
  <el-dialog
    title="模板设计"
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="showDialog"
    :modal="false"
    custom-class="dialog-style list-dialog"
    width="100%"
    height="100%"
    top="0px"
    bottom="0px"
    :destroy-on-close="true"
    @close="dialogClose"
    :before-close="closeDesignwinEvent"
    v-el-drag-dialog
  >
    <div class="print-design">
      <hiprintDesign v-if="showHiprintDesign" :printJson.sync="printJson"
                     :style="'width:100%;height:' + ($root.$el.clientHeight - 30 - 12- 74) + 'px'"
                     ref="hiprintDesign"></hiprintDesign>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <!--		<el-button type="primary" plain class="button-sty" @click="closeDesignwinEvent">
            <i class="el-icon-close el-icon"></i>
            {{ $t2('取 消', 'system.button.cancel2') }}
          </el-button>-->
      <el-button type="success" class="button-sty" @click="dialogPrimary" style="width: 250px;">
        <i class="el-icon-check el-icon"></i>
        确 认 模 板
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import '../../install'
export default {
  name: "dialog",
  components: {hiprintDesign: () => import('../../../../components/hiprint/view/design/index')},
  props: {
    printJsonStr: String
  },
  data() {
    return {
      showDialog: true,
      printJson: null,
      showHiprintDesign: false
    }
  },
  created() {
    this.printJson = this.printJsonStr ? JSON.parse(this.printJsonStr) : null;
  },
  mounted() {
    this.$nextTick(() => {
      this.showHiprintDesign = true;
    })
  },
  methods: {
    dialogPrimary() {
      let printJsonStr = JSON.stringify(this.$refs.hiprintDesign.getJson(), null, 2);
      this.$emit("update:printJsonStr", printJsonStr);
      this.$emit("update:visiable", false);
      this.$emit("confirm", printJsonStr);
    },
    dialogClose() {
      this.$emit("update:visiable", false);
    },
    closeDesignwinEvent(done) {
      this.$baseConfirm('关闭模板设计界面，将不保留本次修改的内容，是否继续关闭？').then(() => {
        this.dialogClose();
      });
    },
  }
}
</script>

<style scoped>
.el-card {
  margin-top: 3px;
  margin-bottom: 3px;
}
</style>
