<template>
  <div class="max-big-box">
    <div class="top-button-box">
      <p @click="outButton">返回</p>
      <p class="null-p"></p>
      <p @click="deriveword">导出</p>
      <p v-print="printObj">直接打印</p>
    </div>
    <div class="word-max-big-box TabStrip" id="printTest" ref="print">
      <p class="word-title-p">调拨通知单</p>
      <div class="text-big-box">
        <div>
          <p>调拨单号：</p>
          <p>{{newData.noticeNum}}</p>
        </div>
        <div>
          <p>调拨日期：</p>
          <p>{{newData.date}}</p>
        </div>
      </div>
      <div class="text-big-box">
        <div>
          <p>发出单位：</p>
          <p>{{newData.sendOrganizationName}}</p>
        </div>
        <div>
          <p>接收单位：</p>
          <p>{{newData.receptName}}</p>
        </div>
      </div>
      <div class="text-big-box">
        <div>
          <p>调拨区分：</p>
          <p>{{newData.materialDifferent}}</p>
        </div>
        <div>
          <p>调拨方式：</p>
          <p>{{newData.noticeType}}</p>
        </div>
      </div>
      <div class="text-big-box-two">
        <div class="text-big-title-box">
          <p>序号</p>
          <p>物资名称</p>
          <p>单位</p>
          <p>规格</p>
          <p>型号</p>
          <p>数量</p>
          <p>备注</p>
        </div>
        <div class="text-big-for-box" v-for="(item,index) in newData.list" :key="index">
          <p>{{index+1}}</p>
          <p>{{item.materialName}}</p>
          <p>{{item.materialUnit}}</p>
          <p>{{item.materialSpecs}}</p>
          <p>{{item.materialModel}}</p>
          <p>{{item.materialNum}}</p>
          <p>{{item.remark}}</p>
        </div>
      </div>
      <div class="bottom-div-null"></div>
      <div class="signature-big-box">
        <div>
          <p>机关：</p>
          <p>_______________</p>
        </div>
        <div>
          <p>发出单位：</p>
          <p>_______________</p>
        </div>
        <div>
          <p>接收单位：</p>
          <p>_______________</p>
        </div>
      </div>
      <div class="signature-big-box">
        <div>
          <p>领导：</p>
          <p>_______________</p>
        </div>
        <div>
          <p>经手人：</p>
          <p>_______________</p>
        </div>
        <div>
          <p>经手人：</p>
          <p>_______________</p>
        </div>
      </div>
      <div class="signature-big-box-one">
        <div class="left-signature-box">

        </div>
        <div class="right-signature-box">
          <p>时间：______年______月______日</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { transferNotice } from '@/api/userApi'
  import docxtemplater from 'docxtemplater'
  import PizZip from 'pizzip'
  import JSZipUtils from 'jszip-utils'
  import {saveAs} from 'file-saver'
  export default {
    name: "generateTransferNotification",//生成调拨通知单
    props:["generateNotifications"],
    data () {
      return {
        printObj: {
          id: "printTest",//打印区域 Dom ID
          popTitle: '调拨通知单',
          extraCss: ' ',
          extraHead: ' '
        },
        newData:{
          noticeNum:"",//调拨单号
          date:"",//调拨时间
          sendOrganizationName:"",//发送单位
          receptName:"",//接收单位
          materialDifferent:"",//调拨区分
          noticeType:"",//调拨方式
          list:[]//数据
        }
      }
    },
    created(){

    },
    mounted() {
      this.transferNotice();
    },
    methods: {
      //获取打印详情
      async transferNotice(){
        let  self = this;
        const { data } = await transferNotice(this.generateNotifications);
        if(data.code==200){
          this.newData.list = data.data.list;
          this.newData.noticeNum = data.data.noticeNum;
          this.newData.date = data.data.date;
          this.newData.sendOrganizationName = data.data.sendOrganizationName;
          this.newData.receptName = data.data.receptName;
          this.newData.materialDifferent = data.data.materialDifferent;
          this.newData.noticeType = data.data.noticeType==1?"分拨下发":(data.data.noticeType==2?"申请计划":(data.data.noticeType==3?"物资调拨":(data.data.noticeType==4?"物资调配":"")));
          for(let i=0;i<self.newData.list.length;i++){
            self.newData.list[i].key = i+1;
          }
        }
      },
      //保存word
      deriveword(e) {
        let self = this;
        let docxsrc = "static/generateTransferNotification.docx";        //模板文件的位置
        let docxname = "调拨通知单.docx";        //导出文件的名字
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }
          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docx templater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            noticeNum:self.newData.noticeNum,
            date:self.newData.date,
            sendOrganizationName:self.newData.sendOrganizationName,
            receptName:self.newData.receptName,
            materialDifferent:self.newData.materialDifferent,
            noticeType:self.newData.noticeType,
            list:self.newData.list
          });
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, docxname);
        });
      },
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    .top-button-box
      display flex
      p
        font-size:$font_14;
        color:$color_ff;
      p:nth-child(1)
        width:92px;
        height:30px;
        line-height:30px;
        padding-left:20px;
        margin-left:105px;
        background:url("~@/assets/images/button_10.png");
        cursor:pointer
      p:nth-child(2)
        flex:1;
      p:nth-child(3)
        width:120px;
        height:30px;
        line-height:30px;
        padding-left:20px;
        background:url("~@/assets/images/button_12.png");
        cursor:pointer
      p:nth-child(4)
        width:120px;
        height:30px;
        line-height:30px;
        padding-left:25px;
        background:url("~@/assets/images/button_11.png");\
        margin:0 105px 0 22px;
        cursor:pointer
    .word-max-big-box
      margin:20px auto;
      height:846px;
      width:770px;
      background $color_ff
      color:$color_33;
      overflow-x:hidden;
      overflow-y:scroll;
      padding:0 70px 70px;
      .word-title-p
        line-height:77px;
        font-size:20px;
      .text-big-box
        display flex
        div
          flex:1;
          display flex
          p
            font-size:$font_16;
            line-height:40px;
            text-align left
          p:nth-child(1)
            width:90px;
          p:nth-child(2)
            flex:1;
      .text-big-box-one
        display flex
        flex:1;
        margin:33px 0 23px 0;
        div
          display flex
          flex:1;
          p
            font-size:$font_16;
            line-height:40px;
            text-align left
          p:nth-child(2)
            flex:1;
      .text-big-box-two
        margin-bottom:24px;
        .text-big-title-box
          display flex
          p
            font-size:$font_14;
            font-weight:700;
            height:55px;
            line-height:55px;
          p:nth-child(1)
            width:44px;
            border-top:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-bottom:1px solid #a8a8a8;
          p:nth-child(2)
            width:99px;
            border-top:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-bottom:1px solid #a8a8a8;
          p:nth-child(3)
            width:60px;
            border-top:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-bottom:1px solid #a8a8a8;
          p:nth-child(4)
            width:60px;
            border-top:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-bottom:1px solid #a8a8a8;
          p:nth-child(5)
            width:60px;
            border-top:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-bottom:1px solid #a8a8a8;
          p:nth-child(6)
            width:60px;
            border-top:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-bottom:1px solid #a8a8a8;
          p:nth-child(7)
            width:239px;
            border:1px solid #a8a8a8;
        .text-big-for-box
          display flex
          p
            font-size:$font_14;
            line-height:18px;
            padding:6px;
            word-wrap:break-word!important;
            word-break:break-all;
            overflow: hidden;
          p:nth-child(1)
            width:44px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
          p:nth-child(2)
            width:99px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
          p:nth-child(3)
            width:60px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
          p:nth-child(4)
            width:60px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
          p:nth-child(5)
            width:60px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
          p:nth-child(6)
            width:60px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
          p:nth-child(7)
            width:239px;
            border-bottom:1px solid #a8a8a8;
            border-left:1px solid #a8a8a8;
            border-right:1px solid #a8a8a8;
      .signature-big-box
        display flex
        div
          flex:1;
          display flex
          p
            text-align left
            color:$color_33;
            line-height:40px;
            font-size:$font_16;
          p:nth-child(2)
            flex:1;
            text-align:left;
      .signature-big-box-one
        display flex
        .left-signature-box
          flex:1;
          p
            line-height:40px;
            text-align left
        .right-signature-box
          flex:1;
          p
            line-height:40px;
