<template>
  <div class="directCost-container">
    <div class="directCost-main">
      <div class="search">
        <el-select v-model="date" placeholder="请选择">
          <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-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_1.svg" alt="">
                <div class="project-sub-menu-title-text">宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程</div>
              </template>
            </project-side-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" 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>
              <el-table-column label="操作" width="114" fixed="right">
                <template slot-scope="scope" v-if="scope.row.qd ==='清'">
                  <span style="color:#0081FF;font-size: 14px;cursor: pointer;" @click="dialogVisible=true">增加费用项</span>
                </template>
              </el-table-column>
            </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 @click="dialogVisible=false">取消</el-button>
        <el-button type="primary">确定增加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
export default {
  name: "directCost",
  components: {ProjectSideMenu},
  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,
      defaultActive: "",
      menuTreeList: [
        {
          nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程",
          id: "1",
          children: [
            {
              nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程",
              id: "1-1",
              children: [
                {
                  nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程劳务",
                  id: "1-1-1",
                },
                {
                  nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程劳务",
                  id: "1-2-1",
                },
                {
                  nodeName: "拆除、修缮、清理、改造劳...",
                  id: "1-3-1",
                  children: [
                    {
                      nodeName: "拆除、修缮、清理、改造劳...",
                      id: "1-3-1",
                    }
                  ]
                }
              ]
            },
            {
              nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程",
              id: "2-1",
            },
            {
              nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程",
              id: "3-1",
            },
            {
              nodeName: "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程",
              id: "4-1",
            },
          ]
        },
      ],
      menuOptions: {
        nodeName: "nodeName",
        nodeValue: "nodeName",
      },
    };
  },
  //可访问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{
      .left-side-menu {
        width: 220px;
        min-width: 220px;
        height: 100%;
      }
    }
    .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 {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      margin-top:0 !important;
      .el-dialog__body{
        flex:1;
        overflow: auto;
        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>
