<template>
  <div>
    <DkModal
      :value="modalDisplay"
      title="打印预览"
      width="1300"
      className="print-preview-model-no-padding"
      :footer-flag="false"
      :mask-closable="false"
      draggable
      sticky
      @on-cancel="modalCancel">
      <div style="height: 800px;display: flex;justify-content: center;background-color: #DADCE0;overflow-x: auto;overflow-y: auto;padding: 10px;">
        <div id='preview'/>
      </div>
    </DkModal>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'print-preview',
  props: {
    printTemplate:{
      type:Object,
      default: ()=>{}
    },
  },
  computed: {...mapState(['print']),},
  data() {
    let self = this
    return {
      modalDisplay:false,//如不定义此变量，则进入modal无动画
    }
  },
  created() {

  },
  mounted() {
    this.modalDisplay=true
    let printData={}

    // console.log('this.printTemplate',this.printTemplate)
    this.printTemplate?.getJson()?.panels[0].printElements.forEach(it=>{
      let element=it?.options
      if(element?.field&&element?.testData){
        printData[element?.field]=element?.testData
      }
    })
    // console.log('printData',printData)

    this.$nextTick(()=>{
      $('#preview').html(this.printTemplate.getHtml(printData))
    })
  },
  methods: {
    ...mapMutations(['setPrintPreviewModalDisplay']),

    /**
     * @desc   : 取消
     * @author : 张潇木
     * @date   : 2023/1/5 10:38
     */
    modalCancel() {
      this.setPrintPreviewModalDisplay(false)
    },
  }
}
</script>

<style scoped>

/deep/ .hiprint-printPaper{
  background-color: #fff!important;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}
</style>
