<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" :default-active="defaultActive">
            <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">
        <div class="table-item" v-if="defaultActive ==='费用汇总'">
          <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 || '--'}}{{scope.row.proportion ?  '%':''}}</div>
            </template>
          </tables>
        </div>
        <div class="table-item" v-else>
          <tables
            v-if="!isSkeleton"
            :tableLoading="tableLoading"
            :tableData="tableData"
            :forData="forData1"
            :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>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="720px" append-to-body class="dialogVisible" title="单位换算">
      <el-tabs v-model="currentList">
        <el-tab-pane
          :key="index"
          v-for="(item, index) in toggleTabs"
          :label="item.name"
          :name="item.value"
        >
          {{item.content}}
        </el-tab-pane>
        <div class="detail-cont-tab">
          <div class="select">
            <el-select v-model="type1" placeholder="请选择">
              <el-option v-for="(item,index) in typeList" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
            </el-select>
            <i class="el-icon-sort icon"></i>
            <el-select v-model="type1" placeholder="请选择">
              <el-option v-for="(item,index) in typeList1" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
            </el-select>
          </div>
          <el-table
            :data="tableData1"
            default-expand-all
            border
            highlight-current-row
          >
            <el-table-column
              type="selection"
              width="50">
            </el-table-column>
            <el-table-column label="序号" width="50" align="left">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="成本科目" width="190" prop="cbkm"></el-table-column>
            <el-table-column label="物料验收系统本月用料" width="195" prop="wlyl"></el-table-column>
            <el-table-column label="换算后本月用料" prop="hsyl"></el-table-column>
          </el-table>
        </div>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary">保存结果</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Tables from "../../../../component/Tables"
  import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
  import { getProjectOtherMenuTreeApi,getProjectOtherStatistics } from "@/api/projectCostLedger";
export default {
  name: "directCost",
  components: {
    Tables,ProjectSideMenu
  },
  props: {
    // // 项目ID
    // projectId: {
    //   type: String,
    //   required: true,
    //   default: ""
    // },
    // // 详情信息
    // projectDetailInfo: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  data() {
    return {
      comProjectId:'',
      isSkeleton:false,
      tableLoading:false,
      tableData:[
        {
          name:'技术质量管理类',
          number:'236',
          proportion:'64'
        },
        {
          name:'工程保险类',
          number:'336',
          proportion:'64'
        },
      ],
      forData: [
        {label: '其他项目费用', prop: 'expenseName'},
        {label: '数量', prop: 'expenseValue'},
        {label: '占比', prop: 'proportion', slot: true},
      ],
      forData1: [
        {label: '清单内容', prop: 'name',minWidth:'215'},
        {label: '工作内容、做法/规格型号/施工现场配置说明', prop: 'number',minWidth:'302'},
        {label: '单位', prop: 'proportion',minWidth:'215'},
        {label: '不含税单价', prop: 'proportion',minWidth:'215'},
        {label: '不含税合价', prop: 'proportion',minWidth:'215'},
        {label: '税率（%）', prop: 'proportion',minWidth:'215'},
        {label: '含税合价', prop: 'proportion',minWidth:'215'},
        {label: '税金（元）', prop: 'proportion',minWidth:'215'},
        {label: '成本科目', prop: 'proportion',minWidth:'215'},
        {label: '税金类型', prop: 'proportion',minWidth:'215'},
        {label: '备注', prop: 'proportion',minWidth:'215'},
      ],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      tableDataTotal:2,
      defaultActive: "费用汇总",
      menuTreeList: [
        {
          id: "1",
          itemContent:"其他费",
          children: []
        }
      ],
      menuOptions: {
        nodeName: "itemContent",
        nodeValue: "itemContent",
      },
      dialogVisible:false,
      currentList: "type1",
      toggleTabs:[
        {
          value: "type1",
          name: "长度",
        },
        {
          value: "type2",
          name: "面积",
        },
        {
          value: "type3",
          name: "体积",
        },
        {
          value: "type4",
          name: "质量",
        },
        {
          value: "type5",
          name: "密度",
        },
      ],
      tableData1:[
        {
          cbkm:'标前成本',
          wlyl:'42000KG',
          hsyl:'42T'
        },
        {
          cbkm:'标前成本',
          wlyl:'42000KG',
          hsyl:'42T'
        },
        {
          cbkm:'标前成本',
          wlyl:'42000KG',
          hsyl:'42T'
        },
        {
          cbkm:'标前成本',
          wlyl:'42000KG',
          hsyl:'42T'
        },
      ],
      type1:'',
      type2:'',
      typeList:[],
      typeList1:[],
    };
  },
  watch: {
    // projectDetailInfo: {
    //   handler(newValue) {
    //     this.comProjectDetailInfo = newValue ? newValue : {};
    //     // this.init(this.comProjectDetailInfo);
    //   },
    //   deep: true,
    //   immediate: true
    // },
    // projectId: {
    //   handler(newValue) {
    //     this.comProjectId = newValue;
    //   },
    //   immediate: true
    // }
  },
  //可访问data属性
  created() {
    this.getProjectOtherMenuTreeApi('1762014527685136385')
    this.getProjectOtherStatistics('1762014527685136385')
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async getProjectOtherStatistics(params) {
      try {
        const result = await getProjectOtherStatistics(params);
        if (result.code == 200) {
          const _dataArray = result.data;
          this.tableData = _dataArray;
        }
      } catch (error) {

      }
    },
    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;
        }
      } catch (error) {

      }
    },
    open(menuPath, menuPathArray){
      console.log(menuPath)
      console.log(menuPathArray)
    },
    //分页
    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;
    }
  }
  .dialogVisible{
    ::v-deep .el-dialog {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      margin-top:0 !important;
      .el-dialog__body{
        flex:1;
        overflow: auto;
        padding:0;
        border-top: 1px solid #EEEEEE;
        border-bottom: 1px solid #EEEEEE;
        .select{
          margin-bottom: 16px;
        }
        .el-input{
          width: 316px !important;
        }
        .el-tabs__nav-wrap{
          padding: 0 16px;
        }
        .el-tabs__header{
          margin: 0;
        }
        .detail-cont-tab{
          padding: 24px 20px;
          .icon{
            transform: rotate(90deg);
            color:#0081FF;
            margin: 0 16px;
          }
        }
      }
      .el-dialog__footer{
        padding: 16px 20px;
      }
    }
  }
</style>
