<template>
  <style id="printBuildOrderStyle">
   #printBuildOrder td{
      height: 30px;
      text-align: center;
    }
   #printBuildOrder table{
      width: 100%;
      margin: 0;
      padding: 0;
      border: 1px solid black;
      border-collapse:collapse;
    }
   #printBuildOrder h1,#printBuildOrder h2,#printBuildOrder h3,#printBuildOrder h4,#printBuildOrder h5,#printBuildOrder h6 {
      text-align: center;
    }
   #printBuildOrder .merge-content {
      text-align: left;
      vertical-align: top;
      padding: 10px;
    }
   #printBuildOrder .sign {
      height: 80px;
    }
   #printBuildOrder .sign_img {
      width: 60px;
      transform: rotate(0deg);
    }
   #printBuildOrder .replace_img{
      width: 60px;
      transform: rotate(0deg);
    }
  </style>

  <div id="printBuildOrder">
    <h2><span style="letter-spacing: 0px">工程施工通知单</span></h2>
    <h2><span style="letter-spacing: 0px">工程施工中间验收交工协议书</span></h2>
    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td >工程名称</td>
        <td colspan="3">{{ selectdata.f_apply_nature }}{{ selectdata.f_user_name }}{{ selectdata.f_apply_num }}</td>
        <td >合同编号</td>
        <td >{{ selectdata.f_entrust_contract_number }}</td>
      </tr>
      <tr>
        <td >安装单位</td>
        <td colspan="3">{{ selectdata.f_construction_name }}</td>
        <td >现场项目负责人</td>
        <td >{{ selectdata.f_construct_operator }}</td>
      </tr>
      <tr>
        <td >土建单位</td>
        <td colspan="3">{{ selectdata.f_engineering_operator1 }}</td>
        <td >检测单位</td>
        <td >{{ selectdata.f_check_operator1 }}</td>
      </tr>
      <tr>
        <td >设计人员</td>
        <td >{{ selectdata.f_designer_people }}</td>
        <td >出单时间</td>
        <td >{{ selectdata.f_release_date }}</td>
        <td >缴费时间</td>
        <td >{{ selectdata.f_charge_date }}</td>
      </tr>
      <tr>
        <td>详细地址</td>
        <td colspan="3">{{ selectdata.f_address }}{{ selectdata.f_address_detail }}</td>
        <td>安装户数</td>
        <td>{{ selectdata.f_install_count }}</td>
      </tr>
      <tr>
        <td>联系人</td>
        <td>{{ selectdata.f_contact  }}</td>
        <td>联系电话</td>
        <td>{{ selectdata.f_phone }}</td>
        <td>房屋类型</td>
        <td>{{ '       ' }}</td>
      </tr>
      <tr>
        <td>材料备注</td>
        <td colspan="3">{{ selectdata.f_materials_remarks }}</td>
        <td>材料单编号</td>
        <td>{{ selectdata.f_material_number }}</td>
      </tr>
      <tr>
        <td colspan="6" class="merge-content">
          <p style="margin: 0px 0px 10px 0px">现场勘察意见：</p>
          <p style="margin: 0px 0px 30px 0px">{{ selectdata.f_prospecting_result }}</p>
        </td>
      </tr>
