<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" @click="exportSingle">
          <span class="d-in-block v-mid font-size-16">导出</span>
        </el-button>
        <el-button type="danger" size="medium" @click="printSingle">
          <span class="d-in-block v-mid font-size-16">打印</span>
        </el-button>
      </div>
    </div>
    <!-- <p class="tips">*附件与表单一同打印或导出</p> -->
    <div class="formShow" id="printArea">
      <table class="Tb" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td>项目名称</td>
          <td>{{tableFormData.xm_name}}</td>
        </tr>
        <tr>
          <td>项目类别</td>
          <td>{{tableFormData.lb_name}}</td>
        </tr>
        <tr>
          <td>项目理由</td>
          <td>{{tableFormData.xm_reason}}</td>
        </tr>
         <tr>
          <td>申请科室</td>
          <td>{{tableFormData.department_name}}</td>
        </tr>
        <tr>
          <td>项目预算</td>
          <td>{{tableFormData.xm_price}}</td>
        </tr>
        <tr>
          <td>项目附件</td>
          <td>
            <div class="singleD" v-for="(item,index) in fileFinalArr" :key="index">
              <a :href="item.fileUrl" target="_blank" >{{item.fileName}}</a>
            </div>
          </td>
        </tr>
        <!-- 循环 -->
        <tr v-for="(item,index) in checkLeader" :key="index" >
          <td>{{item.position}}</td>
          <td>{{item.sh_reason}} {{item.sh_user_name}} {{item.modify_dateline}}</td>
        </tr>
      </table>
      <!--景宁公章-->
      <div class="OfficialSeal">
        <img src="../../../../assets/images/officialSeal.png">
      </div>
    </div>
  </div>
</template>

<script>
import {  xmsq_detail,export_word,org_users } from "./itemApi";
import { useUserStore } from "@/stores/user";
const { real_name, user_id, dept_ids } = useUserStore();
export default {
  name: "dybd",
  data() {
    return {
      tranID:'',
      tableFormData:'',
      checkLeader:'',
      fileFinalArr:[],
    };
  },
  methods: {
    initData() {
      this.tranID = this.$route.params.id;
      let transId = this.$route.params.id;
      let transObj = {
        xm_id:transId
      }
      xmsq_detail(transObj)
        .then(res => {
          if (res.code == "1") {
            this.tableFormData = res.data.one_info;
            this.checkLeader = res.data.one_info.shjl;
             //判断是几个附件
             let ifOneB = res.data.one_info.xm_file.indexOf(",");
            if (ifOneB != '-1') {//能找到，不止一个附件
              let muilArr = res.data.one_info.xm_file.split(',');
              let flileArr=[]
              muilArr.forEach(item => {
                let secSpil = item.split('|');
                flileArr.push({
                  fileUrl:secSpil[0],
                  fileName: secSpil[1]
                })
              })
              this.fileFinalArr = flileArr;
            } else {
              let singleArr = res.data.one_info.xm_file.split('|');
              this.fileFinalArr = [{
                fileUrl:singleArr[0],
                  fileName: singleArr[1]
              }];
            }
          }
      })
      .catch(err=>{console.log(err)})
    },
    //导出
    exportSingle() {
      let transObjs={
        xm_id:this.tranID
      }
      export_word(transObjs)
      .then(res=>{
        if (res.code == "1") {
          let zipLink = res.data.file_url;
          window.open(zipLink, "_blank");
        }
      })
      .catch(err=>{console.log(err)})
    },
    //打印
    printSingle() {
      // setTimeout(function () {
      //   let printArea = document.getElementsByClassName("formShow")[0]  //获取目标区域的HTML结构
      //   document.body.innerHTML = printArea.innerHTML   //替换网页的html内容
      //   window.print()   //打印
      //   window.location.reload()  //刷新页面，因为网页的html被替换后很丑
      // },1000)
      

      this.$print({
        printable: 'printArea',
        type: 'html',
        header: '',
        maxWidth:"100%",
        targetStyles: ['*'], // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
      })
    }
  },
  mounted() {
    this.initData();
  },
};
</script>
<style scoped>
.Tb tr{
      line-height: 50px;
}
.Tb td{ 
  height:30px; 
  border:#CCCCCC 1px solid;
  box-sizing: border-box;
  padding-left:1%;
}
.tips{
  font-size: 16px;
  text-align: left;
  color: #ff0000;
}
.formShow{
  min-height: 300px;
  position:relative;
  margin-top:15px;
  
}
.OfficialSeal{
  position:absolute;
  right:7%;
  bottom:2%;
  z-index:13
}
.OfficialSeal img{
  width:150%;
  transform: rotate(-30deg);
}
.singleD{
  display:inline-block;
  margin:0 5px;
}
.singleD a{
  color:rgb(0, 149, 199);
}
/* 打印启用样式 */
@media print{
  @page{  
    size: landscape; /*对打印的尺寸进行设置*/
    margin: 0 ;  /*去掉上面的水印*/
  }
  a[href]:after {
    	content: none !important;
  	}

.tips{
  font-size: 16px;
  text-align: left;
  color: #ff0000;
}
.formShow{
  min-height: 300px;
  position:relative;
  margin-top:15px;
  box-sizing:border-box;
  padding:20px;
}
.Tb tr{
  line-height: 50px;
}
.Tb td{ 
  height:30px; 
  border:#CCCCCC 1px solid;
  box-sizing: border-box;
  padding-left:1%;
}
.OfficialSeal{
  position:absolute;
  right:7%;
  bottom:2%;
  z-index:13
}
.OfficialSeal img{
  width:150%;
  transform: rotate(-30deg);
}
.singleD{
  display:inline-block;
  margin:0 5px;
}
.singleD a{
  color:rgb(0, 149, 199);
}
}
</style>