<template>
  <div class="otherProjects-container">
    <div class="otherProjects-cont">
      <div class="left">
        <div class="left-side-menu">
          <project-side-menu :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" v-model="defaultActive" @select="select">
            <template slot="其他费-1">
              <img src="@/assets/images/projectCostLedger/icon_cost_detail_5.svg" alt="">
              <div class="project-sub-menu-title-text">其他费</div>
            </template>
          </project-side-menu>
        </div>
      </div>
      <div class="right-table">
        <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
        <div class="table-item" v-if="defaultActiveTitle ==='费用汇总'">
          <tables
            v-if="!isSkeleton"
            :tableLoading="tableLoading"
            :tableData="tableData"
            :forData="forData"
            :MaxPage=500
            :tableDataTotal="tableDataTotal"
            :queryParams="queryParams"
            @handle-current-change="handleCurrentChange"
            @sort-change="sortChange"
          >
            <template slot="number" slot-scope="scope">
              <div>{{scope.row.number || '--'}}</div>
            </template>
            <template slot="proportion" slot-scope="scope">
              <div>{{scope.row.proportion || '--'}}</div>
            </template>
          </tables>
        </div>
        <div class="table-item" v-else>
          <tables
            v-if="!isSkeleton"
            :tableLoading="tableLoading"
            :tableData="tableData1"
            :forData="forData1"
            :MaxPage=500
            :tableDataTotal="tableDataTotal1"
            :queryParams="queryParams"
            @handle-current-change="handleCurrentChange"
            @sort-change="sortChange"
          >
            <template slot="number" slot-scope="scope">
              <div>{{scope.row.number || '--'}}</div>
            </template>
            <template slot="proportion" slot-scope="scope">
              <div>{{scope.row.proportion || '--'}}</div>
            </template>
          </tables>
        </div>
      </div>
    </div>


  </div>
</template>
<script>
  import Tables from "../../../../component/Tables"
  import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
  import { getProjectOtherMenuTreeApi,getProjectOtherStatistics,getProjectOtherList } from "@/api/projectCostLedger";
  import skeleton from '../../../../component/skeleton'
export default {
  name: "directCost",
  components: {
    Tables,ProjectSideMenu,skeleton
  },
  props: {
    // 项目ID
    // projectId: {
    //   type: String,
    //   required: true,
    //   default: ""
    // },
    // 详情信息
    projectDetailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      comProjectId:'',
      // 加载数据列表
      isSkeleton: true,
      tableLoading: false,
      tableData:[],
      tableDataTotal:0,
      forData: [
        {label: '其他项目费用', prop: 'expenseName'},
        {label: '数量', prop: 'expenseValue'},
        {label: '占比', prop: 'proportion', slot: true},
      ],
      forData1: [
        {label: '清单内容', prop: 'itemContent',minWidth:'220'},
        {label: '工作内容、做法/规格型号/施工现场配置说明', prop: 'workContent',minWidth:'302'},
        {label: '单位', prop: 'unit',minWidth:'115'},
        {label: '不含税单价', prop: 'unitPriceExcludingTax',minWidth:'115'},
        {label: '不含税合价', prop: 'totalPriceExcludeTax',minWidth:'115'},
        {label: '税率（%）', prop: 'taxRate',minWidth:'115'},
        {label: '含税合价', prop: 'totalPriceIncludingTax',minWidth:'115'},
        {label: '税金（元）', prop: 'taxAmount',minWidth:'115'},
        {label: '成本科目', prop: 'costSubject',minWidth:'160'},
        {label: '税金类型', prop: 'taxType',minWidth:'115'},
        {label: '备注', prop: 'remarks',minWidth:'200'},
      ],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      defaultActiveTitle: "费用汇总",
      defaultActive: "",
      menuTreeList: [
        {
          id: "1",
          itemContent:"其他费",
          children: []
        }
      ],
      menuOptions: {
        nodeName: "itemContent",
        nodeValue: "id",
        children : "children"
      },
      tableData1:[],
      tableDataTotal1:0,

    };
  },
  watch: {
    projectDetailInfo: {
      handler(newValue) {
        this.comProjectDetailInfo = newValue ? newValue : {};
        this.getProjectOtherMenuTreeApi(this.comProjectDetailInfo.projectId)
        // this.getProjectOtherStatistics('1762014527685136385')
        // this.init(this.comProjectDetailInfo);
      },
      deep: true,
      immediate: true
    },
    projectId: {
      handler(newValue) {
        this.comProjectId = newValue;
      },
      immediate: true
    }
  },

  //计算集
  computed: {

  },
  //方法集
  methods: {
    async getProjectOtherMenuTreeApi(params) {
      try {
        const result = await getProjectOtherMenuTreeApi(params);
        if (result.code == 200) {
          const _tempArray = result.data;
          _tempArray.unshift({id:"11",itemContent:"费用汇总"});
          this.menuTreeList[0].children = _tempArray;
          this.defaultActive='11';
          this.getProjectOtherStatistics(this.comProjectDetailInfo.projectId)
        }
      } catch (error) {

      }
    },
    async getProjectOtherStatistics(params) {
      try {
        const result = await getProjectOtherStatistics(params);
        if (result.code == 200) {
          const _dataArray = result.data;
          this.tableDataTotal=_dataArray.length;
          this.tableData = _dataArray;
          this.isSkeleton = false;
        }
      } catch (error) {

      }
    },
    select(menuPath, menuPathArray){
      this.defaultActive=menuPath;
      this.defaultActiveTitle=menuPathArray.nodeName;
      let param = {
        projectId:this.comProjectDetailInfo.projectId,
        parentId:menuPathArray.originData.id
      }
      if(menuPathArray.nodeName === '费用汇总'){
        this.getProjectOtherStatistics(this.comProjectDetailInfo.projectId)
      }else {
        getProjectOtherList(param).then(res=>{
          this.tableData1 = res.data;
          this.tableDataTotal1=res.data.length;
        })
      }
    },
    //分页
    handleCurrentChange(e){
      let params = this.formParams()
      params.pageNum = e
      this.queryParams.pageNum = e
      // this.handleQuery(params)
    },
    sortChange(){

    },

  },
}
</script>
<style lang="scss" scoped>
  .otherProjects-container {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    height: 100%;
    align-items: center;
    .otherProjects-cont{
      display: flex;
      width: 100%;
      height: 100%;
    }
    .left{
      .left-side-menu {
        width: 220px;
        min-width: 220px;
        height: 100%;
      }
    }
    .right-table{
      width: calc(100% - 220px);
      padding: 16px;
    }
  }
</style>
