<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切换栏 -->
        <div class="project-consulting-tab-container">
          <dsk-tab-toggle v-model="currentList" :tabs="toggleTabs"></dsk-tab-toggle>
          <!-- 编辑按钮 展示咨询机构结算信息显示 -->
          <transition name="fade" appear mode="out-in">
            <div class="edit-project-detail-container" v-if="currentList === 'consultingAgency' && !isModify" :key="'edit-project'">
              <el-button type="primary" @click="editProjectDetail">编辑信息</el-button>
            </div>
            <div class="save-project-detail-container" v-if="currentList === 'consultingAgency' && isModify" :key="'save-project'">
              <el-button type="primary" @click="saveProjectDetail">保存</el-button>
              <el-button @click="cancelSave">取消</el-button>
            </div>
          </transition>
        </div>

        <!-- 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" :isModify="isModify"
            ref="consultingAgency" @editComProjectDetailSuccess="editComProjectDetailSuccess"></consulting-agency>
        </div>

      </div>

    </div>
  </div>
</template>
<script>
import DskTabToggle from "@/components/DskTabToggle";
import { getConsultingOrgProjectDetailApi, updateConsultingDetailApi } from "@/api/consultingOrgManagement";
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: "",
      // 咨询机构结算信息 修改
      isModify: false
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async init() {
      try {
        const advisoryBodyCid = this.$route.query?.advisoryBodyCid;
        const projectKey = this.$route.query?.projectKey;
        // if (!advisoryBodyCid) return this.$message.error("缺少咨询机构ID");
        if (!projectKey) return this.$message.error("缺少项目主键");
        const detail = await getConsultingOrgProjectDetailApi({
          advisoryBodyCid,
          projectKey
        });
        if (detail.code == 200 && detail.data) {
          this.projectDetailInfo = { ...this.projectDetailInfo, ...detail.data };
        }
      } catch (error) {
        console.log(error);
      }
    },
    editProjectDetail() {
      this.isModify = true;
    },
    saveProjectDetail() {
      this.$refs["consultingAgency"].updateConsultingDetail();
    },
    // 编辑成功提交信息
    async editComProjectDetailSuccess(data) {
      try {
        const result = await updateConsultingDetailApi(data);
        if (result.code) {
          this.$message.success("更新咨询机构结算信息成功");
          this.isModify = false;
        }
      } catch (error) {

      }
    },
    cancelSave() {
      this.isModify = false;
      this.$refs["consultingAgency"].cancelModify();
    },
  },
}
</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-tab-container {
        position: relative;

        .edit-project-detail-container {
          position: absolute;
          right: 16px;
          top: 50%;
          transform: translateY(-50%);

          & > button {
            height: 32px;
            line-height: 32px;
            padding: 0px 16px;
            box-sizing: border-box;
            background-color: #0081ff;
            border-color: #0081ff;
          }
        }

        .save-project-detail-container {
          position: absolute;
          right: 16px;
          top: 50%;
          transform: translateY(-50%);

          & > button {
            height: 32px;
            line-height: 32px;
            padding: 0px 16px;
            box-sizing: border-box;

            &.el-button--primary {
              background-color: #0081ff;
              border-color: #0081ff;
            }
          }
        }
      }

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