<template>
  <div>
    <div id="printPlan">
      <h2 class="text-center title">技术方案记录表</h2>
      <table border="1">
        <tr>
          <td :colspan="1" class="fontbold">项目名称</td>
          <td :colspan="4">{{ form.projectName }}</td>
          <td :colspan="2" class="fontbold">项目编号</td>
          <td :colspan="2">{{ form.projectNumber }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">承担部门</td>
          <td :colspan="4">{{ getDeptNames(form.undertakingDept) }}</td>
          <td :colspan="2" class="fontbold">项目负责人</td>
          <td :colspan="2">{{ getUserName(form.projectLeader) }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">技术负责人</td>
          <td :colspan="4">{{ getUserName(form.technicalDirector) }}</td>
          <td :colspan="1" class="fontbold">技术设计人</td>
          <td :colspan="4" style="white-space: pre-wrap;">{{ getUserName(form.technicalDesigner) }}</td>
        </tr>
        <tr>
          
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">质量检查员</td>
          <td :colspan="8" style="white-space: pre-wrap;">{{ formartVal(form.qualityInspector) }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">技术安排意见</td>
          <td :colspan="4">{{ form.planComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.technicalPlanner) }}</span></td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.technicalTime }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">方案说明</td>
          <td :colspan="4">{{ form.designDescription }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">
            签名：<span class="auditor">{{ getUserName(form.technicalDesigner) }}</span>
          </td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.technicalUploadTime }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">技术方案审核意见</td>
          <td :colspan="4">{{ form.technicalComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">
            签名：<span class="auditor">{{ getUserName(form.technicalAuditor) }}</span>
          </td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.techApprovalTime }}</td>
        </tr>        
        <tr>
          <td :colspan="1" class="fontbold">技术质量与安全部审核意见</td>
          <td :colspan="4">{{ form.techDeptComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">
            签名：<span class="auditor">{{ getUserName(form.techDeptLeader) }}</span>
          </td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.techDeptTime }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">总工程师审核意见</td>
          <td :colspan="4">{{ form.manageComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">
            签名：<span class="auditor">{{ getUserName(form.managerUserId) }}</span>
          </td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.manageApprovalTime }}</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
    }
  },
  data() {
    return {
      settleSum: {},
      deptSettleList: [],
      deductionsList: [],
      actualSumSettle: '',
      undertakingDept: [],
      print: {
        id: 'printPlan',
        popTitle: '技术方案表', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
  methods:{
    formartVal(val){
      if (Array.isArray(val)) {
        let newval = val.join(',');
        let res = this.getUserNames(newval);
        return res
      }
    }
  }
}
</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: 5px;
    // 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;
  min-width: 150px;
  text-align: center;
}

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


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

@media print {
  #print table {
    width: 100%;
  }
}
</style>