<template>
  <div class="directCost-container">
    <div class="directCost-main">
      <div class="search">
        <el-select v-model="date" placeholder="请选择" clearable>
          <el-option v-for="(item,index) in datelist" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
        </el-select>
      </div>
      <div class="directCost-cont">
        <div class="left">
          <div class="left-menu">
            <el-menu class="project-menu-instance">
              <!--<el-submenu index="1" class="project-sub-menu-item">-->
              <!--<template slot="title">-->
              <!--<i class="el-icon-location icon"></i>-->
              <!--<span>宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程</span>-->
              <!--</template>-->
              <!--</el-submenu>-->
              <template v-for="(el,index) in menuList">
                <!-- 一级标题无子菜单 -->
                <el-menu-item v-if="!el.children" :index="el.path" :key="el.id">
                  <template slot="title">
                    <i class="el-icon-location icon"></i>
                    <span>{{el.name}}</span>
                  </template>
                </el-menu-item>
                <!-- 一级标题有子菜单 -->
                <el-submenu v-else :index="'index' + index" :key="el.id" class="project-sub-menu-item">
                  <template slot="title">
                    <i class="el-icon-location icon"></i>
                    <span>{{el.name}}</span>
                  </template>
                  <!-- 二级标题 -->
                  <el-menu-item :index="children.path" v-for="children in el.children" :key="children.id">
                    {{children.name}}
                  </el-menu-item>
                </el-submenu>
              </template>
            </el-menu>
          </div>
        </div>
        <div class="right-table">
          <div class="table-item">
            <el-table
              element-loading-text="Loading"
              :data="tableData"
              :row-class-name="tableRowClassName"
              row-key="id"
              v-horizontal-scroll="'hover'"
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left" fixed prop="index"></el-table-column>
              <el-table-column label="编码" width="130" prop="bm"></el-table-column>
              <el-table-column label="名称" width="230" prop="mc"></el-table-column>
              <el-table-column label="清单" width="130" prop="qd"></el-table-column>
              <el-table-column label="项目特征" width="340" prop="xmtz"></el-table-column>
              <el-table-column label="单位" width="130" prop="qd"></el-table-column>
              <el-table-column label="计划成本" align="center">
                <el-table-column prop="name" label="工程表达式" width="94"></el-table-column>
                <el-table-column prop="name" label="工程量" width="66"></el-table-column>
                <el-table-column prop="name" label="成本科目" width="80"></el-table-column>
                <el-table-column prop="name" label="招标控制单价" width="108"></el-table-column>
                <el-table-column prop="name" label="招标控制合价" width="108"></el-table-column>
                <el-table-column prop="name" label="不含税成本单价" width="122"></el-table-column>
                <el-table-column prop="name" label="不含税成本合计" width="122"></el-table-column>
                <el-table-column prop="name" label="成本税金合计" width="108"></el-table-column>
                <el-table-column prop="name" label="含税成本单价" width="108"></el-table-column>
                <el-table-column prop="name" label="含税成本合价" width="108"></el-table-column>
                <el-table-column prop="name" label="合价偏差" width="80"></el-table-column>
              </el-table-column>
              <el-table-column label="盈亏率" width="66" prop="qd"></el-table-column>
              <el-table-column label="标准费用项" width="94" prop="qd"></el-table-column>
              <el-table-column label="备注" width="114" prop="qd"></el-table-column>

              <template v-slot:append="{ row }">
                <tr class="custom-row">
                  <td colspan="100%">123456</td>
                </tr>
              </template>
            </el-table>
          </div>

        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="480px" append-to-body class="dialogVisible" title="增加费用项">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="addForm" label-width="107px">
        <el-form-item label="编码" prop="str">
          <el-input v-model="ruleForm.str" placeholder="请输入编码"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="mxmc">
          <el-input v-model="ruleForm.mxmc" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="计算规则" prop="jsgz">
          <el-input v-model="ruleForm.jsgz" placeholder="请输入计算规则"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="dw">
          <el-input v-model="ruleForm.dw" placeholder="请输入单位"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="dj">
          <el-input v-model="ruleForm.dj" placeholder="请输入单价"></el-input>
        </el-form-item>
        <el-form-item label="特征描述">
          <el-input type="textarea" v-model="ruleForm.str" placeholder="请输入特征描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary">确定增加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "directCost",
  components: {},
  data() {
    return {
      date:'2023年11月',
      datelist:[
        {
          dictValue:'2023年11月',
          dictLabel:'2023年11月',
        },
        {
          dictValue:'2023年12月',
          dictLabel:'2023年12月',
        },
        {
          dictValue:'2024年1月',
          dictLabel:'2024年1月',
        }
      ],
      tableData:[
        {
          bm:'010101002001',
          mc:'挖一般土石方（开挖方式支撑下）1',
          qd:'清',
          id:1,
          xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求',
          children:[
            {
              bm:'010101002001',
              mc:'挖一般土石方（开挖方式支撑下2）',
              qd:'专',
              id:111,
              xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求',

            },
            {
              bm:'010101002001',
              mc:'挖一般土石方（开挖方式支撑下2）',
              qd:'专',
              id:122,
              xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求',

            },
          ]
        },
        {
          bm:'010101002001',
          mc:'挖一般土石方（开挖方式支撑下）1',
          qd:'清',
          id:2,
          xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求',
          children:[
            {
              bm:'010101002001',
              mc:'挖一般土石方（开挖方式支撑下2）',
              qd:'专',
              id:11,
              xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求'

            },
            {
              bm:'010101002001',
              mc:'挖一般土石方（开挖方式支撑下2）',
              qd:'专',
              id:21,
              xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求'

            },
          ]
        },
      ],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      ruleForm:{

      },
      rules: {
        str: { required: true, message: '编码不能为空', trigger: 'blur' }, // 限制必填
        mxmc:{ required: true, message: '项目名称不能为空', trigger: 'blur' }, // 限制必填
        jsgz:{ required: true, message: '计算规则不能为空', trigger: 'blur' }, // 限制必填
        dw:{ required: true, message: '单位不能为空', trigger: 'blur' }, // 限制必填
        dj:{ required: true, message: '单价不能为空', trigger: 'blur' }, // 限制必填
      },
      dialogVisible:false,
      menuList:[
        {
          children: [
            {
              href: "暂无",
              id: "2",
              name: "测试2",
              parentId: "1",
              children: [
                {
                  href: "暂无",
                  id: "3",
                  name: "测试3",
                  parentId: "2",
                  children: [
                    {
                      href: "暂无",
                      id: "4",
                      name: "测试4",
                      parentId: "3",
                      children: [],
                    },
                  ],
                },
              ],
            },
          ],
          id: "1",
          name: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程",
          parentId: "0",
        },
      ],
    };
  },
  //可访问data属性
  created() {
    this.tableData.forEach((item,index)=>{
      item.index=index+1
    })
    console.log(this.tableData)
    const newData = [...this.tableData]; // 创建一个新的数组，避免修改原始数据
    const totalRow = { bm: "增加费用项" }; // 合计行的数据

    // 计算合计值
    this.tableData.forEach(item => {
      totalRow.column2 += item.column2;
      totalRow.column3 += item.column3;
    });
    // 将合计行插入到正确的位置
    newData.splice(1, 0, totalRow); // 假设将合计行插入到第二行的位置
    // this.tableData=newData
  },
  mounted() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.qd === '清') {
        return 'color1';
      } else{
        return 'color2';
      }
      return '';
    },

  },
}
</script>
<style lang="scss" scoped>
  .directCost-container {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    height: 100%;
    align-items: center;
    .directCost-main{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .search{
      height: 64px;
      border-bottom: 1px solid #EEEEEE;
      ::v-deep .el-select{
        width: 140px;
        height: 32px;
        border-radius: 2px 2px 2px 2px;
        margin: 16px;
        .el-input--medium{
          .el-input__inner{
            height: 32px;
            line-height: 32px;
          }
          .el-input__suffix{
            top: 2px;
          }
        }
      }
    }
    .directCost-cont{
      display: flex;
      height: 100%;
    }
    .left{
      width: 220px;
      height: 100%;
      .left-menu{
        width: 100%;
        height: 100%;
        overflow: auto;
        ::v-deep .project-menu-instance {
          width: 100%;
          height: 100%;
          padding-top: 16px;
          border-right: 1px solid #eeeeee;
          overflow: auto;
          .project-sub-menu-item {
            & > .el-submenu__title,.el-menu-item {
              height: 32px;
              line-height: 32px;
              &:hover {
                background-color: unset;
                background: linear-gradient( 91deg, rgba(0, 129, 255, 0.1) 0%, rgba(0, 129, 255, 0) 100%);
              }
            }
          }
          .is-opened{
            .el-submenu__title{
              color:#0081FF;
            }
          }
          .el-submenu__title{
            padding: 0 14px !important;
            span{
              width: 160px;
              display: inline-block;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
            .icon{
              width: 16px;
            }
          }
          .el-submenu__icon-arrow{
            right: 14px;
          }
        }
      }
    }
    .right-table{
      width: calc(100% - 220px);
      height: 100%;
      overflow: auto;
      padding: 16px;
      ::v-deep  .el-table{
        .color1{
          background: #FFF8E8;
        }
        .color2{
          background: #FFFFFF;
        }
      }
    }
  }
  .dialogVisible{
    ::v-deep .el-dialog {
      .el-dialog__body{
        padding:24px 20px 0 20px;
        border-top: 1px solid #EEEEEE;
        border-bottom: 1px solid #EEEEEE;
        .el-input{
          width: 320px !important;
        }
      }
      .el-dialog__footer{
        padding: 16px 20px;
      }
    }
  }
</style>
