<!-- 負荷統計  2-->
<template>
  <div id="electricityMonitoring">
    <!-- 每臺變壓器平均功率因數 -->
    <searchForm :formConfig="formConfig" ref="tbword_ref" :value="getDataform"></searchForm>
    <el-table class="tableClass" :data="tableList" style="width: 100%;height:calc(100% - 100px)" height="calc(100% - 100px)">
      <el-table-column prop="tci_name" label="企業名稱" align="center" width="150"></el-table-column>
      <el-table-column label="每臺變壓器平均功率因數" align="center">
        <el-table-column v-for="item in trMaxLength" :key="item" :prop="'a' + (item - 1)" :label="item + '#'" width="120" align="center"></el-table-column>
      </el-table-column>
 

      <el-table-column label="合計平均功率因數" prop="sum" align="center" width="200"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="getDataform.pageNum"
      :page-sizes="[15, 30, 50, 100]"
      :page-size="getDataform.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import searchForm from '@searchForm';
import hjTable from '@hjTable';
import { factoryInfoList, getCustomer } from '../../../assets/js/customer.js';

export default {
  components: {
    hjTable,
    searchForm
  },
  data() {
    return {
      currentPage: 1,
      loading: true,
      getDataform: {
        pageNum: 1,
        pageSize: 15,
        checkId: 10
      },
      tableList: [],
      trMaxLength: 0,
      total: 0,
      formConfig: {
        inline: true,
        formItemList: [
          {
            type: 'select',
            prop: 'a1',
            placeholder: '請選擇園區',
            optName: 'tfi_name',
            optId: 'tfi_id',
            changeFun: this.getCustomer(),
            optList: [],
            style: {
              width: '100%'
            }
          },
          {
            type: 'select',
            prop: 'a3',
            placeholder: '請選擇企業名',
            optName: 'tci_name',
            optId: 'tci_id',
            optList: [],
            style: {
              width: '100%'
            }
          },
          {
            type: 'button',
            operate: [
              {
                type: 'primary',
                marginRight: '10px',
                style: {
                  marginRight: '10px'
                },
                name: '查詢',
                notHasPerm: true,
                handleClick: this.getData
              }
            ]
          }
        ]
      }
    };
  },
  created() {
    this.getData();
    factoryInfoList().then(res => {
      this.formConfig.formItemList[0].optList = res;
    });
    getCustomer().then(res => {
      this.formConfig.formItemList[1].optList = res;
    });
  },
  methods: {
    // 獲取客戶id
    getCustomer(id) {
      getCustomer(id).then(res => {
        this.formConfig.formItemList[1].optList = res;
      });
    },
    handleSizeChange(val) {
      this.getDataform.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.getDataform.pageNum = val;
      this.getData();
    },
    getData() {
      let that = this;
      this.$post('/tbCustomerAmmeterInfo/getCheckValueByCustomerIds', that.getDataform)
        .then(res => {
          if (res.code == 100) {
            that.total = res.data.total;
            let listData = res.data.list;
            let trMaxLength = 0;
            let sum = 0;
            for (let i = 0; i < listData.length; i++) { // 外層list
              sum = 0;
              trMaxLength = Math.max(trMaxLength, listData[i].list.length);
 
// 獲取內層list[]的最大長度
              // 內層list
              for (let j = 0; j < listData[i].list.length; j++) {
                sum += listData[i].list[j].tads_last_value; // 合計平均功率因數
                this.$set(listData[i], 'a' + j, listData[i].list[j].tcgp_name);
              }
              this.$set(listData[i], 'sum', sum.toFixed(2));
 
 // sum.toFixed(2) 保留後兩位小數
            }
            // console.log('*****************************************');
            console.log(listData);
            this.trMaxLength = trMaxLength;
            this.tableList = listData;
          } else {
            that.$message.warning(res.message);
          }
        })
        .catch(() => {});
    },
    changePage(currentPage) {
      this.getDataform.page = currentPage;
      this.getData();
    }
  }
};
</script>

<style scope>
#electricityMonitoring {
  height: 100%;
}
.DMClass {
  float: right;
  font-size: 16px;
  font-weight: 700px;
  letter-spacing: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.tableClass {
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
}
</style>