<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" v-model="defaultActive"  @select="handleSelect">
              <template :slot="`${menuDetails.menuName}-${menuDetails.menuLevel}`">
                <img src="@/assets/images/projectCostLedger/icon_cost_detail_1.svg" alt="">
                <div class="project-sub-menu-title-text">{{menuDetails.menuName}}</div>
              </template>
            </project-side-menu>
          </div>
        </div>
        <div class="right-table" ref="rightTable">
          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
          <div  class="table-item">
            <el-table
              v-if="!isSkeleton"
              element-loading-text="Loading"
              :maxHeight="maxHeight"
              :data="tableData"
              :row-class-name="tableRowClassName"
              row-key="id"
              default-expand-all
              :tree-props="{children: 'childrenList', hasChildren: 'hasChildren'}"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left" prop="index" fixed="left"></el-table-column>
              <el-table-column label="编码" width="130" prop="code"></el-table-column>
              <el-table-column label="名称" width="230" prop="expenseName"></el-table-column>
              <el-table-column label="清单" width="110" prop="expenseCategoryTag"></el-table-column>
              <el-table-column label="项目特征" width="340" prop="projectFeature"></el-table-column>
              <el-table-column label="单位" width="110" prop="unit"></el-table-column>
              <el-table-column label="计划成本" align="center">
                <el-table-column prop="engineeringVolumeExpression" label="工程表达式" width="120"></el-table-column>
                <el-table-column prop="engineeringVolume" label="工程量" width="120"></el-table-column>
                <el-table-column prop="cbSubject" label="成本科目" width="130"></el-table-column>
                <el-table-column prop="tenderControlUnitPrice" label="招标控制单价" width="120"></el-table-column>
                <el-table-column prop="tenderControlSumPrice" label="招标控制合价" width="120"></el-table-column>
                <el-table-column prop="excludeTaxCbUnitPrice" label="不含税成本单价" width="122">

                </el-table-column>
                <el-table-column prop="excludeTaxCbSumPrice" label="不含税成本合计" width="122">
                  <template slot-scope="scope">
                    {{$decimalFormat(scope.row.excludeTaxCbSumPrice)}}
                  </template>
                </el-table-column>
                <el-table-column prop="cbTaxSum" label="成本税金合计" width="120">
                  <template slot-scope="scope">
                    {{$decimalFormat(scope.row.cbTaxSum)}}
                  </template>
                </el-table-column>
                <el-table-column prop="includeTaxCbUnitPrice" label="含税成本单价" width="120">
                  <template slot-scope="scope">
                    {{$decimalFormat(scope.row.includeTaxCbUnitPrice)}}
                  </template>
                </el-table-column>
                <el-table-column prop="includeTaxCbSumPrice" label="含税成本合价" width="120">
                  <template slot-scope="scope">
                    {{$decimalFormat(scope.row.includeTaxCbSumPrice)}}
                  </template>
                </el-table-column>
                <el-table-column prop="sumPriceDeviation" label="合价偏差" width="120">
                  <template slot-scope="scope">
                    {{$decimalFormat(scope.row.sumPriceDeviation)}}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="盈亏率" width="100" prop="profitLossRatio"></el-table-column>
              <el-table-column label="标准费用项" width="100" prop="standardCbItem"></el-table-column>
              <el-table-column label="备注" width="120" prop="remark"></el-table-column>
              <el-table-column label="操作" min-width="120" fixed="right">
                <template slot-scope="scope">
                  <span v-if="scope.row.expenseCategoryTag ==='清'" style="color:#0081FF;font-size: 14px;cursor: pointer;" @click="handleDialogVisible(scope.row)">增加费用项</span>
                  <span v-if="scope.row.isImport === false" style="color:#FF3C3C;font-size: 14px;cursor: pointer;" @click="handleDelete(scope.row)">删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="500px" append-to-body class="dialogVisible" title="增加费用项">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="addForm" label-width="127px">
        <el-form-item label="编码" prop="code">
          <el-input v-model="ruleForm.code" placeholder="请输入编码"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="expenseName">
          <el-input v-model="ruleForm.expenseName" 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="unit">
          <el-input v-model="ruleForm.unit" placeholder="请输入单位"></el-input>
        </el-form-item>
        <el-form-item label="招标控制价单价" prop="tenderControlUnitPrice">
          <el-input v-model="ruleForm.tenderControlUnitPrice" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入招标控制价单价"></el-input>
        </el-form-item>
        <el-form-item label="不含税成本单价" prop="excludeTaxCbUnitPrice">
          <el-input v-model="ruleForm.excludeTaxCbUnitPrice" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入不含税成本单价"></el-input>
        </el-form-item>
        <el-form-item label="含税成本单价" prop="includeTaxCbUnitPrice">
          <el-input v-model="ruleForm.includeTaxCbUnitPrice" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入含税成本单价"></el-input>
        </el-form-item>
        <el-form-item label="特征描述">
          <el-input type="textarea" v-model="ruleForm.projectFeature" 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" @click="handleAdd">确定增加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
  import { getCbDirectExpenseMenuTreeApi,getCbDirectExpenseList,cbDirectExpenseAdd,cbDirectExpenseDelete } from "@/api/projectCostLedger";
  import skeleton from '../../../../component/skeleton'
