<template>
  <div class="fullheight">
    <el-dialog
      class="print-form"
      v-if="dialogFlowVisible"
      :visible.sync="dialogFlowVisible"
      destroy-on-close
      width="60%"
      title="打印模板"
    >
      <ht-table
        @load="loadData"
        :data="data"
        quick-search-props="fileName"
        :page-result="pageResult"
        :default-querys="[{ property: 'formKey', value: formKey }]"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
      >
        <template v-slot:toolbar>
          <el-tooltip placement="top" effect="light" content="默认调用主版本">
            <el-button icon="el-icon-printer" @click="defaultWordPrint()">word套打</el-button>
          </el-tooltip>
          <el-tooltip placement="top" effect="light" content="默认调用主版本">
            <el-button icon="el-icon-document" @click="defaultFormPreview()">表单打印预览</el-button>
          </el-tooltip>
          <el-tooltip placement="top" effect="light" content="直接打印">
            <el-button icon="el-icon-printer" @click="checkDefalut()">不使用打印模板</el-button>
          </el-tooltip>
        </template>
        <template>
          <ht-table-column type="index" width="50" align="center" label="序号" />
          <ht-table-column
            prop="fileName"
            label="名称"
            :show-overflow-tooltip="true"
          />
          <ht-table-column
            prop="createTime"
            label="创建时间"
            :show-overflow-tooltip="true"
          />
          <ht-table-column prop="isMain" width="80" label="主版本">
            <template v-slot="{ row }">
              <el-tag v-if="row.isMain == 'Y'">是</el-tag>
              <el-tag type="danger" v-else>否</el-tag>
            </template>
          </ht-table-column>
          <ht-table-column prop="printType" width="120" label="打印类型">
            <template v-slot="{ row }">
              <el-tag v-if="row.printType == 'word'" type="success">word套打</el-tag>
              <el-tag v-if="row.printType == 'form'" type="warning">表单模板</el-tag>
            </template>
          </ht-table-column>
          <ht-table-column width="200" label="操作" align="center">
            <template v-slot="{ row }">
              <el-button icon="el-icon-printer" v-if="row.printType == 'word'" size="mini" @click="openWordPrint(row)">打印</el-button>
              <el-button icon="el-icon-view" v-if="row.printType == 'word'" size="mini" @click="WordPreview(row)">预览</el-button>
              <el-button icon="el-icon-document" v-if="row.printType == 'form'" size="mini" @click="openPreview(row)">打印预览</el-button>
            </template>
          </ht-table-column>
        </template>
      </ht-table>
      <el-dialog
        class="form-print-dialog"
        fullscreen
        destroy-on-close
        :visible="formEditorDialogVisible"
        v-if="formEditorDialogVisible"
        :before-close="handleCloseFormEditor"
        :show-close="false"
        :close-on-press-escape="false"
        :append-to-body="true"
      >
        <div class="navbar-default box-shadow flex notprint">
          <el-page-header @back="goBack" content="打印预览"></el-page-header>
          <span>
              <el-button icon="el-icon-printer" type="primary" @click="flowPrint()">打印</el-button>
          </span>
        </div>
        <div id="printFlow">
          <DoneFormContent ref="doneFormContent" :instId="instId" :formId="formId" isFlowPrint ="true"/>
          <!-- <ProcessRecord :instId="instId"/> -->
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import req from "@/request.js";
import utils from "@/utils.js";
import DoneFormContent from "@/components/flow/doneFormContent.vue";
import ProcessRecord from "@/components/flow/processRecord.vue";
import watermark from "@/watermark.js";
import flow from "@/api/flow.js";
export default {
  name: "flowPrint",
  props: ["formKey","instId"],
  components: {
    DoneFormContent,
    ProcessRecord,
  },
  data() {
    return {
      dialogFlowVisible:false,
      fullscreenLoading: false,
      formEditorDialogVisible: false,
      data: [],
      formId:"",
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      watermarkSetting: null
    };
  },
  mounted(){
  },
  watch:{
    // instId: {
    //   handler(newVal, oldVal){
    //     if (newVal !== oldVal){
    //       if (newVal){
    //         flow.getWatermarkByInstId(newVal).then(data => {
    //           this.watermarkSetting = data;
    //         })
    //       }
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    WordPreview(row){
      this.dialogFlowVisible = false;
      this.$emit("previewWordTemplate", row);
    },
    loadData(param, cb) {
      req.post("${form}/form/printTemplate/v1/getPrintList", param)
        .then(response => {
          this.data = response.data.rows;
          this.pageResult = {
            page: response.data.page,
            pageSize: response.data.pageSize,
            total: response.data.total
          };
        })
        .finally(() => cb());
    },
    handleOpen(done) {
      this.dialogFlowVisible = true;
      flow.getWatermarkByInstId(this.instId).then(data => {
        this.watermarkSetting = data;
      })
    },
    //word套打（默认主版本）
    defaultWordPrint(){
      let this_ = this;
      let printType = "word";
      req.get("${form}/form/printTemplate/v1/getMainTemlate?formKey=" + this.formKey + "&printType=" + printType).then(response => {
        if(response.data){
          this.dialogFlowVisible = false;
        this.$emit("printWordTemplate", response.data);
        }else{
          this.$message({ message: "未添加word套打模板，请添加模板后在进行操作", type: "warning" });
        }
      });
    },
    //表单打印预览（默认主版本）
    defaultFormPreview(){
      let this_ = this;
      let printType = "form";
      req.get("${form}/form/printTemplate/v1/getMainTemlate?formKey=" + this.formKey + "&printType=" + printType).then(response => {
        if(response.data){
          let printTemplate = response.data;
          this.formId = printTemplate.formId;
          this.formEditorDialogVisible = true;
          this.$nextTick(() => {
            this.$refs.doneFormContent.hiddenContent();
          });
        }else{
          this.$message({ message: "未添加表单打印模板，请表单打印模板后在进行操作", type: "warning" });
        }
      });
    },
    checkDefalut(){
      this.dialogFlowVisible = false;
      this.$emit("printHtml", "");
    },
    openWordPrint(row) {
      this.dialogFlowVisible = false;
      this.$emit("printWordTemplate", row);
    },
    openPreview(row){
      this.formId = row.formId;
      this.formEditorDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.doneFormContent.hiddenContent();
      });
    },
    handleCloseFormEditor() {
      this.formId = "";
      this.formEditorDialogVisible = false;
    },
    goBack(){
      this.formId = "";
      this.formEditorDialogVisible = false;
    },
    flowPrint(){
      this.formEditorDialogVisible = false;
      this.dialogFlowVisible = false;
       var test = Print("#printFlow", {
          "no-print": "top-btns-col no-print"
        });
        var printData = test.dom.innerHTML;
        window.document.body.innerHTML = printData;
        if (this.watermarkSetting){
          watermark.watermark({"watermark_txt":this.watermarkSetting.content,"watermark_color": this.watermarkSetting.color,"watermark_type": this.watermarkSetting.type});
        }
        setTimeout(() => {
          document.getElementsByTagName('body')[0].style.zoom=0.8;
          window.print();
          utils.reload();
          document.getElementsByTagName('body')[0].style.zoom=1;
        },500);
    }
  },
  created() {

  }
};
</script>

<style lang="scss" scoped>
@media print
{
	.notprint { display:none }
}
#printFlow {
  width: 100%;
  height : auto;
}

.form-print-dialog /deep/ .el-dialog > .el-dialog__header {
  display: none;
}

.form-print-dialog /deep/ .el-dialog > .el-dialog__body {
  padding-top: 10px;
}

.navbar-default {
  height: 100%;
  background-image: none;
  background: #fff;
  border-radius: 0px;
  box-shadow: 0px 2px 5px rgba(86, 96, 117, 0.15);
  border-bottom: 1px solid #ededed;
  justify-content: space-between;
  padding: 0 10px;
}

.navbar-default span {
  color: #666;
  font-size: 14px;
  line-height: 48px;
  font-weight: bold;
  margin-left: 20px;
}

.navbar-default button {
  margin-right: 10px;
}
</style>
