<template>
  <div class="feed-summary-container">
    <div class="feed-summary-inner">
      <div class="left-side-menu">
        <project-side-menu ref="profitloss" :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" v-model="defaultActive"
          @select="select">
          <template slot="措施费-1">
            <img src="@/assets/images/projectCostLedger/icon_cost_detail_4.svg" alt="">
            <div class="project-sub-menu-title-text">措施费</div>
          </template>
        </project-side-menu>
      </div>
      <div class="profitloss">
        <div class="search">
          <el-select v-model="expenseDate" @change="changetime" style="width: 140px;">
            <el-option v-for="item in dateoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button v-if="!isall && !isinput" type="primary" size="small" @click="addcost">添加实际成本</el-button>
          <el-button v-if="!isall && isinput" type="primary" size="small" @click="addinputs">保存</el-button>
        </div>
        <!--汇总-->
        <div class="meafixed-table" v-if="isall">
          <el-table element-loading-text="Loading" :data="tableData" row-key="id" v-horizontal-scroll="'hover'" default-expand-all :max-height="tableHeight"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border highlight-current-row :cell-class-name="tored" :header-cell-class-name="tored"
            :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}">
            <el-table-column label="序号" width="60" align="left" type="index"></el-table-column>
            <el-table-column label="名称" width="220" prop="expenseName">
              <template slot-scope="scope">{{scope.row.expenseName || '--'}}</template>
            </el-table-column>
            <el-table-column label="数量" prop="expenseValue">
              <template slot-scope="scope">{{scope.row.expenseValue || '--'}}</template>
            </el-table-column>
            <el-table-column label="占比" prop="proportion">
              <template slot-scope="scope">{{scope.row.proportion || '--'}}</template>
            </el-table-column>
            <el-table-column label="本月工程量" prop="quantity">
              <template slot-scope="scope">{{scope.row.quantity || '--'}}</template>
            </el-table-column>
          </el-table>
        </div>
        <!--单条-->
        <div class="meafixed-table" v-else>
          <el-table element-loading-text="Loading" ref="edittable" :data="tableData" row-key="id"
                    :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                    v-horizontal-scroll="'hover'"  :max-height="tableHeight"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border highlight-current-row
                    :cell-class-name="tored1" :header-cell-class-name="tored1">
            <el-table-column label="序号" width="60" align="left" type="index" fixed="left"></el-table-column>
            <el-table-column label="清单内容" width="130" prop="itemContent" fixed="left">
              <template slot-scope="scope">{{scope.row.itemContent || '--'}}</template>
            </el-table-column>
            <el-table-column label="工作内容、做法/规格型号/施工现场配置说明" width="300" prop="workContent">
              <template slot-scope="scope">{{scope.row.workContent || '--'}}</template>
            </el-table-column>
            <el-table-column label="单位" width="130" prop="unit">
              <template slot-scope="scope">{{scope.row.unit || '--'}}</template>
            </el-table-column>
            <el-table-column label="工程量" width="130" prop="quantity">
              <template slot-scope="scope">{{scope.row.quantity || '--'}}</template>
            </el-table-column>
            <el-table-column label="不含税单价" width="130" prop="unitPriceExcludingTax">
              <template slot-scope="scope">{{scope.row.unitPriceExcludingTax || '--'}}</template>
            </el-table-column>
            <el-table-column label="使用时间" width="130" prop="usageTime">
              <template slot-scope="scope">{{scope.row.usageTime || '--'}}</template>
            </el-table-column>
            <el-table-column label="不含税合价" width="130" prop="amountExcludingTax">
              <template slot-scope="scope">{{scope.row.amountExcludingTax || '--'}}</template>
            </el-table-column>
            <el-table-column label="税率（%）" width="130" prop="taxRate">
              <template slot-scope="scope">{{scope.row.taxRate || '--'}}</template>
            </el-table-column>
            <el-table-column label="含税合价" width="130" prop="amountIncludingTax">
              <template slot-scope="scope">{{scope.row.amountIncludingTax || '--'}}</template>
            </el-table-column>
            <el-table-column label="摊销比例（%）" width="130" prop="amortizationRatio">
              <template slot-scope="scope">{{scope.row.amortizationRatio || '--'}}</template>
            </el-table-column>
            <el-table-column label="摊销后不含税合价" width="150" prop="amountExcludeTaxAmortized">
              <template slot-scope="scope">{{scope.row.amountExcludeTaxAmortized || '--'}}</template>
            </el-table-column>
            <el-table-column label="摊销后含税合价" width="150" prop="amountIncludeTaxAmortized">
              <template slot-scope="scope">{{scope.row.amountIncludeTaxAmortized || '--'}}</template>
            </el-table-column>
            <el-table-column label="税金（元）" width="130" prop="taxAmount">
              <template slot-scope="scope">{{scope.row.taxAmount || '--'}}</template>
            </el-table-column>
            <el-table-column label="成本科目" width="130" prop="costSubject">
              <template slot-scope="scope">{{scope.row.costSubject || '--'}}</template>
            </el-table-column>
            <el-table-column label="税金类型" width="130" prop="taxType">
              <template slot-scope="scope">{{scope.row.taxType || '--'}}</template>
            </el-table-column>

            <el-table-column label="本月成本发生比例" width="150" prop="monthCostRate">
              <template slot-scope="scope">
                <template v-if="isinput">
                  <el-input v-model="scope.row.monthCostRate "></el-input>
                </template>
                <template v-else>{{scope.row.monthCostRate?scope.row.monthCostRate+'%':'--'}}</template>
              </template>
            </el-table-column>
            <el-table-column label="成本合价" width="130" prop="costEffective">
              <template slot-scope="scope">{{scope.row.costEffective || '--'}}</template>
            </el-table-column>
            <el-table-column label="本月工程量" width="130" prop="projectVolume">
              <template slot-scope="scope">
                <template v-if="isinput">
                  <el-input v-model="scope.row.projectVolume "></el-input>
                </template>
                <template v-else>{{scope.row.projectVolume || '--'}}</template>
              </template>
            </el-table-column>
            <el-table-column label="截止本月工程量" width="130" prop="currentProjectVolume">
              <template slot-scope="scope">{{scope.row.suncurrentProjectVolume || '--'}}</template>
            </el-table-column>
            <el-table-column label="本月推送工程量" width="130" prop="submitProjectVolume">
              <template slot-scope="scope">{{scope.row.submitProjectVolume || '--'}}</template>
            </el-table-column>

            <el-table-column label="备注" width="130" prop="remarks">
              <template slot-scope="scope">{{scope.row.remarks || '--'}}</template>
            </el-table-column>
            <el-table-column label="是否推送" width="130">
              <template slot-scope="scope">{{scope.row.pushTime?'是':'否'}}</template>
            </el-table-column>
            <el-table-column label="操作" width="130" fixed="right">
              <template slot-scope="scope">
                <span class="wordprimary" @click="pushwork(scope.row)">推送工程量</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <!--推送工程量-->
      <el-dialog class="pro-news" :visible.sync="dialogVisible" width="480px">
        <div class="poptitle">
          <span>推送工程量</span>
        </div>
        <el-form class="popform" label-width="120px" :model="queryParam" ref="ruleForm">
          <el-form-item label="分包项目名称" class="row">
            <el-input type="text" v-model="queryParam.projectName" placeholder="请输入分包项目名称"></el-input>
          </el-form-item>
          <el-form-item label="本月实际工程量" class="row">
            <el-input type="text" placeholder="请输入本月实际工程量" v-model="queryParam.projectVolume"></el-input>
          </el-form-item>
          <el-form-item label="需推送工程量" class="row">
            <el-input type="text" placeholder="请输入需推送工程量" v-model="queryParam.submitProjectVolume"></el-input>
            <span class="msgs" v-if="queryParam.submitProjectVolume>queryParam.currentProjectVolume">
              <font color="#FF3C3C">注：推送工程量不得大于实际产生的总工程量</font>
            </span>
          </el-form-item>
          <el-form-item label="IPM项目编码" class="row">
            <el-input type="text" placeholder="请输入IPM项目编码" v-model="queryParam.ipmProjectCode"></el-input>
          </el-form-item>
          <el-form-item label="IPM合同编码" class="row">
            <el-input type="text" placeholder="请输入IPM合同编码" v-model="queryParam.ipmContractCode"></el-input>
          </el-form-item>
          <el-form-item label="IPM作业编码" class="row">
            <el-input type="text" placeholder="请输入IPM作业编码" v-model="queryParam.ipmBizCode"></el-input>
          </el-form-item>
        </el-form>
        <div class="popbot">
          <div class="btn btn_cancel h32" @click="dialogVisible = false">取消</div>
          <div class="btn btn_primary h32" @click="savepro">确定推送</div>
        </div>
      </el-dialog>
      <!--添加实际成本-->
      <el-dialog class="pro-news" :visible.sync="cbVisible" width="480px" :close-on-click-modal="false" >
        <div class="poptitle">
          <span>填写实际成本</span>
        </div>
        <el-form class="popform" label-width="72px" style="height: 100px">
          <el-form-item label="成本年份" class="row">
            <el-date-picker size="small" style="width: 368px"
              v-model="chooseDate"
              type="month"
              placeholder="请选择所需添加的成本月份" @change="changeDate"
              value-format="yyyy-MM"
              :picker-options="pickerOptions">
              </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="popbot">
          <div class="btn btn_cancel h32" @click="cbVisible = false">取消</div>
          <div class="btn btn_primary h32" @click="inputnum">确定</div>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>
  import ProjectSideMenu from '@/views/projectCostLedger/detail/components/ProjectSideMenu'
  import {
    getActualMonthsApi,
    getCostMeasureslist,
    getMeasureslist,
    getSummarydata,
    projectVolume,
    pushProjectvolume,
    saveBatch
  } from '@/api/projectCostLedger'
  import { cloneDeep } from 'lodash-es'

  export default {
  name: "MeasureItems",
  props: {
    // 项目ID
    projectId: {
      type: String,
      required: true,
      default: ""
    },
    // 详情信息
    projectDetailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    projectDetailInfo: {
      handler(newValue) {
        this.comProjectDetailInfo = newValue ? cloneDeep(newValue) : {};
        this.init(newValue.projectId);
      },
      deep: true
    },
    projectId: {
      handler(newValue) {
        this.comProjectId = newValue;
      }
    }
  },
  components: {
    ProjectSideMenu
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          let istrue = true;
          let month = new Date().getMonth() + 1;
          let year = new Date().getFullYear();
          let times = (year + 5) + '-' + month + '-01 ' + '00:00:00';
          istrue = new Date().getTime() < time.getTime() && time.getTime() < new Date(times).getTime();
          return !istrue;
        },
      },
      menuOptions: {
        nodeName: "itemContent",
        nodeValue: "id",
      },
      comProjectDetailInfo: this.projectDetailInfo ? cloneDeep(this.projectDetailInfo) : {},
      comProjectId: this.projectId,
      defaultActive: "",
      menuTreeList: [],
      id: 0,
      expenseDate: '',
      tableData: [],
      isall: true,//是否汇总
      dialogVisible: false,
      queryParam: {},//推送工程量数据
      dateoptions: [],
      cbVisible:false,
      chooseDate:"",
      isinput:false,//是否填写
      tableHeight: window.innerHeight - 355
    };
  },
  //可访问data属性
  created() {
    this.init(this.comProjectId);
    // this.createResizeObserver();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    getGDT(){
      let gdt = document.querySelector('.el-table__body-wrapper')
      let w1 = document.querySelector('.el-table__fixed-right-patch')
      let w2 = document.querySelector('.el-table__fixed-right')
      if(gdt){
        let outheight = gdt.scrollHeight
        let inheight = gdt.clientHeight
        if(outheight>inheight){
          if (w1) {
            w1.setAttribute('style', `width: 16px;height:40px`)
          }
          if (w2) {
            w2.setAttribute('style', `right: 16px;width:130px`)
          }
        }else{
          if (w1) {
            w1.setAttribute('style', `width: 0;height:40px`)
          }
          if (w2) {
            w2.setAttribute('style', `right: 0;width:130px`)
          }
        }
      }
    },
    tored({column}){
      if(column.property=='quantity'){
        return 'tored'
      }
    },
    tored1({column}){
      let arr = ['submitProjectVolume','suncurrentProjectVolume','projectVolume','currentProjectVolume','costEffective','monthCostRate']
      if(arr.includes(column.property)&&this.isinput){
        return 'tored'
      }
    },
    async getactualMonths() {
      try {
        const params = {
          projectId: this.comProjectId,
          id: this.id
        };
        let res = await getActualMonthsApi(params);
        let data = res.data
        let arr = []

        let month = new Date().getMonth() +1
        let year = new Date().getFullYear()
        let thismonth = year + (month>= 9? month:'0'+ month)
        let hasmonth = false
        data.forEach(item => {
          if(item == thismonth){
            hasmonth = true
          }
          let li = {value:item,label:item.substring(0, 4) + '-' + item.substring(4, 6)}
          arr.push(li)
        });
        if(!hasmonth){
          let li = {value:thismonth,label:thismonth.substring(0, 4) + '-' + thismonth.substring(4, 6)}
          arr.unshift(li)
        }
        if (arr && arr.length > 0) {
          this.expenseDate = arr[0].value;
        }
        this.dateoptions = arr
      } catch (error) {
      }
    },
    async select(menuPath) {
      this.defaultActive = menuPath
      this.id = menuPath;
      this.getactualMonths();
      // let month = this.expenseDate.replace('-', "");
      this.getDatas(menuPath)
    },
    async getDatas(menuPath){
      let param = {
        projectId: this.projectId,
        id: this.id,
        month: this.expenseDate
      };
      if (menuPath == 0) {//费用汇总
        this.isall = true;
        // const formData = new FormData();
        // formData.append("projectId", this.projectId);
        // formData.append("month", this.expenseDate);
        // const res = await getSummarydata(formData);
        // this.tableData = res.data;
      } else {//各个子项
        this.isall = false;
        // const res = await getCostMeasureslist(param);
        // this.tableData = res.data;
      }
      const res = await getCostMeasureslist(param);
      this.tableData = res.data;
      this.isinput = false
      // await this.$nextTick()
      this.$nextTick(()=>{
      setTimeout(()=>{
      this.getGDT()
  },500)
      })
    },
    async init(detail = '') {
      try {
        const projectId = detail;
        if (!projectId) return;
        await this.getFeedSummaryMenuTree(projectId);
        this.getactualMonths();
      } catch (error) {

      }
    },
    async getFeedSummaryMenuTree(params) {
      try {
        const result = await getMeasureslist(params);
        if (result.code == 200) {
          let arr = {};
          arr.itemContent = '措施费';
          arr.id = 0;
          let child = result.data;
          let li = {};
          li.itemContent = '费用汇总';
          li.id = 0;
          child.unshift(li);
          arr.children = child;
          const _tempArray = [arr];
          this.menuTreeList = _tempArray;
          await this.$nextTick();
          this.$refs['profitloss'].$refs['customElMenu'].open(_tempArray[0].id);
          this.defaultActive = child[0].id;
          this.select(child[0].id);
        }
      } catch (error) {
        console.log(error);
      }
    },
    changetime(val) {
      this.getDatas(this.id)
    },
    //推送工作量
    pushwork(row) {
      this.queryParam = {
        id: row.id,
        projectName: '',
        submitProjectVolume: '',
        ipmProjectCode: '',
        ipmContractCode: '',
        ipmBizCode: '',
      };
      projectVolume(row.id).then(res => {
        if (res.data) {
          let datas = res.data;
          this.queryParam.projectVolume = datas.projectVolume;
          this.queryParam.currentProjectVolume = datas.currentProjectVolume;
          this.queryParam.ipmProjectCode = datas.ipmProjectCode;
          this.queryParam.ipmContractCode = datas.ipmContractCode;
          this.queryParam.ipmBizCode = datas.ipmBizCode;
        }
      });
      this.dialogVisible = true;
    },
    //确认推送
    savepro() {
      pushProjectvolume(this.queryParam).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.dialogVisible = false;
          this.select(this.id);
        } else {
          this.$message.error(res.msg);
        }
      });

    },
    addcost() {
      this.cbVisible = true
    },
    addinputs(){
      let tables = JSON.parse(JSON.stringify(this.tableData))
      tables.forEach(item=>{
        item.planMeasureId = item.id
        item.id = item.actualId
        item.month = this.expenseDate
        item.monthCostRate = item.monthCostRate?parseInt(item.monthCostRate.replace('%','')):null
      })
      saveBatch(JSON.stringify(tables)).then(res=>{
        if(res.code == 200){
          this.$message.success(res.msg)
          this.isinput = false
          this.getDatas(this.id)
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    changeDate(){
      let choseDate = this.chooseDate.replace('-','')
      let hasdate = false
      this.dateoptions.forEach(item=>{
        if(item.value == choseDate){
          hasdate = true
        }
      })
      if(!hasdate){
        let li = {value:choseDate,label:this.chooseDate}
        this.dateoptions.push(li)
        this.expenseDate = choseDate
        //   arr.unshift(li)
      }
    },
    inputnum(){
      this.cbVisible = false
      this.isinput = true
      this.$refs.edittable.bodyWrapper.scrollLeft=Number(2220)
    }
  },
}
</script>
<style lang="scss" scoped>
.feed-summary-container {
  width: 100%;
  height: 100%;

  ::v-deep .tored{
    /*background: rgb(255,236,236) !important;*/
  }
  .feed-summary-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .left-side-menu {
      width: 220px;
      min-width: 220px;
      height: 100%;
    }
    .profitloss {
      width: calc(100% - 220px);
      height: 100%;
      background: #fff;
      padding: 16px;
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .pro-news {
    .el-dialog__body {
      padding: 24px 0 0;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;
      z-index: 3;
    }

    .poptitle {
      line-height: 56px;
      border-bottom: 1px solid #eee;
      height: 56px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      > span {
        padding-left: 20px;
        font-weight: bold;
        font-size: 16px;
        color: #232323;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        width: 385px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .popform {
      padding: 24px 20px 0;

      .row {
        margin-bottom: 16px;
        position: relative;
        .checkcb {
          position: absolute;
          left: -100px;
        }
        .el-form-item__label {
          font-weight: 400;
          opacity: 0.8;
          padding: 0;
          font-size: 14px;
          color: #232323;
          padding-right: 16px;
        }

        .el-input,
        .el-textarea,
        .el-select {
          display: inline-block;
          width: 320px;

          .el-input__inner,
          .el-textarea__inner {
            width: 100%;
            height: 32px;
            border-radius: 0px;

            &:hover {
              border-color: #0081ff;
            }
          }

          .el-textarea__inner {
            height: 90px;
            font-family: inherit;
            color: #000;
          }

          .el-input__suffix {
            height: 32px;
          }

          .el-input__icon {
            line-height: 32px;
          }
        }

        .el-form-item__error {
          padding-top: 2px;
        }
      }
      .el-input-group--append {
        position: relative;
        .el-input-group__append {
          position: absolute;
          right: 0;
          width: 76px;
          top: 0;
          border: 0;
          background: none;
          &:hover {
            background: none !important;
          }
          .pro-getbtn {
            border-left: 1px solid #dcdfe6;
            height: 32px;
            color: #0081ff;
            line-height: 32px;
            text-align: center;
          }
        }
      }
    }

    .popbot {
      border-top: 1px solid #eeeeee;
      text-align: right;
      margin-top: 24px;
      padding: 16px 20px;

      .btn {
        border-radius: 2px;
        margin-left: 12px;
        padding: 0 24px;
        &.btn_disabled {
          background: #8bd1ff;
        }
      }
    }
    .msgs {
      font-size: 12px;
      line-height: 17px;
      height: 17px;
      display: block;
      margin: 0 0 -4px;
    }
  }
}
</style>