export default {
  name: "directCost",
  props: {
    // 项目ID
    // projectId: {
    //   type: String,
    //   required: true,
    //   default: ""
    // },
    // 详情信息
    projectDetailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {ProjectSideMenu,skeleton},
  data() {
    return {
      date:'2023年11月',
      isSkeleton: true,
      datelist:[
        {
          dictValue:'2023年11月',
          dictLabel:'2023年11月',
        },
        {
          dictValue:'2023年12月',
          dictLabel:'2023年12月',
        },
        {
          dictValue:'2024年1月',
          dictLabel:'2024年1月',
        }
      ],
      tableData:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      ruleForm:{

      },
      rules: {
        code: { required: true, message: '编码不能为空', trigger: 'blur' }, // 限制必填
        expenseName:{ required: true, message: '项目名称不能为空', trigger: 'blur' }, // 限制必填
        // jsgz:{ required: true, message: '计算规则不能为空', trigger: 'blur' }, // 限制必填
        unit:{ required: true, message: '单位不能为空', trigger: 'blur' }, // 限制必填
        tenderControlUnitPrice:{ required: true, message: '招标控制价单价', trigger: 'blur' }, // 限制必填
        excludeTaxCbUnitPrice:{ required: true, message: '不含税成本单价', trigger: 'blur' }, // 限制必填
        includeTaxCbUnitPrice:{ required: true, message: '含税成本单价', trigger: 'blur' }, // 限制必填
        // projectFeature:{ required: true, message: '特征描述', trigger: 'blur' }, // 限制必填
      },
      dialogVisible:false,
      defaultActive: "",
      menuTreeList: [],
      menuDetails:{},
      menuOptions: {
        nodeName: "menuName",
        nodeValue: "menuId",
        children : "childrenList"
      },
      detailsId:'',
      menuId:'',
      maxHeight:''
    };
  },
  watch: {
    projectDetailInfo: {
      handler(newValue) {
        this.comProjectDetailInfo = newValue ? newValue : {};
        this.getCbDirectExpenseMenuTree(this.comProjectDetailInfo.projectId)
        // this.getProjectOtherStatistics(this.comProjectDetailInfo.projectId)
        // this.getProjectOtherStatistics('1762014527685136385')
        // this.init(this.comProjectDetailInfo);
      },
      deep: true,
      immediate: true
    },
    projectId: {
      handler(newValue) {
        this.comProjectId = newValue;
      },
      immediate: true
    }
  },
  created() {

  },
  mounted() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async getCbDirectExpenseMenuTree(params) {
      try {
        const result = await getCbDirectExpenseMenuTreeApi(params);
        if (result.code == 200) {
          const _tempArray = result.data;
          this.menuDetails=_tempArray
          this.menuTreeList.push(_tempArray);
          const defaultCurrent = this.findMenuNode(this.menuTreeList, "宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程");
          if (defaultCurrent) {
            this.defaultActive = defaultCurrent.menuId;
            this.menuId = defaultCurrent.menuId;
          }
          this.getCbDirectExpenseList(defaultCurrent.menuId)
        }
      } catch (error) {

      }
    },
    async getCbDirectExpenseList(params) {
      try {
        const result = await getCbDirectExpenseList(params);
        if (result.code == 200) {
          const _dataArray = result.data;
          this.tableDataTotal=_dataArray.length;
          this.tableData = _dataArray;
          this.tableData.forEach((item,index)=>{
            item.index=index+1
          })
          this.maxHeightInit();
          this.isSkeleton = false;
        }
      } catch (error) {

      }
    },
    handleSelect(menuPath, menuPathArray){
      this.defaultActive=menuPath;
      this.menuId=menuPath
      this.getCbDirectExpenseList(menuPath)
    },
    tableRowClassName({row, rowIndex}) {
      if (row.expenseCategoryTag === '清') {
        return 'color1';
      } else{
        return 'color2';
      }
      return '';
    },
    handleDialogVisible(row){
      this.ruleForm={}
      this.dialogVisible=true;
      this.detailsId=row.id;
    },
    handleAdd(){

      this.ruleForm.qingId = this.detailsId
      cbDirectExpenseAdd(JSON.stringify(this.ruleForm)).then(res=>{
        if(res.code == 200){
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.getCbDirectExpenseList(this.menuId)
        }
      })
    },
    handleDelete(row){
      this.$confirm('是否删除费用项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cbDirectExpenseDelete(row.id).then(res=>{
          if(res.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getCbDirectExpenseList(this.menuId)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    findMenuNode(tree, nodeName) {
      for (const item of tree) {
        if (item.menuName == nodeName && !item?.childrenList?.length) return item;
        if (item.childrenList instanceof Array) {
          const result = this.findMenuNode(item.childrenList, nodeName);
          if (result) return result;
        }
      }
    },
    async maxHeightInit() {
      const divHeight = this.$refs.rightTable.clientHeight-32;
      this.maxHeight=divHeight;
      console.log('DIV的高度是：', divHeight);
    }
  },
}
</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;
        }
        th.gutter:last-of-type {
          display: block!important;
          width: 16px!important;
        }
        .el-table__fixed-right {
          z-index: 9;
          right: 16px !important;
          bottom: 16px !important;
          height: calc(100% - 16px) !important;
          .el-table__fixed-header-wrapper {
            position: absolute;
          }
        }
        .el-table__fixed-right-patch {
          width: 16px !important;
          z-index: 9;
          top: 0px;
          background: #f0f3fa;
          border: 1px solid #e6eaf1;
          border-left: unset;
          border-top: unset;
        }
        // 自动适配下 减去滚动条高度
        .el-table__fixed {
          height: calc(100% - 16px) !important;
        }
        .el-table__fixed-body-wrapper {
          .el-table__body {
            padding-bottom: 16px!important;
          }
        }
        .el-table__body-wrapper {
          &::-webkit-scrollbar {
            width: 16px; //竖轴宽度
            height: 16px; //横轴宽度
          }
        }
        .el-table__fixed-body-wrapper .el-table__body {
          padding-bottom: 16px; // 滚动条高度
        }
        ::-webkit-scrollbar-track-piece {
          //滚动条凹槽的颜色，还可以设置边框属性
          background-color: #f3f4f5;
          height: 16px;
          padding: 0 4px;
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 16px;
          height: 16px;
          background-color: #f3f4f5;
          border-radius: 6px;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          border-radius: 8px;
          height: 8px;
          margin: 0 4px;
          background: rgba(0,0,0,.2);
          border: 4px solid #f3f4f5;
          &:hover {
            background: #7d7d7d;
          }
        }
        .el-scrollbar {
          height: 16px;
          .el-scrollbar__bar.is-horizontal {
            height: 8px;
          }
          .el-scrollbar__thumb {
            background: rgba(98, 110, 126, 0.4);
            &:hover {
              background: #566380;
            }
          }
        }
      }
    }
  }
  .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-textarea{
          width: 320px !important;
        }
        .el-textarea__inner {
          font-family: Arial, Helvetica, sans-serif !important;
        }
        input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
          color: #C0C4CC;
        }
        input::-moz-placeholder { /* Firefox 19+ */
          color: #C0C4CC;
        }
        input:-ms-input-placeholder { /* IE 10+ */
          color: #C0C4CC;
        }
        input:-moz-placeholder { /* Firefox 18- */
          color: #C0C4CC;
        }
      }
      .el-dialog__footer{
        padding: 16px 20px;
      }
    }
  }
</style>
