<template>
  <div>
    <div id="printProject">
      <h2 class="text-center title">任务通知单</h2>
      <table border="1">
        <tr>
          <td class="fontbold">项目名称</td>
          <td>{{ project.projectName }}</td>
          <td class="fontbold">项目编号</td>
          <td :colspan="3">{{ project.projectNumber }}</td>
        </tr>
        <tr>
          <td class="fontbold">项目类型</td>
          <td>{{ project.projectType }}</td>
          <td class="fontbold">项目来源</td>
          <td :colspan="3">{{ project.projectSource == '0' ? '院内' : '院外' }}</td>
        </tr>
        <tr>
          <td class="fontbold">承担部门</td>
          <td>{{ getDeptNames(project.undertakingDept) }}</td>
          <td class="fontbold">项目负责人</td>
          <td :colspan="3">{{ getUserName(project.projectLeader) }}</td>
        </tr>
        <tr>
          <td class="fontbold">甲方单位</td>
          <td>{{ project.partyA ? project.partyA.partyAName : '' }}</td>
          <td class="fontbold">联系人及电话</td>
          <td :colspan="3">{{ project.contactPerson + '/' + project.telephone }}</td>
        </tr>
        <tr>
          <td :colspan="10" class="header bg text-center">测绘项目计划工作量</td>
        </tr>
        <tr class="text-center">
          <td class="fontbold">序号</td>
          <td class="fontbold">工作内容</td>
          <td class="fontbold">比例尺或等级</td>
          <td class="fontbold">单位</td>
          <td class="fontbold">工作量</td>
          <td class="fontbold">要求完成时间</td>
        </tr>
        <tr v-for="(work, index) in workList" class="text-center">
          <td>{{ index + 1 }}</td>
          <td>{{ work.content }}</td>
          <td>{{ work.scale }}</td>
          <td>{{ work.unit }}</td>
          <td>{{ work.workload }}</td>
          <td>{{ work.price }}</td>
        </tr>
        <!-- page-break-after:always  自动分页代码-->
        <tr>
          <td :colspan="10" class="header bg text-center">审核情况</td>
        </tr>
        <tr>
          <td class="fontbold">
            经营副总审核
          </td>
          <td :colspan="5">
            <div class="minHeight">{{ projectComment.jyComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(projectComment.jyApprover) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ projectComment.jyApprovalTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <tr>
          <td class="fontbold">
            分管领导批准
          </td>
          <td :colspan="5">
            <div class="minHeight">{{ projectComment.manageComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ getUserName(projectComment.manageApprover) }}</span>
              </el-col>
              <el-col :span="6">
                审批日期：<span>{{ projectComment.manageApprovalTime }}</span>
              </el-col>
            </el-row>
          </td>
        </tr>
        <!-- <tr>
          <td class="fontbold">
            生产部门确认
          </td>
          <td :colspan="5">
            <div class="minHeight">{{ projectComment.scComment }}</div>
            <el-row>
              <el-col :span="6" :offset="11">
                签名：<span class="auditor">{{ projectComment.scApproverName }}</span>
              </el-col>
              <el-col :span="6" style="min-width:180px;">
                审批日期：<span>{{ projectComment.scApprovalTime }}</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: {
    project: {
      type: Object
    },
    workList: {
      type: Array
    },
    projectComment: {
      type: Object
    }
  },
  data() {
    return {
      print: {
        id: 'printProject',
        popTitle: '任务通知单', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
}
</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: 25px;
  font-weight: bold;
  line-height: 30px;
}

.fontbold {
  font-weight: bold;
  text-align: center;
  max-width: 200px;
}

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