<template>
  <div class="engin-auditing-page">
    <div class="screen-content">
      <el-row>
        <el-col :span="6">
          <module-one-1-1 :label="label1" style="position: relative;">
          </module-one-1-1>
          <module-one-2-1 label="项目审批排名" style="position: relative;">
          </module-one-2-1>
        </el-col>
        <el-col :span="12">
          <module-one-3-1 label="付款金额" style="position: relative;" class="cost-sum">
            <el-row style="padding:0px 10px;">
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">合同总金额(万元)</div>
                </div>

                <people-number :number="numberWithCommas((sumCost.data1 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">建安费总金额(万元)</div>
                </div>

                <people-number :number="numberWithCommas((sumCost.data2 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
            </el-row>
            <div class="div-line"></div>
            <el-row style="padding:0px 10px;">
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">总计付款(万元)</div>
                </div>

                <people-number :number="numberWithCommas((sumCost.data3 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">付款比例</div>
                </div>
                <div class="div-percent">
                  <div class="percent-content" :style="'width:'+sumCost.percent+'%'">
                    <span v-if="sumCost.percent>=20">{{ sumCost.percent.toFixed(2) }}%</span>
                  </div>
                  <span style="color: #00aaff;" v-if="sumCost.percent<20">{{ sumCost.percent.toFixed(2) }}%</span>
                </div>
              </el-col>
            </el-row>

            <div class="div-line"></div>

            <el-row style="padding:0px 10px;">
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">进度款已支付(万元)</div>
                </div>

                <people-number :number="numberWithCommas((sumCost.data4 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

                  <div class="warning-info-title">
                  <div class="active">安措费已支付(万元)</div>
                </div>

                <people-number :number="numberWithCommas((sumCost.data5 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
              <el-col :span="12" style="margin-top:40px;">
                <div class="warning-info-title">
                  <div class="active">挂账总金额(万元)</div>
                </div>

                <people-number :number="numberWithCommas((sumCost.data6 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
            </el-row>
            <div style="padding:0px 10px;height: calc(100% - 440px);">
              <div class="warning-info-title" style="border-bottom: dotted 1px #409effb8;">
                  <div class="active">付款明细</div>
              </div>
              <div class="scroll" v-if="sumList" style="max-height: calc(100% - 50px);overflow-y: auto;">
                <template v-if="sumList.names.length>0">
                <div v-for="(it,idx) in sumList.names" :key="idx">
                  <div>{{it}}</div>
                  <table>
                    <tr>
                      <td>付款项</td>
                      <td>付款明细</td>
                      <td>申请时间</td>
                      <td>申请金额(万元)</td>
                      <td>已付款金额(万元)</td>
                      <td>挂账金额(万元)</td>
                    </tr>
                    <tr>
                      <td colspan="3" align="center">合计</td>
                      <td>{{ (sumList.data[it][2].sum1*1.0).toFixed(2) }}</td>
                      <td>{{ (sumList.data[it][2].sum2*1.0).toFixed(2) }}</td>
                      <td>{{ (sumList.data[it][2].sum3*1.0).toFixed(2) }}</td>
                    </tr>
                    <template v-if="sumList.data[it][0].length>0">
                    <tr  v-for="(row,index) in sumList.data[it][0]" :key="'a-'+idx+'b-'+index">
                      <td v-if="index==0" :rowspan="sumList.data[it][0].length">安措费</td>                      
                      <td>第{{index+1 }}期</td>
                      <td>{{ row.date1|formatDate}}</td>
                      <td>{{ (row.money*1.0).toFixed(2)}}</td>
                      <td>{{ (row.money2*1.0).toFixed(2)}}</td>
                      <td>{{ (row.money3*1.0).toFixed(2)}}</td>
                    </tr>
                  </template>
                  <template v-else>
                    <tr>
                      <td>安措费</td>
                      <td colspan="5">
                        <div style="text-align: center">暂无数据</div>
                      </td>
                    </tr>
                  </template>


                  <template v-if="sumList.data[it][1].length>0">
                    <tr  v-for="(row,index) in sumList.data[it][1]" :key="'a-'+idx+'c-'+index">
                      <td v-if="index==0" :rowspan="sumList.data[it][1].length">进度款</td>                      
                      <td>第{{index+1 }}期</td>
                      <td>{{ row.date1|formatDate}}</td>
                      <td>{{ (row.money*1.0).toFixed(2)}}</td>
                      <td>{{ (row.money2*1.0).toFixed(2)}}</td>
                      <td>{{ (row.money3*1.0).toFixed(2)}}</td>
                    </tr>
                  </template>
                  <template v-else>
                    <tr>
                      <td>进度款</td>
                      <td colspan="5">
                        <div style="text-align: center">暂无数据</div>
                      </td>
                    </tr>
                  </template>

                  </table>
                  <div class="div-line"></div>
                </div>
              </template>
              <template v-else>
                <div>
                  暂无数据
                </div>
              </template>
              </div>
            </div>
          </module-one-3-1>
        </el-col>
        <el-col :span="6">
          <module-one-1-1 label="劳务单位资质审批" style="position: relative;">
          </module-one-1-1>
          <module-one-2-1 label="劳务单位资质审批明细" style="position: relative;">
          </module-one-2-1>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import '@/components/module/module-one-2-1'
import '@/components/module/module-one-3-1'
import debounce from 'lodash.debounce'
export default {
  name: 'JhbigscreenAuditingPage',

  data() {
    return {
      label1: "审批进度(45)",
      prjs: [],
      project: {},
      dept: {},
      sumCost: {},
      sumList:null
    };
  },

  mounted() {
    this.$bus.$on("loadProjects", debounce(prjs => {
      this.prjs = prjs;
    }));
    this.$bus.$on("projectChange", debounce(res => {
      this.project = res;
      this.loadData();
    }));
    this.$bus.$on("deptChange", debounce(dept => {
      this.dept = dept;
      this.loadData();
    }));
    if (this.$root.hasInitHeader) {
      this.initMe();
    }
  },

  methods: {
    numberWithCommas(x) {
      x = x.toString();
      var pattern = /(-?\d+)(\d{3})/;
      while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
      return x;
    },
    initMe() {
      this.project = this.$root.project || {};
      this.dept = this.$root.dept || {};
      this.prjs = this.$root.projects || [];
      this.loadData();
    },
    loadData() {
      this.loadSumCost();
      this.loadCostList();
    },
    loadCostList(){
      let postData = {};
      if (this.project && this.project.id > 0) {
        postData.projectId = this.project.id;
      } else {
        postData.id = this.dept.id;
      }
      this.$api.costOut.selectForBigEnginList(postData).then(d=>{
        this.sumList=d;
      });
    },
    loadSumCost() {
      let postData = {};
      if (this.project && this.project.id > 0) {
        postData.projectId = this.project.id;
      } else {
        postData.id = this.dept.id;
      }
      this.$api.costOut.sumForBsEnginAuditing(postData).then(d => {
        this.sumCost = d;
      });
    }
  },
};
</script>
<style lang="less">
.engin-auditing-page {
  .cost-sum {
    .people-number {
      height: 40px;
      transform: scale(.8);
      position: relative;
      left: -40px;
    }
    .div-line{
      border-bottom: dotted 1px #eeeeee52;
      margin: 16px 10px 0px;
    }
    .div-percent{
      margin: 0px 20px;
      background: #fff;
      border-radius: 10px;
      position: relative;
      .percent-content{
        background-color: #409eff;
        border-radius: 10px;
        text-align: right;
        display: inline-block;                
      }
    }
  }
}
</style>