<template>
  <div class="project-detail-container">
    <div class="project-detail-inner">
      <div class="project-header-container">
        <!-- 项目名称 logo -->
        <div class="prject-icon-and-title">
          <img src="@/assets/images/financing/head_icon.png" alt="">
          <div class="prject-title">{{projectDetailInfo.finProjectName ? projectDetailInfo.finProjectName : "-"}}</div>
        </div>
        <!-- 项目承接单位 -->
        <div class="project-undertaking-unit-container">
          <span class="project-undertaking-unit-title">项目承接单位：</span>
          <span class="project-undertaking-unit">{{projectDetailInfo.contractOrgName ? projectDetailInfo.contractOrgName : "-"}}</span>
        </div>
      </div>

      <!-- tab切换部分 -->
      <div class="project-consulting-agency">
        <!-- tab切换栏 -->
        <dsk-tab-toggle v-model="currentList" :tabs="toggleTabs"></dsk-tab-toggle>

        <!-- tab切换容器 -->
        <div class="project-consulting-agency-inner">
          <!-- 工程基本信息 -->
          <basic-engineering-information v-if="currentList === 'project'" :projectDetailInfo="projectDetailInfo"></basic-engineering-information>
          <!-- 咨询机构结算信息 -->
          <consulting-agency v-if="currentList === 'consultingAgency'" :projectDetailInfo="projectDetailInfo"></consulting-agency>
        </div>

      </div>

    </div>
  </div>
</template>
<script>
import DskTabToggle from "@/components/DskTabToggle";
import { getgetConsultingOrgProjectDetailApi } from "@/api/consultingOrgManagement/index";
import { v4 } from 'uuid';
import BasicEngineeringInformation from "@/views/consultingOrgManagement/components/EnterpriseList/detail/basicEngineeringInformation";
import consultingAgency from "@/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency";
export default {
  name: "projectDetail",
  components: {
    DskTabToggle,
    BasicEngineeringInformation,
    consultingAgency
  },
  data() {
    return {
      currentList: "project",
      toggleTabs: [
        {
          value: "project",
          name: "工程基本信息",
          id: v4()
        },
        {
          value: "consultingAgency",
          name: "咨询机构结算信息",
          id: v4()
        }
      ],
      projectDetailInfo: {},
      projectKey: "",
      advisoryBodyCid: ""
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async init() {
      try {
        const advisoryBodyCid = this.$route.params?.advisoryBodyCid;
        const projectKey = this.$route.query?.projectKey;
        if (!advisoryBodyCid) return this.$message.error("缺少咨询机构ID");
        if (!projectKey) return this.$message.error("缺少项目主键");
        const detail = await getgetConsultingOrgProjectDetailApi({
          advisoryBodyCid,
          projectKey
        });
        if (detail.code == 200 && detail.data) {
          this.projectDetailInfo = { ...this.pprojectDetailInfo, ...detail.data };
        }
      } catch (error) {

      }
    }
  },
}
</script>
<style lang="scss" scoped>
.project-detail-container {
  width: 100%;
  height: 100%;
  padding: 16px 24px 24px 24px;
  box-sizing: border-box;
  overflow: hidden;

  .project-detail-inner {
    width: 100%;
    height: 100%;

    .project-header-container {
      width: 100%;
      height: 94px;
      background: #fff;
      border-radius: 4px;
      padding: 16px;
      box-sizing: border-box;

      .prject-icon-and-title {
        display: flex;
        align-items: center;

        & > img {
          width: 28px;
          height: 28px;
        }

        .prject-title {
          font-size: 16px;
          font-weight: bold;
          color: #232323;
          margin-left: 12px;
        }
      }

      .project-undertaking-unit-container {
        display: flex;
        align-items: center;
        margin-top: 16px;

        .project-undertaking-unit-title {
          font-size: 14px;
          font-weight: 400;
          color: rgba(35, 35, 35, 0.4);
        }

        .project-undertaking-unit {
          color: rgba(35, 35, 35, 0.8);
          font-size: 14px;
          font-weight: 400;
          margin-left: 8px;
        }
      }
    }

    .project-consulting-agency {
      width: 100%;
      height: calc(100% - 110px);
      margin-top: 16px;

      .project-consulting-agency-inner {
        width: 100%;
        height: calc(100% - 47px);
      }
    }
  }
}
</style>
