<template>
  <div class="project-cost-ledger-detail-header">
    <div class="project-cost-ledger-detail-header-inner" @click="handleDown">
      <project-bread-crumb :current="current" :breadCrumbTree="breadCrumbTree" @breadCrumbTrigger="breadCrumbTrigger"></project-bread-crumb>
      <!-- 项目名称 -->
      <div class="project-detail-header-name">
        <div class="name">
          {{comDetailInfo.projectName ? comDetailInfo.projectName : "-"}}
          <i :class="state ?'el-icon-arrow-up':'el-icon-arrow-down'" @click.stop="handleDown" v-if="current === 'directCost'" style="cursor: pointer;"></i>
          <div class="down-list" v-if="state" @click.stop>
            <project-side-menu :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" v-model="defaultActive"  @select="handleSelect">
              <template :slot="`${menuDetails.menuName}-${menuDetails.menuLevel}`">
                <img src="@/assets/images/projectCostLedger/icon_cost_detail_1.svg" alt="">
                <div class="project-sub-menu-title-text">{{menuDetails.menuName}}</div>
              </template>
            </project-side-menu>
          </div>
        </div>
      </div>
      <!-- 项目信息 -->
      <div class="project-detail-plate">
        <div class="detail-plate-item project-code">
        <!-- <div class="detail-plate-item project-code" v-if="isShowProjectCode.includes(current)"> -->
          <span class="plate-item-name">项目编码：</span>
          <span>{{comDetailInfo.ipmProjectNo ? comDetailInfo.ipmProjectNo : "-"}}</span>
        </div>
        <div class="detail-plate-item">
          <span class="plate-item-name">客户名称：</span>
          <span>{{comDetailInfo.merchantName ? comDetailInfo.merchantName : "-"}}</span>
        </div>
        <div class="detail-plate-item">
          <span class="plate-item-name">签订单位：</span>
          <span>{{comDetailInfo.signingUnit ? comDetailInfo.signingUnit : "-"}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ProjectBreadCrumb from "@/views/projectCostLedger/detail/components/ProjectBreadCrumb";
import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
import { getCbDirectExpenseMenuTreeApi} from "@/api/projectCostLedger";
import { EventBus } from '@/utils/eventBus.js';
export default {
  name: "projectDetailHeader",
  props: {
    current: String,
    breadCrumbTree: Array,
    detailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    ProjectBreadCrumb,ProjectSideMenu
  },
  watch: {
    detailInfo: {
      handler(newValue) {
        this.comDetailInfo = newValue ? newValue : {};
      }
    },
    current:{
      handler(newValue) {
        if(newValue === 'directCost'){
          // this.getCbDirectExpenseMenuTree(this.comDetailInfo.projectId)
        }
      }
    }
  },
  data() {
    return {
      isShowProjectCode: ["basicEngineeringInformation", "directCost", "feedSummary", "cost"],
      comDetailInfo: this.detailInfo ? this.detailInfo : {},
      defaultActive: "",
      menuTreeList: [],
      menuDetails:{},
      menuOptions: {
        nodeName: "menuName",
        nodeValue: "menuId",
        children : "childrenList"
      },
      menuId:'',
      state:false,
    };
  },
  //可访问data属性
  created() {
    EventBus.$on('handleDown', (newValue) => {
      this.state=newValue;
    });
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    breadCrumbTrigger(item) {
      if (item.path == "root") {
        this.$router.push("/projectCostLedger/list");
      }
    },
    async getCbDirectExpenseMenuTree(params) {
      try {
        const result = await getCbDirectExpenseMenuTreeApi(params);
        if (result.code == 200) {
          const _tempArray = result.data;
          this.menuDetails=_tempArray
          this.menuTreeList.push(_tempArray);
          const defaultCurrent = this.findMenuNode(this.menuTreeList, "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程");
          if (defaultCurrent) {
            this.defaultActive = defaultCurrent.menuId;
            this.menuId = defaultCurrent.menuId;
          }
          // this.getCbDirectExpenseList(defaultCurrent.menuId)
        }
      } catch (error) {

      }
    },
    handleDown(){
      console.log()
      this.state=!this.state;
      if(this.menuTreeList.length === 0){
        this.getCbDirectExpenseMenuTree(this.comDetailInfo.projectId)
      }
    },
    handleSelect(menuPath, menuPathArray){
      this.defaultActive=menuPath;
      this.menuId=menuPath
      this.state=false;
      EventBus.$emit('valueChanged', menuPath);
      // this.getCbDirectExpenseList(menuPath)
    },
    findMenuNode(tree, nodeName) {
      for (const item of tree) {
        if (item.menuName == nodeName && !item?.childrenList?.length) return item;
        if (item.childrenList instanceof Array) {
          const result = this.findMenuNode(item.childrenList, nodeName);
          if (result) return result;
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.project-cost-ledger-detail-header {
  width: 100%;
  height: 118px;
  /*overflow: hidden;*/
  background: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid #eeeeee;
  padding: 16px;
  box-sizing: border-box;

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

    .project-detail-header-name {
      line-height: 16px;
      margin-top: 16px;
      width: 100%;
      /*overflow: hidden;*/
      white-space: nowrap;
      text-overflow: ellipsis;
      font-family: Source Han Sans, Source Han Sans;
      font-size: 16px;
      color: #232323;
      font-weight: bold;
    }
    .name{
      position: relative;
      display: inline-block;
    }
    .down-list{
      min-width: 500px;
      min-height: 200px;
      position: absolute;
      left: 0;
      z-index: 99;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08),0px 2px 6px 0px rgba(0, 0, 0, 0.06),0px 4px 8px 2px rgba(0, 0, 0, 0.04);
      top:30px;
      background: #ffffff;
    }

    .project-detail-plate {
      display: flex;
      align-items: center;
      margin-top: 12px;

      .detail-plate-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 350;
        color: rgba(35, 35, 35, 0.8);
        line-height: 18px;
        margin-right: 24px;

        .plate-item-name {
          color: rgba(35, 35, 35, 0.4);
        }
      }
    }
  }
}
</style>
