<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>

        <thead style="height: 100px; padding: 10px">
          <tr class="table-header">
            <th class="show-border" colspan="10">
              <div class="herder-title clearfloat">
                <div class="title" style="width: 60%; margin-bottom: 10px">
                  实际报销人：<input type="text" class="input"/>
                </div>
                <div class="title" style="width: 40%; margin-bottom: 10px">
                  联系电话：<input type="text" class="input"/>
                </div>
                <div class="title" style="width: 60%">
                  摘要:<input type="text" class="input"/>
                </div>
                <div class="title" style="width: 40%">
                  附件张数:<input type="text" class="input"/>
                </div>
              </div>
            </th>
          </tr>

          <tr class="table-header-title">
            <th class="show-border" style="width: 30%" colspan="3">报销项</th>
            <th class="show-border" style="width: 20%" colspan="2">金额</th>
            <th class="show-border" style="width: 50%" colspan="5">说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="items" colspan="3">办公费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">办公用品、报刊杂志费等</td>
          </tr>

          <tr>
            <td class="items" colspan="3">版面复印打印费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">图书资料版面复印打印费、印刷费</td>
          </tr>

          <tr>
            <td class="items" colspan="3">咨询费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">
              支付给外单位咨询方面的费用。（凭咨询费发票结算）
            </td>
          </tr>

          <tr>
            <td class="items" colspan="3">手续费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">
              单位支付的各类手续费支出。（如：通过银行、邮局发生的汇款手续费）
            </td>
          </tr>

          <tr>
            <td class="items" colspan="3">邮电费</td>
            <td colspan="2"></td>
            <td colspan="5">
              设备维修费、公共设施维修费、室内装修改造、网络系统维护费、房屋建筑物维修费
            </td>
          </tr>

          <tr>
            <td class="items" colspan="3">租赁费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">租赁费、固定资产使用费</td>
          </tr>

          <tr>
            <td class="items" colspan="3">会议费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">
              承办各类会议发生的房租费、伙食补助费以及文件资料的印刷费、会议场地租用费等、承办各类会议发生的房租费、伙食补助费以及文件资料的印刷费、会议场地租用费等
            </td>
          </tr>

          <tr>
            <td class="items" colspan="3">培训费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">其他经费中开支的培训费</td>
          </tr>

          <tr>
            <td class="items" colspan="3">招待费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">公务接待费</td>
          </tr>

          <tr>
            <td class="items" colspan="3">专用材料费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">单位购买实验专用材料、单位购买常用设备耗材等</td>
          </tr>

          <tr>
            <td class="items" colspan="3">劳务费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">激励费、评审劳务费、其他劳务费</td>
          </tr>

          <tr>
            <td class="items" colspan="3">差旅费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">
              是指出差期间因办理公务而产生的交通费、住宿费和公杂费等各项费用。
            </td>
          </tr>

          <tr>
            <td class="items" colspan="3">其他</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">
              宣传广告费、专利申请费、审计费、外事活动费、管理费支出、税费支出
            </td>
          </tr>

          <tr>
            <td class="items" colspan="3">委托业务费</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
            <td colspan="5">科研测试加工费、科研协作费、科研出版费</td>
          </tr>
        </tbody>
        <tfoot>
          <tr style="font-weight: 600">
            <td class="items" colspan="3">申请报销总金额（大写）</td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
            <td colspan="2">（小写）¥</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr style="font-weight: 600">
            <td class="items" colspan="3">核报总金额（大写）</td>
            <td colspan="3">
              <input type="text" class="td-input" />
            </td>
            <td colspan="2">（小写）¥</td>
            <td colspan="2">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <tr style="font-weight: 600">
            <td class="items" colspan="1">支付<br/>方式</td>
            <td colspan="9">
              <input type="text" class="td-input" />
            </td>
          </tr>

          <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="">负责人签字：</div>
          <div class="">报销人签字：</div>
          <div class="">经办人签字：</div>
        </div>
        <div class="clearfloat">
          <div class="data">填报日期：</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {selectById} from "@/api/company"
export default {
  data() {
    return {
      company:{},
    };
  },
  created() {
    this.getCompany()
  },
  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,
      });
    },
    
  },
};
</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;
}
.table td {
  height: 46px;
  padding: 4px;
}
.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: 10px;
}
.sign > div {
  width: 33%;
  float: left;
  font-size: 14px;
  font-weight: 900;
}
.data {
  width: 34%;
  float: right;
  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>