<template>
  <div class="project-info">
    <div class="title">基本信息</div>
    <div class="info">
      <div class="data long">
        <div class="label">工程名称：</div>
        <div class="value">{{ projectDetail.project_name }}</div>
      </div>
      <div class="data">
        <div class="label">建设性质：</div>
        <div class="value">{{ projectDetail.project_kind_name }}</div>
      </div>
      <div class="data long">
        <div class="label">工程地址：</div>
        <div class="value">{{ projectDetail.project_address }}</div>
      </div>
      <div class="data">
        <div class="label">受理日期：</div>
        <div class="value">{{ projectDetail.create_date }}</div>
      </div>
      <div class="data">
        <div class="label">工程进度：</div>
        <div class="value">{{ projectDetail.state_name }}</div>
      </div>
      <div class="data">
        <div class="label">工程属性：</div>
        <div class="value"></div>
      </div>

      <div class="data">
        <div class="label">工程建设规划许可证：</div>
        <div class="value">{{ projectDetail.licence_no }}</div>
      </div>

      <div class="data">
        <div class="label">施工许可证：</div>
        <div class="value">{{ projectDetail.sg_no }}</div>
      </div>

      <div class="data">
        <div class="label">工程范围：</div>
        <div class="value">{{ projectDetail.area1 }}</div>
      </div>

      <div class="data">
        <div class="label">工程投资性质：</div>
        <div class="value">{{ projectDetail.invest_type_name }}</div>
      </div>

      <div class="data">
        <div class="label">工程类型：</div>
        <div class="value">{{ projectDetail.project_type_name }}</div>
      </div>
      <div class="data">
        <div class="label">结构类型：</div>
        <div class="value">{{ projectDetail.structure_name }}</div>
      </div>
      <div class="data">
        <div class="label">基础类型：</div>
        <div class="value">{{ projectDetail.project_base_name }}</div>
      </div>
      <div class="data">
        <div class="label">层高（最高层）：</div>
        <div class="value">{{ projectDetail.floor_kind }}</div>
      </div>
      <div class="data">
        <div class="label">单层最高高度：</div>
        <div class="value">{{ projectDetail.monolayer_height }}</div>
      </div>

      <div class="data">
        <div class="label">总层高：</div>
        <div class="value">{{ projectDetail.buildind_height }}</div>
      </div>

      <div class="data">
        <div class="label">总面积：</div>
        <div class="value">{{ projectDetail.area_covered }}</div>
      </div>
      <div class="data">
        <div class="label">地上面积：</div>
        <div class="value">{{ projectDetail.ground_area }}</div>
      </div>
      <div class="data">
        <div class="label">地下面积：</div>
        <div class="value">{{ projectDetail.underground_area }}</div>
      </div>
      <div class="data">
        <div class="label">总用地面积：</div>
        <div class="value">{{ projectDetail.area_covered }}</div>
      </div>
      <div class="data">
        <div class="label">造价（万元）：</div>
        <div class="value">{{ projectDetail.project_currency }}</div>
      </div>
      <div class="data">
        <div class="label">质量创优目标：</div>
        <div class="value">{{ projectDetail.quality_target }}</div>
      </div>
      <div class="data">
        <div class="label">安全管理目标：</div>
        <div class="value">{{ projectDetail.safety_target }}</div>
      </div>
      <div class="data">
        <div class="label">红色工地：</div>
        <div class="value">{{ projectDetail.red_site ? "是" : "否" }}</div>
      </div>
      <div class="data">
        <div class="label">附件表：</div>
        <div class="value">
          <span class="blue" @click="openPdf(projectDetail.red_site_file_url)">
            {{ projectDetail.red_site_file }}
          </span>
        </div>
      </div>
      <div class="data">
        <div class="label">设计文件审查机构：</div>
        <div class="value">{{ projectDetail.censor_name }}</div>
      </div>
      <div class="data">
        <div class="label">审查报告编号：</div>
        <div class="value">{{ projectDetail.censor_report_no }}</div>
      </div>
      <div class="data">
        <div class="label">图审单位资质等级：</div>
        <div class="value">{{ projectDetail.censor_level }}</div>
      </div>
      <div class="data">
        <div class="label">监理标段编号：</div>
        <div class="value">{{ projectDetail.jl_segment_id }}</div>
      </div>
      <div class="data">
        <div class="label">施工标段编号：</div>
        <div class="value">{{ projectDetail.sg_segment_id }}</div>
      </div>
      <div class="data">
        <div class="label">分拆单位数：</div>
        <div class="value">{{ projectDetail.split_units }}</div>
      </div>
      <div class="data">
        <div class="label">设计使用年限：</div>
        <div class="value">{{ projectDetail.fix_year_text }}</div>
      </div>
      <div class="data">
        <div class="label">工程用途：</div>
        <div class="value">{{ projectDetail.proj_purpose }}</div>
      </div>
      <div class="data">
        <div class="label">保险公司：</div>
        <div class="value">{{ projectDetail.insurance_company }}</div>
      </div>
      <div class="data">
        <div class="label">保险费：</div>
        <div class="value">{{ projectDetail.insurance_premium }}</div>
      </div>
      <div class="data">
        <div class="label">是否节能工程：</div>
        <div class="value">{{ projectDetail.issave ? "是" : "否" }}</div>
      </div>
      <div class="data">
        <div class="label">是否财政工程：</div>
        <div class="value">{{ projectDetail.isfinance ? "是" : "否" }}</div>
      </div>
      <div class="data">
        <div class="label">是否重点工程：</div>
        <div class="value">{{ projectDetail.iskeypro ? "是" : "否" }}</div>
      </div>
      <div class="data">
        <div class="label">工程监管类别：</div>
        <div class="value">{{ projectDetail.supervise_kind }}</div>
      </div>
      <div class="data">
        <div class="label">注册登记资料：</div>
        <div class="value">{{ projectDetail.reg_data }}</div>
      </div>
      <div class="data">
        <div class="label">是否有超危分部分项工程：</div>
        <div class="value">{{ projectDetail.isdanger ? "是" : "否" }}</div>
      </div>
      <div class="data">
        <div class="label">工程计划时间：</div>
        <div class="value">
          {{ projectDetail.start_date }}~{{ projectDetail.complete_date }}
        </div>
      </div>
    </div>
    <template
      v-if="projectDetail.unitList && projectDetail.unitList.length > 0"
    >
      <div class="title">参建单位</div>
      <div class="info">
        <template v-for="unit in projectDetail.unitList">
          <div class="data" :key="unit.id + 'project_name'">
            <div class="label">{{ unit.unit_kind_title }}：</div>
            <div class="value">{{ unit.unit_name }}</div>
          </div>
          <div class="data" :key="unit.id + 'role_name'">
            <div class="label">岗位名称：</div>
            <div class="value">{{ unit.post_name }}</div>
          </div>
          <div class="data" :key="unit.id + 'contact'">
            <div class="label">联系人：</div>
            <div class="value">{{ unit.contacts }}</div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
import { getProjectDetail } from "@/api/index";
export default {
  props: {
    projectId: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      projectDetail: {},
    };
  },
  methods: {
    getProjectDetail() {
      getProjectDetail(this.projectId).then((res) => {
        this.projectDetail = res.data;
      });
    },
    openPdf(url) {
      window.open(url);
    },
  },
  mounted() {
    console.log(this.projectId);
    this.getProjectDetail();
  },
};
</script>
<style lang="less" scoped>
.project-info {
  padding-top: 16px;
}
.title {
  background: #0e4092;
  line-height: 36px;
  padding-left: 22px;
  color: #fff;
  font-size: 14px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 16px;
    background: #f99b2d;
    left: 10px;
    top: 10px;
  }
}
.info {
  background: #072c5d;
  padding: 12px 20px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  .data {
    width: calc(100% / 3);
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 28px;
    &.long {
      width: calc(100% / 3 * 2);
    }
    .label {
      color: rgba(189, 201, 214, 1);
    }
    .value {
      color: #fff;
    }
  }
}

.blue {
  color: #0178ff;
  &:hover {
    cursor: pointer;
  }
}
</style>