<!--      <tr>-->
<!--        <td colspan="6" class="merge-content">-->
<!--          <p style="margin: 0px 0px 10px 0px">工程部审核意见：</p>-->
<!--          <p style="margin: 0px 0px 30px 0px"></p>-->
<!--        </td>-->
<!--      </tr>-->
      <tr>
        <td colspan="6" class="merge-content">
          <p style="margin: 0px 0px 10px 0px">工程主要内容及工程量：</p>
          <p style="margin: 0px 0px 10px 0px">
            共{{ selectdata.f_install_count }}户天然气管道安装工程，{{ selectdata.userfile }},{{ selectdata.device ? selectdata.device : '无设备' }},现场负责人：{{ selectdata.f_construct_operator }}。
            （备注：{{ remark }}。）
          </p>
        </td>
      </tr>
      <tr>
        <td colspan="6" class="merge-content">
          <p style="margin: 0px 0px 10px 0px">工程要求及其他：</p>
          <p style="margin: 0px 0px 30px 0px">
            工程验收合格后方可提交，提交默认已完成各自的相关验收。
          </p>
        </td>
      </tr>
      <tr>
        <td colspan="6" class="merge-content">
          <p style="margin: 0px 0px 10px 0px">工程完成情况及验收意见：</p>
          <p style="margin: 0px 0px 30px 0px"></p>
        </td>
      </tr>
      <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2" class="merge-content">
          安装单位
        </td>
        <td colspan="2" class="merge-content">
          建设单位
        </td>
        <td colspan="2" class="merge-content">
          监理单位
        </td>
        <td colspan="2" class="merge-content">
          土建单位
        </td>
        <td colspan="2" class="merge-content">
          检测单位
        </td>
        <td colspan="2" class="merge-content">
          用户签字
        </td>
      </tr>
      <tr>
          <td colspan="2" class="sign">
            <img class="sign_img" v-if="selectdata.f_build_sign" :src="selectdata.f_build_sign" alt="">
            <img class="replace_img" v-else src="../img/R-C.jpg" alt="">
          </td>

          <td colspan="2" class="sign">
            <img class="sign_img" v-if="selectdata.f_construct_sign" :src="selectdata.f_construct_sign" alt="">
            <img class="replace_img" v-else src="../img/R-C.jpg" alt="">
          </td>

          <td colspan="2" class="sign">
            <img class="sign_img" v-if="selectdata.f_supervisor_sign" :src="selectdata.f_supervisor_sign" alt="">
            <img class="replace_img" v-else src="../img/R-C.jpg" alt="">
          </td>

          <td colspan="2" class="sign">
            <img class="sign_img" v-if="selectdata.f_engineering_sign" :src="selectdata.f_engineering_sign" alt="">
            <img class="replace_img" v-else src="../img/R-C.jpg" alt="">
          </td>

          <td colspan="2" class="sign">
            <img class="sign_img" v-if="selectdata.f_check_sign" :src="selectdata.f_check_sign" alt="">
            <img class="replace_img" v-else src="../img/R-C.jpg" alt="">
          </td>

          <td colspan="2" class="sign">
            <img class="sign_img" v-if="selectdata.f_construction_sign"  :src="selectdata.f_construction_sign" alt="">
            <img class="replace_img" v-else src="../img/R-C.jpg" alt="">
          </td>
        </tr>
      </table>

    </table>
  </div>

  <apply-print-element v-show="false" v-ref:print id='printBuildOrder' styleid='printBuildOrderStyle'
                 top='10' left='30' width='100%' height='100%' :type="type">
  </apply-print-element>

</template>

<script>
import { isEmpty } from '../../../Util'
import {HttpResetClass} from 'vue-client'

// eslint-disable-next-line no-extend-native
Date.prototype.Format = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'H+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  // eslint-disable-next-line curly
  for (var k in o)
    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  return fmt
}
export default {
  title: '施工安装通知单',
  props: {
    selectdata: {
      type: Object
    },
    type: {
      type: String
    }
  },
  data () {
    return {
      showModal: false,
      remark: '图纸一份，料单一份。如不具备通气条件，工单请勿返回，返回均视为可通气'

    }
  },
  ready () {
  },
  methods: {
    print (index) {
      if (index) {
        this.selectdata = index
      }
      console.log('测试1122', this.selectdata)
      this.$refs.print.PrintTable()
    }
  },
  computed: {
  },
  watch: {
    'selectdata'(val) {
      console.log('观察blodid1', this.selectdata)
    }
  }
}
</script>

<style scoped>
.control-label-justify {
  display: inline-block;
  vertical-align: top;
  width: 130px;
  text-align: justify;
  font-family: PingFang-SC-Bold;
}

.control-label-justify::after {
  content: "";
  display: inline-block;
  width: 100%;
  overflow: hidden;
  height: 0;
}
</style>