</style>
<!--打印样式-->
<style media="print">
  @page{
    size:  auto;   /* auto is the initial value */
    margin: 56px;  /* this affects the margin in the printer settings */
  }

  html{
    margin: 0;  /* this affects the margin on the html before sending to printer */
  }
  .word-max-big-box{
    height:100%;
    width:100%;
  }
  .word-title-p{
    line-height:77px;
    font-size:20px;
    text-align: center;
  }
  .text-big-box{
    display:flex;
  }
  .text-big-box div{
    flex:1;
    display:flex;
  }
  .text-big-box div p{
    font-size:16px;
    line-height:40px;
    text-align:left;
  }
  .text-big-box div p:nth-child(1){
    width:90px;
  }
  .text-big-box div p:nth-child(2){
    flex:1;
  }
  .text-big-box-one{
    display:flex;
    flex:1;
    margin:33px 0 23px 0;
  }
  .text-big-box-one div{
    display:flex;
    flex:1;
  }
  .text-big-box-one div p{
    font-size:16px;
    line-height:40px;
    text-align:left;
  }
  .text-big-box-one div p:nth-child(2){
    flex:1;
  }
  .bottom-div-null{
    height:40px;
  }
  .text-big-title-box{
    display:flex;
  }
  .text-big-title-box p{
    font-size:14px;
    font-weight:700;
    height:55px;
    line-height:55px;
    text-align: center;
  }
  .text-big-title-box p:nth-child(1){
    width:44px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
  }
  .text-big-title-box p:nth-child(2){
    width:99px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
  }
  .text-big-title-box p:nth-child(3){
    width:60px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
  }
  .text-big-title-box p:nth-child(4){
    width:60px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
  }
  .text-big-title-box p:nth-child(5){
    width:60px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
  }
  .text-big-title-box p:nth-child(6){
    width:60px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
  }
  .text-big-title-box p:nth-child(7){
    width:239px;
    border-top:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-bottom:1px solid #a8a8a8;
    border-right:1px solid #a8a8a8;
  }
  .text-big-for-box{
    display: flex;
  }
  .text-big-for-box p{
    font-size:14px;
    line-height:18px;
    padding:6px;
    text-align: center;
    box-shadow:none;
    word-wrap:break-word!important;
    word-break:break-all;
    overflow: hidden;
  }
  .text-big-for-box p:nth-child(1){
    width:44px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
  }
  .text-big-for-box p:nth-child(2){
    width:99px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
  }
  .text-big-for-box p:nth-child(3){
    width:60px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
  }
  .text-big-for-box p:nth-child(4){
    width:60px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
  }
  .text-big-for-box p:nth-child(5){
    width:60px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
  }
  .text-big-for-box p:nth-child(6){
    width:60px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
  }
  .text-big-for-box p:nth-child(7){
    width:239px;
    border-bottom:1px solid #a8a8a8;
    border-left:1px solid #a8a8a8;
    border-right:1px solid #a8a8a8;
  }
  .signature-big-box{
    display: flex;
  }
  .signature-big-box div{
    flex:1;
    display: flex;
  }
  .signature-big-box div p{
    text-align:left;
    line-height:40px;
    font-size:16px;
  }
  .signature-big-box div p:nth-child(2){
    flex:1;
    text-align:left;
  }
  .signature-big-box-one{
    display: flex;
  }
  .left-signature-box{
    flex:1;
  }
  .left-signature-box p{
    line-height:40px;
    text-align:left;
  }
  .right-signature-box{
    flex: 1;
  }
  .right-signature-box p{
    line-height:40px;
  }
</style>
