<template>
  <div class="container">
    <el-button type="primary" @click="billPrintClick">打印</el-button>
    <div id="printBill" class="printTable">
      <table class="table show-border" cellspacing="0" cellpadding="0" border="2">
        <caption class="table_title" id="caption">
          {{company.companyName}}出差审批单
        </caption>
        
        <tbody>
          <tr>
            <td  rowspan="2">
              项目<br/>名称
            </td>
            <td colspan="2"  rowspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="2" >
              出差人
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
          </tr>
          <tr>
            <td colspan="2" >
              职务/职称
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
            <td>
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr>
            <td rowspan="4">出差<br/>地点</td>
            <td colspan="5">
              <input type="text" class="td-input" />
            </td>
            <td rowspan="4">出差<br/>事由</td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
          </tr>
          
          <tr>
            <td colspan="5">
              <input type="text" class="td-input" />
            </td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr>
            <td colspan="5">
              <input type="text" class="td-input" />
            </td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr>
            <td colspan="5">
              <input type="text" class="td-input" />
            </td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr>
            <td>出差<br/>时间</td>
            <td colspan="5">
              <input type="text" class="td-input" />
            </td>
            <td>
              拟乘坐的交通工具
            </td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr>
            <td>审批人</td>
            <td colspan="9">
              <input type="text" class="td-input" />
            </td>
          </tr>
        </tbody>
    
        <tfoot>
          <tr style="font-weight: 600">
            <td style="width:10%;height:0px;padding: 0px;" class="no-border" ></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
            <td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
          </tr>
        </tfoot>
      </table>

      <div>
        <div class="clearfloat sign">
          <div class="man">填表人：{{user.userName}}</div>
          <div class="data">填报日期：{{dateNow}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {selectById} from "@/api/company"
export default {
  data() {
    return {
      company:{},
      user:{},
      dateNow:null,
    };
  },
  created() {
    this.user = this.$store.getters.info
    console.log(this.user)
    this.getCompany()
    this.time()
  },
  methods: {
    //获取公司名称
    getCompany(){
      selectById({companyId:this.$store.getters.companyId}).then((res)=>{
        if(res.status == "success"){
          this.company = res.data
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        this.$message.error("获取公司名称失败")
      })
    },
    //打印
    billPrintClick() {
      const style = "@page {margin:0 10mm};"; //打印时去掉眉页眉尾
      //打印为什么要去掉眉页眉尾？因为眉页title时打印当前页面的title，相当于是获取html中title标签里面的内容，但是比如我打印的内容只是一个弹框里面的内容，是没有title的，这时候就会出现undefined，为了避免出现这种情况，就可以隐藏眉页眉尾
      printJS({
        printable: "printBill", // 标签元素id
        type: "html",
        headerStyle: "font-size:22px;text-align: center;",
        header: this.company.companyName + "出差审批单",
        ignoreElements:['caption'],
        targetStyles: ["*"],
        style,
      });
    },
    //获取现在时间
    time(){
      let date = new Date();
      var Y = date.getFullYear() + '年'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月'
      var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '日'
      this.dateNow = Y+M+D
    }
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

<style scoped>
.clearfloat:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.no-border {
  border: none;
}
.show-border {
  border: 1px solid black;
}
.printTable {
  width: 794px;
  height: 1123px;
  padding: 20px 80px;
  box-sizing: border-box;
  font-size: 14px;
}
.table {
  margin-bottom: 20px;
  width: 100%;
}
.table td {
  height: 46px;
  padding: 4px;
  text-align: center;
}
.table_title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 10px;
}
.table-header {
  text-align: left;
}
.table-header > th {
  height: 50px;
  padding: 10px;
}
.herder-title {
  width: 100%;
}
.herder-title .title {
  float: left;
  text-align: left;
}
.sign {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 20px;
}
.data {
  width: 34%;
  float: right;
  font-size: 14px;
  font-weight: 900;
}
.man{
  width: 50%;
  float: left;
  font-size: 14px;
  font-weight: 900;
}
.items {
  text-align: center; 
}

.td-input{
  display: inline-block;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}
.input{
  outline: none;
  border: none;
}

</style>