<template>
  <div class="otherProjects-container">
    <div class="otherProjects-cont">
      <div class="left">
        <div class="left-menu">

        </div>
      </div>
      <div class="right-table">
        <div class="table-item">
          <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 || '--'}}{{scope.row.proportion ?  '%':''}}</div>
            </template>
          </tables>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Tables from "../../../../component/Tables"
export default {
  name: "directCost",
  components: {
    Tables,
  },
  data() {
    return {
      data:[
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isSkeleton:false,
      tableLoading:false,
      tableData:[
        {
          name:'技术质量管理类',
          number:'236',
          proportion:'64'
        },
        {
          name:'工程保险类',
          number:'336',
          proportion:'64'
        },
      ],
      forData: [
        {label: '其他项目费用', prop: 'name'},
        {label: '数量', prop: 'number',slot: true},
        {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,
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //分页
    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{
      width: 220px;
      height: 100%;
      .left-menu{
        width: 100%;
        height: 100%;
        border-right: 1px solid #eeeeee;
        overflow: auto;
      }
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .right-table{
      width: calc(100% - 220px);
      padding: 16px;
    }
  }
</style>
