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

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

        <!-- 直接费成本 -->
        <direct-cost v-if="current == 'directCost'"></direct-cost>

        <!-- 工料汇总 -->
        <feed-summary v-if="current == 'feedSummary'"></feed-summary>

      </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 { v4 } from "uuid";
import { cloneDeep } from "lodash-es";
export default {
  name: "projectCostLedgerDetail",
  components: {
    ProjectDetailHeader,
    DskTabToggle,
    FeedSummary,
    EngineeringInformation,
    DirectCost
  },
  data() {
    return {
      projectID: "",
      current: "",
      // 详情信息变量
      detailInfo: {},
      toggleTabs: [
        {
          value: "basicEngineeringInformation",
          name: "工程项目信息",
          id: v4()
        },
        {
          value: "directCost",
          name: "直接费成本",
          id: v4()
        },
        {
          value: "feedSummary",
          name: "工料汇总",
          id: v4()
        },
        {
          name: "措施项目",
          value: "measureItem",
          id: v4()
        },
        {
          name: "其他项目",
          value: "otherItems",
          id: v4()
        },
        {
          name: "现场经费",
          value: "fieldExpenses",
          id: v4()
        },
        {
          name: "成本汇总",
          value: "cost",
          id: v4()
        },
        {
          name: "盈亏分析对比",
          value: "profitAndLoss",
          id: v4()
        }
      ],
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    // 注销事件订阅
    this.$off("refreshDetail");
  },
  //计算集
  computed: {
    createProjectBreadCrumbTree() {
      try {
        const _tempArray = cloneDeep(this.toggleTabs.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);
      }
    }
  },
  //方法集
  methods: {
    async init() {
      try {
        // 监听组件emit事件订阅 需要刷新数据
        this.$on("refreshDetail", this.getProjectDetail);
        await this.getProjectQuery();
      } catch (error) {

      }
    },
    async getProjectQuery() {
      try {
        const { query } = this.$route;
        // if (!query.projectID) return this.$message.error("缺少项目id");
        this.projectID = query.projectID;
        if (query.current) {
          this.current = query.current;
        } else {
          // 默认命中工程项目信息
          this.current = "basicEngineeringInformation";
        };
        await this.getProjectDetail(query.projectID);
      } catch (error) {
        console.log(error);
      }
    },
    async getProjectDetail(projectID) {
      try {

      } catch (error) {

      }
    },
    // 当前命中的current
    tabToggle(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>
