<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" :default-active="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-date-picker size="small" style="width: 140px"-->
            <!--v-model="expenseDate"-->
            <!--type="month"-->
            <!--placeholder="选择月" @change="changetime"-->
            <!--value-format="yyyy-MM"-->
            <!--:picker-options="pickerOptions">-->
          <!--</el-date-picker>-->
          <el-select v-model="expenseDate">
            <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" type="primary" size="small" @click="addcost">添加实际成本</el-button>
        </div>
        <!--汇总-->
        <div class="table-item" v-if="isall">
          <el-table
            element-loading-text="Loading"
            :data="tableData"
            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" 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="table-item" v-else>
          <el-table
            element-loading-text="Loading"
            :data="tableData"
            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" 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">{{scope.row.monthCostRate || '--'}}</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="currentProjectVolume">
              <template slot-scope="scope">{{scope.row.currentProjectVolume || '--'}}</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.currentProjectVolume"></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>

    </div>
  </div>
</template>
<script>
  import ProjectSideMenu from '@/views/projectCostLedger/detail/components/ProjectSideMenu'
  import {
    getCostMeasureslist,
    getMeasureslist,
    getSummarydata,
    projectVolume,
    pushProjectvolume,actualMonths
  } from '@/api/projectCostLedger'

  export default {
    name: "MeasureItems",
    props: {
      // 项目ID
      projectId: {
        type: String,
        required: true,
        default: ""
      },
      // 详情信息
      projectDetailInfo: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      projectDetailInfo: {
        handler(newValue) {
          this.comProjectDetailInfo = newValue ? newValue : {};
          this.init(this.projectId);
        },
        deep: true,
        immediate: true
      },
      projectId: {
        handler(newValue) {
          this.comProjectId = newValue;
        },
        immediate: true
      }
    },
    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: {},
        comProjectId: "",
        defaultActive: "",
        menuTreeList: [
        ],
        id: 0,
        expenseDate:'',
        tableData:[],
        isall:true,//是否汇总
        dialogVisible:false,
        queryParam:{},//推送工程量数据
        dateoptions:[],
      };
    },
    //可访问data属性
    created() {
      // let month = new Date().getMonth() +1
      // let year = new Date().getFullYear()
      // this.expenseDate = year + (month>= 9? month:'0'+ month)
      this.getactualMonths()
    },
    //计算集
    computed: {

    },
    //方法集
    methods: {
     getactualMonths(){
        const formDatas = new FormData();
        formDatas.append("projectId", this.projectId);
        formDatas.append("id", this.id);
        console.log(formDatas.get('projectId'))
        console.log(formDatas.get('id'))
        actualMonths(formDatas).then(res=>{
          let data = res.data
          data.forEach(item=>{
            item.value = item
            item.label = item.substring(1,4)+'-'+item.substring(5,6)
          })
          if(data&&data.length>0)
            this.expenseDate = data[0].value
        })
      },
      select(menuPath){
        this.id = menuPath
        // let month = this.expenseDate.replace('-', "");
        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);
          getSummarydata(formData).then(res=>{
            this.tableData = res.data
          })
        } else {//各个子项
          this.isall = false
          getCostMeasureslist(param).then(res => {
            this.tableData = res.data
          })
        }
        this.getactualMonths()
      },
      async init(detail = '') {
        try {
          const  projectId = detail;
          if (!projectId) return;
          await this.getFeedSummaryMenuTree(projectId);
        } 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.select(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.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(){

      },
    },
  }
</script>
<style lang="scss" scoped>
  .feed-summary-container {
    width: 100%;
    height: 100%;

    .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;
        .table-item{
          margin-top: 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>
