<template>
  <div class="consulting-agency-container">
    <el-form :model="comProjectDetailInfo" :rules="rules" :inline-message="false" class="basic-engineering-information-inner">
      <!-- 基础信息 -->
      <div class="project-basic-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>
              <!-- <transition mode="out-in" name="edit-fade"> -->
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBody && comProjectDetailInfo.advisoryBody.advisoryBodyName ? comProjectDetailInfo.advisoryBody.advisoryBodyName : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify">
                <el-input v-model="comProjectDetailInfo.advisoryBody.advisoryBodyName" clearable v-focus></el-input>
              </el-form-item>
              <!-- </transition> -->
            </td>
            <td class="table-key">法人代表</td>
            <td>
              {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
            </td>
          </tr>
          <tr>
            <!-- <td class="table-key">法人联系电话</td>
            <td>
              {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
            </td> -->
            <td class="table-key">注册地址</td>
            <td colspan="3">
              {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
            </td>
          </tr>
        </table>
      </div>
      <!-- 项目联系人 -->
      <div class="project-contact">
        <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.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.projectLeader ? comProjectDetailInfo.advisoryBodyProject.projectLeader : "-"}}
            </td>
            <td class="table-key">项目负责人专业</td>
            <td>
              {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.projectLeaderMajor ? comProjectDetailInfo.advisoryBodyProject.projectLeaderMajor : "-"}}
            </td>
          </tr>
          <tr>
            <td class="table-key">联系电话</td>
            <td colspan="3">
              {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.projectLeaderPhone ? comProjectDetailInfo.advisoryBodyProject.projectLeaderPhone : "-"}}
            </td>
          </tr>
        </table>
      </div>
      <!-- 项目结算信息 -->
      <div class="project-settlement-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>
              {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.settleStartTime ? comProjectDetailInfo.advisoryBodyProject.settleStartTime : "-"}}
            </td>
            <td class="table-key">结算完成时间</td>
            <td>
              {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.settleFinishTime ? comProjectDetailInfo.advisoryBodyProject.settleFinishTime : "-"}}
            </td>
          </tr>
          <tr>
            <td class="table-key">是否为终审单位</td>
            <td colspan="3">
              {{comProjectDetailInfo.advisoryBodyProject && statusCheck(comProjectDetailInfo.advisoryBodyProject.isFinalJudgeUnit) ? statusCheck(comProjectDetailInfo.advisoryBodyProject.isFinalJudgeUnit) : "-"}}
            </td>
          </tr>
        </table>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "consultingAgency",
  props: {
    projectDetailInfo: Object,
    isModify: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.querySelector(".el-input__inner").focus();
      }
    }
  },
  watch: {
    projectDetailInfo: {
      handler(newValue, oldValue) {
        this.comProjectDetailInfo = JSON.parse(JSON.stringify(newValue));
        this.oldComProjectDetailInfo = JSON.parse(JSON.stringify(oldValue));
      },
      deep: true
    },
    isModify: {
      handler(newValue) {
        this.comIsModify = newValue;
      }
    }
  },
  data() {
    return {
      comIsModify: this.isModify,
      comProjectDetailInfo: JSON.parse(JSON.stringify(this.projectDetailInfo)),
      oldComProjectDetailInfo: JSON.parse(JSON.stringify(this.projectDetailInfo)),
      rules: {

      },
      tableKeyWidth: 0
    };
  },
  //可访问data属性
  created() {
    this.setTableKeyWidth();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    statusCheck(status) {
      if (status == "0") {
        return "是";
      }
      if (status == "1") {
        return "否";
      }
      return "";
    },
    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) {

      }
    },
    cancelModify() {
      this.comProjectDetailInfo = JSON.parse(JSON.stringify(this.oldComProjectDetailInfo));
    }
  },
}
</script>
<style lang="scss" scoped>
.consulting-agency-container {
  width: 100%;
  height: 100%;
  background: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  overflow: auto;

  ::v-deep .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;
        position: relative;

        .normal-value {
          vertical-align: middle;
          line-height: 22px;
        }

        .el-form-item {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          margin-bottom: 0px;
          z-index: 9;

          .el-form-item__content {
            height: 100%;
            font-size: 12px;
            line-height: unset;

            .el-input {
              height: 100%;
              font-size: 12px;
            }

            .el-input__inner {
              height: 40px;
              line-height: 40px;
              border-radius: unset;
              border-color: transparent;
              color: #232323;
              font-size: 12px;
              font-weight: 400;
              padding-left: 12px;
              outline: unset;
              box-sizing: border-box;

              &:focus {
                border: 1px solid #0081ff;
              }
            }
          }
        }
      }

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

    .project-contact,
    .project-settlement-information {
      margin-top: 24px;
    }
  }
}
</style>
