<template>
  <div class="project-cost-ledger-detail">
    <div class="project-cost-ledger-detail-inner">
      <project-detail-header :detail-info="detailInfo" :current="current"
        :breadCrumbTree="createProjectBreadCrumbTree(toggleTabs)"></project-detail-header>
      <!-- tab切换栏 -->
      <dsk-tab-toggle v-model="current" :tabs="toggleTabs" @tabToggle="tabToggle" :disabled="tabsDisabled"></dsk-tab-toggle>
      <!-- tab切换组件容器 -->
      <div class="project-cost-ledger-detail-module">
        <!-- 放入组件 v-if current == ‘xxxx’ 详情变量 this.detailInfo 需要深度监听-->

        <!-- 工程项目信息 -->
        <engineering-information v-if="current == 'basicEngineeringInformation'" :project-detail-info="detailInfo"></engineering-information>

        <!-- 直接费成本 -->
        <direct-cost v-if="current == 'directCost'" :project-detail-info="detailInfo"></direct-cost>

        <!-- 工料汇总 -->
        <feed-summary v-if="current == 'feedSummary'" :project-id="projectId" :project-detail-info="detailInfo"></feed-summary>

        <!--措施项目-->
        <measure-items v-if="current == 'measureItem'" :project-id="projectId" :project-detail-info="detailInfo"></measure-items>

        <!-- 其他项目 -->
        <other-projects v-if="current == 'otherItems'" :project-detail-info="detailInfo"></other-projects>

        <!-- 盈亏分析对比 -->
        <profit-Loss v-if="current == 'profitAndLoss'" :project-id="projectId" :project-detail-info="detailInfo"></profit-Loss>

        <!-- 现场经费 -->
        <field-expenses v-if="current == 'fieldExpenses'" :project-id="projectId" :project-detail-info="detailInfo"></field-expenses>
      </div>
    </div>
  </div>
</template>
<script>
import ProjectDetailHeader from "@/views/projectCostLedger/detail/components/ProjectDetailHeader";
import DskTabToggle from "@/components/DskTabToggle";
// 工程项目信息
import EngineeringInformation from "@/views/projectCostLedger/detail/components/EngineeringInformation";
// 直接费成本
import DirectCost from "@/views/projectCostLedger/detail/components/DirectCost";
// 工料汇总
import FeedSummary from "@/views/projectCostLedger/detail/components/FeedSummary";
// 措施费用
import MeasureItems from "@/views/projectCostLedger/detail/components/MeasureItems";
// 其他项目
import OtherProjects from "@/views/projectCostLedger/detail/components/OtherProjects";
// 盈亏分析对比
import ProfitLoss from "@/views/projectCostLedger/detail/components/ProfitLoss";
// 现场经费
import FieldExpenses from "@/views/projectCostLedger/detail/components/FieldExpenses";
import { v4 } from "uuid";
import { cloneDeep } from "lodash-es";
import { getProjectDetailApi } from "@/api/projectCostLedger";
export default {
  name: "projectCostLedgerDetail",
  components: {
    ProjectDetailHeader,
    DskTabToggle,
    FeedSummary,
    EngineeringInformation,
    DirectCost,
    OtherProjects,
    ProfitLoss,
    MeasureItems,
    FieldExpenses
  },
  data() {
    return {
      projectId: "",
      current: "",
      // 详情信息变量
      detailInfo: {},
      tabsDisabled: false,
      toggleTabs: [
        {
          value: "basicEngineeringInformation",
          name: "工程项目信息",
          id: v4()
        },
        {
          value: "directCost",
          name: "直接费成本",
          cbType: 0,
          id: v4()
        },
        {
          value: "feedSummary",
          name: "工料汇总",
          cbType: 1,
          id: v4()
        },
        {
          name: "措施项目",
          value: "measureItem",
          cbType: 2,
          id: v4()
        },
        {
          name: "其他项目",
          value: "otherItems",
          cbType: 3,
          id: v4()
        },
        {
          name: "现场经费",
          value: "fieldExpenses",
          cbType: 4,
          id: v4()
        },
        {
          name: "成本汇总",
          value: "cost",
          cbType: 5,
          id: v4()
        },
        {
          name: "盈亏分析对比",
          value: "profitAndLoss",
          cbType: 1,
          id: v4()
        }
      ],
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    // 注销事件订阅
    this.$off("refreshDetail");
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async init() {
      try {
        // 监听组件emit事件订阅 需要刷新数据
        this.$on("refreshDetail", this.getProjectDetail);
        await this.getProjectQuery();
      } catch (error) {

      }
    },
    createProjectBreadCrumbTree(tabs) {
      try {
        const _tempArray = cloneDeep(tabs.map(item => {
          item.path = item.value;
          item.breadcrumbName = item.name;
          return item;
        }));
        // 创建树形结构信息
        const _temp = {
          breadcrumbName: "项目成本台账",
          childrenBreadCrumb: [{
            breadcrumbName: "详情",
            path: "detail",
            triggerHandle: false,
            childrenBreadCrumb: _tempArray
          }],
        };
        return [_temp];
      } catch (error) {
        console.log(error);
      }
    },
    async getProjectQuery() {
      try {
        this.tabsDisabled = true;
        const { query } = this.$route;
        if (!query.projectId) {
          this.$message.error("缺少项目id");
          this.tabsDisabled = true;
          return;
        };
        this.projectId = query.projectId;
        // 获取详情 保证详情获取完毕 再执行tab命中 进行生命周期
        await this.getProjectDetail(query.projectId);
        if (query.current) {
          this.current = query.current;
        } else {
          // 默认命中工程项目信息
          this.current = "basicEngineeringInformation";
        };
        this.setCbType(this.current);
        this.tabsDisabled = false;
      } catch (error) {
        console.log(error);
      }
    },
    async getProjectDetail(projectId) {
      try {
        const detail = await getProjectDetailApi(projectId);
        if (detail.code == 200 && detail.data) {
          if (detail.data.id) detail.data["projectId"] = detail.data.id;
          this.detailInfo = detail.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    getCurrentTab(current) {
      if (current) {
        const result = this.toggleTabs.find(item => item.value == current);
        return result;
      }
    },
    setCbType(current) {
      if (!current) {
        this.$delete(this.detailInfo, "cbType");
        return;
      }
      const _temp = this.getCurrentTab(current);
      if (_temp && (_temp.cbType ?? false)) {
        this.$set(this.detailInfo, "cbType", _temp.cbType);
      }
    },
    // 当前命中的current
    tabToggle(value, valueCurrentObj) {
      this.setCbType(value);
    }
  },
}
</script>
<style lang="scss" scoped>
.project-cost-ledger-detail {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  box-sizing: border-box;

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

    ::v-deep .dsk-tab-toggle {
      height: 57px;

      .dsk-tab-items-container .dsk-tab-items-container-inner .dsk-tab-item {
        align-items: unset;
        padding-top: 20px;
        .dsk-tab-item-name {
          font-size: 14px;
          line-height: 22px;
        }
      }

      .dsk-tab-sliding-bar {
        border-radius: 8px;
        bottom: 1px;
      }
    }

    .project-cost-ledger-detail-module {
      width: 100%;
      height: calc(100% - 118px - 57px);
      box-sizing: border-box;
      overflow: auto;
    }
  }
}
</style>
