<template>
  <div class="otherProjects-container">
    <div class="otherProjects-cont">
      <div class="left">
        <div class="left-side-menu">
          <project-side-menu :menuTree="menuTreeList" :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">
          <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>

    <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";
export default {
  name: "directCost",
  components: {
    Tables,ProjectSideMenu
  },
  data() {
    return {
      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,
      defaultActive: "",
      menuTreeList: [
        {
          nodeName: "其他费",
          id: "1",
          children: [
            {
              nodeName: "费用汇总",
              id: "1-1",
            },
            {
              nodeName: "技术质量管理类",
              id: "2-1",
            },
            {
              nodeName: "工程保险类",
              id: "3-1",
            },
            {
              nodeName: "履约担保、保函手续费、市场营...",
              id: "4-1",
            },
          ]
        },
      ],
      dialogVisible:true,
      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:[],
    };
  },
  //可访问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{
      .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>
