<template>
  <div class="basic-engineering-information">
    <div class="basic-engineering-information-inner">
      <!-- 项目主体 -->
      <div class="project-subject">
        <div class="info-module-title"><span>项目主体</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">业主单位</td>
            <td>{{comProjectDetailInfo.ownerName ? comProjectDetailInfo.ownerName : "-"}}</td>
            <td class="table-key">工程承包单位</td>
            <td>{{comProjectDetailInfo.contractOrgName ? comProjectDetailInfo.contractOrgName : "-"}}</td>
          </tr>
          <tr>
            <td class="table-key">履约责任单位</td>
            <td>{{comProjectDetailInfo.ownerName ? comProjectDetailInfo.ownerName : "-"}}</td>
            <td class="table-key">咨询单位</td>
            <td>{{comProjectDetailInfo.advisoryBodyName ? comProjectDetailInfo.advisoryBodyName : "-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 工程概况 -->
      <div class="project-overview">
        <div class="info-module-title"><span>工程概况</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">国内外</td>
            <td>{{"-"}}</td>
            <td class="table-key">省市</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">投资来源</td>
            <td>{{"-"}}</td>
            <td class="table-key">项目承接类型</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">投资来源</td>
            <td>{{"-"}}</td>
            <td class="table-key">项目承接类型</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">合同签订日期</td>
            <td>{{"-"}}</td>
            <td class="table-key">合同总工期</td>
            <td>{{comProjectDetailInfo.contractWorkDays ?  `${comProjectDetailInfo.contractWorkDays}天` : "-"}}</td>
          </tr>
          <tr>
            <td class="table-key">开工日期方式</td>
            <td>{{"-"}}</td>
            <td class="table-key">开工具体时间</td>
            <td>{{comProjectDetailInfo.actualStartDate ? comProjectDetailInfo.actualStartDate : "-"}}</td>
          </tr>
          <tr>
            <td class="table-key">竣工具体方式</td>
            <td>{{"-"}}</td>
            <td class="table-key">竣工具体时间</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">工程类型大类</td>
            <td>{{"-"}}</td>
            <td class="table-key">工程类型明细</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">建筑高度</td>
            <td>{{comProjectDetailInfo.constructHeight ? `${comProjectDetailInfo.constructHeight }m`: "-"}}</td>
            <td class="table-key">建筑面积</td>
            <td>{{comProjectDetailInfo.buildingArea ? `${comProjectDetailInfo.buildingArea}㎡` : "-"}}</td>
          </tr>
          <tr>
            <td class="table-key">地上层数</td>
            <td>{{comProjectDetailInfo.noOfOverfloor ? `${comProjectDetailInfo.noOfOverfloor}层` : "-"}}</td>
            <td class="table-key">地下层数</td>
            <td>{{comProjectDetailInfo.noOfUnderfloor ? `${comProjectDetailInfo.noOfUnderfloor}层` : "-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 目标责任书 -->
      <div class="target-responsibility-letter">
        <div class="info-module-title"><span>目标责任书</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">预收益率</td>
            <td>{{comProjectDetailInfo.estiProfitRate ? `${comProjectDetailInfo.estiProfitRate}%` : "-"}}</td>
            <td class="table-key">预收益额</td>
            <td>{{comProjectDetailInfo.estiTtlProfit ? `${comProjectDetailInfo.estiTtlProfit}元` : "-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 条款内容 -->
      <div class="clause-content">
        <div class="info-module-title"><span>条款内容</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">合同金额</td>
            <td>{{"-"}}</td>
            <td class="table-key">自施部分</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">计价依据</td>
            <td>{{"-"}}</td>
            <td class="table-key">预收益率</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">业主批量申报日期</td>
            <td>{{"-"}}</td>
            <td class="table-key">批量时限</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">付款时限</td>
            <td colspan="3">{{"-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 工程预付款 -->
      <div class="advance-payment-for-construction">
        <div class="info-module-title"><span>工程预付款</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">工程预付款</td>
            <td>{{"-"}}</td>
            <td class="table-key">支付比例</td>
            <td>{{"-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 工程款项 -->
      <div class="advance-payment-for-construction">
        <div class="info-module-title"><span>工程款项</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">支付方式</td>
            <td>{{"-"}}</td>
            <td class="table-key">按节点支付比例</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">按月度支付比例</td>
            <td>{{"-"}}</td>
            <td class="table-key">审核期限</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">支付期限</td>
            <td>{{"-"}}</td>
            <td class="table-key">竣工累计支付</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">工程结算后累计支付</td>
            <td>{{"-"}}</td>
            <td class="table-key">保修金预留比例</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key lot">工程结算后累计支付</td>
            <td colspan="3">{{"-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 履约担保 -->
      <div class="performance-guarantee">
        <div class="info-module-title"><span>履约担保</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">担保形式</td>
            <td>{{"-"}}</td>
            <td class="table-key">担保额度</td>
            <td>{{"-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 竣工结算 -->
      <div class="completion-settlement">
        <div class="info-module-title"><span>竣工结算</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">竣工结算审核期限</td>
            <td>{{"-"}}</td>
            <td class="table-key">是否承诺放弃工程价款优先受偿权</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">是否以行为事实放弃工程价款优先受偿权</td>
            <td>{{"-"}}</td>
            <td class="table-key">工程拖期违约金比例</td>
            <td>{{"-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 工期拖期违约金上线 -->
      <div class="delay-period">
        <div class="info-module-title"><span>工期拖期违约金上线</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">有/无</td>
            <td>{{"-"}}</td>
            <td class="table-key">上线比例</td>
            <td>{{"-"}}</td>
          </tr>
        </table>
      </div>
      <!-- 其它信息 -->
      <div class="other-information">
        <div class="info-module-title"><span>其它信息</span></div>
        <table>
          <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup>
          <tr>
            <td class="table-key">是否分别签订执行和备案合同</td>
            <td>{{"-"}}</td>
            <td class="table-key">承包单位</td>
            <td>{{"-"}}</td>
          </tr>
          <tr>
            <td class="table-key">评审级别</td>
            <td>{{"-"}}</td>
            <td class="table-key">创建日期</td>
            <td>{{"-"}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "basicEngineeringInformation",
  props: {
    projectDetailInfo: Object
  },
  watch: {
    projectDetailInfo: {
      handler(newValue) {
        this.comProjectDetailInfo = newValue;
      },
      deep: true
    }
  },
  data() {
    return {
      comProjectDetailInfo: this.projectDetailInfo,
      tableKeyWidth: 0
    };
  },
  //可访问data属性
  created() {
    this.setTableKeyWidth();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async setTableKeyWidth() {
      try {
        await this.$nextTick();
        /** 
         * @type {HTMLDivElement}
        */
        const inner = this.$el.querySelector(".basic-engineering-information-inner");
        if (inner) {
          const td = parseInt((inner.offsetWidth - 140 * 2) / 2);
          this.tableKeyWidth = `${parseInt(parseFloat(td / inner.offsetWidth) * 100)}%`;
        }
      } catch (error) {

      }
    }
  },
}
</script>
<style lang="scss" scoped>
.basic-engineering-information {
  width: 100%;
  height: 100%;
  background: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  overflow: auto;

  .basic-engineering-information-inner {
    width: 100%;
    .info-module-title {
      line-height: 24px;
      color: #232323;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      & > span {
        display: inline-block;
        position: relative;
        padding-left: 8px;
        box-sizing: border-box;
        &::before {
          content: "";
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(35, 35, 35, 0.8);
          width: 2px;
          height: 14px;
        }
      }
    }
    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      &,
      th,
      td {
        border: 1px solid #e6eaf1;
        box-sizing: border-box;
      }

      td {
        padding: 9px 12px;
        line-height: 22px;
        color: #232323;
        font-size: 12px;
      }

      .table-key {
        background: #f0f3fa;
        color: rgba(35, 35, 35, 0.8);
        width: 140px;
        &.lot {
          height: 62px;
        }
      }
      .data-td {
        width: calc(100% - 140px);
      }
    }

    .project-overview,
    .target-responsibility-letter,
    .clause-content,
    .advance-payment-for-construction,
    .performance-guarantee,
    .completion-settlement,
    .delay-period,
    .other-information {
      margin-top: 24px;
    }
  }
}
</style>
