<template>
  <div>
    <div id="printBorrow">
      <h2 class="text-center title">借款申请表</h2>
      <table border="1">
        <tr>
          <td :colspan="2" class="fontbold" style="min-width:130px;">申请人</td>
          <td :colspan="1"><span class="auditor">{{ getUserName(form.applier) }}</span></td>
          <td :colspan="2" class="fontbold">申请部门</td>
          <td :colspan="2">{{ getDeptName(form.applyDept) }}</td>
          <td :colspan="2" class="fontbold">申请日期</td>
          <td :colspan="2">{{ form.applyDate }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">费用类型</td>
          <td :colspan="8">
            {{ formartUsage(form.borrowUsage) }}
          </td>
        </tr>
        <tr v-if="form.borrowUsage != '0'">
          <td :colspan="2" class="fontbold">借款事由</td>
          <td :colspan="8">
            {{ form.applyReason }}
          </td>
        </tr>
        <tr v-if="form.borrowUsage == '0'">
          <td :colspan="2" class="fontbold">项目名称</td>
          <td :colspan="4">{{ chooseProject.projectName }}</td>
          <td :colspan="2" class="fontbold">项目编号</td>
          <td :colspan="2">{{ chooseProject.projectNumber }}</td>
        </tr>
        <tr v-if="form.borrowUsage == '0'">
          <td :colspan="2" class="fontbold">承担部门</td>
          <td :colspan="4">{{ chooseProject.undertakingDeptName }}</td>
          <td :colspan="2" class="fontbold">项目负责人</td>
          <td :colspan="2">{{ chooseProject.projectLeaderUser ? chooseProject.projectLeaderUser.nickName : "" }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">借款明细</td>
          <td :colspan="8">
            <table border="1" class="text-center">
              <tr>
                <td style="width:50px;">序号</td>
                <td style="width:200px">开支项目</td>
                <td>单位</td>
                <td>单价</td>
                <td>数量</td>
                <td>申请金额</td>
                <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">分管领导审核金额</td>
              </tr>
              <tr v-for="(detail, index) in detailList" :key="index">
                <td>
                  {{ index + 1 }}
                </td>
                <td>
                  {{ detail.borrowItem }}
                </td>
                <td>
                  {{ detail.unit }}
                </td>
                <td>
                  {{ detail.price }}
                </td>
                <td>
                  {{ detail.quantity }}
                </td>
                <td>
                  {{ detail.applyAmount }}
                </td>
                <td>
                  {{ detail.managerAmount }}
                </td>
              </tr>
            </table>
            <el-row class="mt10 text-center">
              <el-col :span="6">申请金额：{{ form.applyAmount }}（元）</el-col>
              <el-col :span="6">校准金额：{{ form.managerAmount }}（元）</el-col>
            </el-row>
          </td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">申请人说明</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.remark }}</div>
          </td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">部门负责人意见</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.deptComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(form.deptUserId) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ form.deptTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">分管领导审核</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.managerComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(form.managerUserId) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ form.managerTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <tr v-if="form.borrowUsage != '0' && form.borrowUsage != '1'">
          <td :colspan="2" class="fontbold">党工团审核</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.unionComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(form.unionUserId) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ form.unionTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">总经理审批</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.zjlComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(form.zjlUserId) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ form.zjlTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <tr v-if="form.borrowUsage == '0' && exceed && !form.cwUser">
          <td :colspan="2" class="fontbold">董事长批准</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.dszComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(form.dszUserId) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ form.dszTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">财务部处理</td>
          <td :colspan="8">
            <div class="minHeight">{{ form.cwComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(form.cwUserId) }}</span>
              </el-col>
              <el-col :span="6">
                支付日期：<span>{{ form.lendTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
      </table>
    </div>
    <div class="text-center mt20">
      <el-button type="primary" v-print="print">确认打印</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object
    },
    chooseProject: {
      type: Object
    },
    detailList: {
      type: Array
    },
    exceed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      print: {
        id: 'printBorrow',
        popTitle: '借款申请表', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    formartUsage(val) {
      if (val == '0') {
        return '项目借款'
      } else if (val == '1') {
        return '非项目借款'
      } else if (val == '2') {
        return '工会借款'
      } else if (val == '3') {
        return '党委借款'
      } else {
        return '团委借款'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
table {
  /*边框*/
  /* border: 1px solid black; */
  width: 90%;
  // text-align: center;
  border-collapse: collapse;
  margin: 0 auto;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 10px;
    // line-height: 30px;
  }
}

.header {
  font-family: '黑体';
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
}

.bg {
  background-color: #eee;
  -webkit-print-color-adjust: exact;
}

.title {
  font-family: '黑体';
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.fontbold {
  font-weight: bold;
  text-align: center;
}

.conment-width {
  // max-width: 200px;
}


@page {
  size: auto;
  /* 去除页脚 */
  margin-bottom: 0;
  // 横向A4
  // size:A4 landscape;
}

@media print {
  #print table {
    width: 100%;
  }
}

.minHeight {
  min-height: 80px;
}
</style>