<template>
  <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
    <el-form ref="form" inline :model="formData">
      <el-form-item label="装置状态:">
        <el-select
          v-model="formData.status"
          clearable
          placeholder="请选择装置状态"
        >
          <el-option
            v-for="item in device"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筛选数据:">
        <el-input
          v-model="formData.searchValue"
          clearable
          placeholder="请输入筛选数据"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="onsubmit"
          >查询</el-button
        >
        <!-- <el-button size="small" type="primary" icon="el-icon-download"
          >导出</el-button
        > -->
      </el-form-item>
    </el-form>
    <vxe-table 
          size="mini"
          class="xiaoshou"
          :data="treeTable"
          ref="plan"
          highlight-current-row
          border
        
          :height="vh"
          :row-config="{keyField: 'id', isCurrent: true, isHover: true }"
          :scroll-y="{enabled: true, gt: 20}"
          :tree-config="{ children: 'children',}"
          row-id="id"
          :expand-row-id="expandID"
          :filter-node-method="filterNode"
          header-cell-class-name="table_header"
         
        >
        <!-- <vxe-table-column title="序号" width="50" type="seq" align="center"></vxe-table-column> -->
        <vxe-table-column field="name" show-overflow align="left" tree-node title="区域/变电站/装置" min-width="300"></vxe-table-column>
        <!-- <vxe-table-column field="name" show-overflow align="center" title="所属变电站" min-width="180"></vxe-table-column>
        <vxe-table-column field="name" show-overflow align="center" title="装置名称" min-width="100"></vxe-table-column> -->
        <vxe-table-column field="devFlag" show-overflow align="center" title="装置状态" min-width="100">
            <template slot-scope="scope">
                <span v-if="scope.row.devFlag == 0" style="color:green">投运</span>
                <span v-if="scope.row.devFlag == 2" style="color:red">停运</span>
                <span v-if="scope.row.devFlag == 1" style="color:orange">热备用</span>
                <span v-if="scope.row.devFlag == null" >/</span>
            </template>
        </vxe-table-column>
        <vxe-table-column field="unitFrequency" show-overflow align="center" title="频率" min-width="100">
            <template slot-scope="scope">
                {{ scope.row.unitFrequency == null ? '--' : scope.row.unitFrequency }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="unitFrequencyDev" show-overflow align="center" title="频率偏差" min-width="100">
            <template slot-scope="scope">
                {{ scope.row.unitFrequencyDev == null ? '--' : scope.row.unitFrequencyDev }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="phaseVoltage" show-overflow align="center" title="相电压有效值" min-width="130">
            <template slot-scope="scope">
                {{ scope.row.phaseVoltage == null ? '--' : scope.row.phaseVoltage }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="lineVoltage" show-overflow align="center" title="线电压有效值" min-width="130">
            <template slot-scope="scope">
                {{ scope.row.lineVoltage == null ? '--' : scope.row.lineVoltage }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="voltageDev" show-overflow align="center" title="电压上偏差" min-width="130">
            <template slot-scope="scope">
                {{ scope.row.voltageDev == null ? '--' : scope.row.voltageDev }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="uvoltageDev" show-overflow align="center" title="电压下偏差" min-width="130">
            <template slot-scope="scope">
                {{ scope.row.uvoltageDev == null ? '--' : scope.row.uvoltageDev }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="ieffective" show-overflow align="center" title="电流有效值" min-width="130">
            <template slot-scope="scope">
                {{ scope.row.ieffective == null ? '--' : scope.row.ieffective }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="singleP" show-overflow align="center" title="单相有功功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.singleP == null ? '--' : scope.row.singleP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="singleViewP" show-overflow align="center" title="单相视在功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.singleViewP == null ? '--' : scope.row.singleViewP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="singleNoP" show-overflow align="center" title="单相无功功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.singleNoP == null ? '--' : scope.row.singleNoP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="totalActiveP" show-overflow align="center" title="总有功功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.totalActiveP == null ? '--' : scope.row.totalActiveP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="totalViewP" show-overflow align="center" title="总视在功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.totalViewP == null ? '--' : scope.row.totalViewP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="totalNoP" show-overflow align="center" title="总无功功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.totalNoP == null ? '--' : scope.row.totalNoP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="vfundEffective" show-overflow align="center" title="相(线)电压基波有效值" min-width="200">
            <template slot-scope="scope">
                {{ scope.row.vfundEffective == null ? '--' : scope.row.vfundEffective }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="ifund" show-overflow align="center" title="基波电流" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.ifund == null ? '--' : scope.row.ifund }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="fundActiveP" show-overflow align="center" title="基波有功功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.fundActiveP == null ? '--' : scope.row.fundActiveP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="fundNoP" show-overflow align="center" title="基波无功功率" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.fundNoP == null ? '--' : scope.row.fundNoP }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="vdistortion" show-overflow align="center" title="电压总谐波畸变率" min-width="200">
            <template slot-scope="scope">
                {{ scope.row.vdistortion == null ? '--' : scope.row.vdistortion }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="vharmonicRate" show-overflow align="center" title="2~50次谐波电压含有率" min-width="200">
            <template slot-scope="scope">
                {{ scope.row.vharmonicRate == null ? '--' : scope.row.vharmonicRate }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="iharmonic" show-overflow align="center" title="2~50次谐波电流有效值" min-width="200">
            <template slot-scope="scope">
                {{ scope.row.iharmonic == null ? '--' : scope.row.iharmonic }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="pharmonic" show-overflow align="center" title="2~50次谐波有功功率" min-width="200">
            <template slot-scope="scope">
                {{ scope.row.pharmonic == null ? '--' : scope.row.pharmonic }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="iiharmonic" show-overflow align="center" title="0.5~49.5次间谐波电流有效值" min-width="260">
            <template slot-scope="scope">
                {{ scope.row.iiharmonic == null ? '--' : scope.row.iiharmonic }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="positiveV" show-overflow align="center" title="正序电压" min-width="100">
            <template slot-scope="scope">
                {{ scope.row.positiveV == null ? '--' : scope.row.positiveV }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="noPositiveV" show-overflow align="center" title="零序负序电压" min-width="140">
            <template slot-scope="scope">
                {{ scope.row.noPositiveV == null ? '--' : scope.row.noPositiveV }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="" show-overflow align="center" title="操作" fixed="right" min-width="120">
            <template slot-scope="scope">
                <el-button v-if="scope.row.unitFrequency == null" style="color: #000; !important" disabled type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                <el-button v-else type="primary" size="mini" @click="modify(scope.row)" icon="el-icon-edit">修改</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <!-- 新增/修改 -->
    <el-dialog
      :close-on-click-modal="false"
      title="单位修改"
      :visible.sync="unitModification"
      width="50%"
      height="90%"
    >
      <el-form
        :model="form"
        label-width="210px"
        class="form"
      >
       <el-row>
         <el-col :span="12">
          <el-form-item label="频率:">
            <el-select
            v-model="form.unitFrequency"
            clearable
            placeholder="请选择频率"
            >
            <el-option
                v-for="item in frequency"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="频率偏差:" class="top">
            <el-select
            v-model="form.unitFrequencyDev"
            clearable
            placeholder="请选择频率偏差"
            >
            <el-option
                v-for="item in frequency"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="相电压有效值:" class="top">
            <el-select
            v-model="form.phaseVoltage"
            clearable
            placeholder="请选择相电压有效值"
            >
            <el-option
                v-for="item in validValue"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="线电压有效值:" class="top">
            <el-select
            v-model="form.lineVoltage"
            clearable
            placeholder="请选择线电压有效值"
            >
            <el-option
                v-for="item in validValue"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="电压上偏差:" class="top">
            <el-select
            v-model="form.voltageDev"
            clearable
            placeholder="请选择电压上偏差"
            >
            <el-option
                v-for="item in deviation"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="电压下偏差:" class="top">
            <el-select
            v-model="form.uvoltageDev"
            clearable
            placeholder="请选择电压下偏差"
            >
            <el-option
                v-for="item in deviation"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="电流有效值:" class="top">
            <el-select
            v-model="form.ieffective"
            clearable
            placeholder="请选择电流有效值"
            >
            <el-option
                v-for="item in RMS"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="单相有功功率:" class="top">
            <el-select
            v-model="form.singleP"
            clearable
            placeholder="请选择单相有功功率"
            >
            <el-option
                v-for="item in meritorious"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="单相视在功率:" class="top">
            <el-select
            v-model="form.singleViewP"
            clearable
            placeholder="请选择单相视在功率"
            >
            <el-option
                v-for="item in apparent"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="单相无功功率:" class="top">
            <el-select
            v-model="form.singleNoP"
            clearable
            placeholder="请选择单相无功功率"
            >
            <el-option
                v-for="item in reactivePower"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="总有功功率:" class="top">
            <el-select
            v-model="form.totalActiveP"
            clearable
            placeholder="请选择总有功功率"
            >
            <el-option
                v-for="item in meritorious"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="总视在功率:" class="top">
            <el-select
            v-model="form.totalViewP"
            clearable
            placeholder="请选择总视在功率"
            >
            <el-option
                v-for="item in apparent"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
         </el-col>
         <el-col :span="12">
          <el-form-item label="总无功功率:" >
            <el-select
            v-model="form.totalNoP"
            clearable
            placeholder="请选择总无功功率"
            >
            <el-option
                v-for="item in reactivePower"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="相(线)电压基波有效值:" class="top">
            <el-select
            v-model="form.vfundEffective"
            clearable
            placeholder="请选择相(线)电压基波有效值"
            >
            <el-option
                v-for="item in validValue"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="基波电流:" class="top">
            <el-select
            v-model="form.ifund"
            clearable
            placeholder="请选择基波电流"
            >
            <el-option
                v-for="item in RMS"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="基波有功功率:" class="top">
            <el-select
            v-model="form.fundActiveP"
            clearable
            placeholder="请选择基波有功功率"
            >
            <el-option
                v-for="item in meritorious"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="基波无功功率:" class="top">
            <el-select
            v-model="form.fundNoP"
            clearable
            placeholder="请选择基波无功功率"
            >
            <el-option
                v-for="item in reactivePower"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="电压总谐波畸变率:" class="top">
            <el-select
            v-model="form.vdistortion"
            clearable
            placeholder="请选择电压总谐波畸变率"
            >
            <el-option
                v-for="item in deviation"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="2~50次谐波电压含有率:" class="top">
            <el-select
            v-model="form.vharmonicRate"
            clearable
            placeholder="请选择2~50次谐波电压含有率"
            >
            <el-option
                v-for="item in RMS"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="2~50次谐波有功功率:" class="top" >
            <el-select
            v-model="form.pharmonic"
            clearable
            placeholder="请选择2~50次谐波有功功率"
            >
            <el-option
                v-for="item in meritorious"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="0.5~49.5次间谐波电流有效值:" class="top">
            <el-select
            v-model="form.iiharmonic"
            clearable
            placeholder="请选择0.5~49.5次间谐波电流有效值"
            >
            <el-option
                v-for="item in RMS"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="正序电压:" class="top">
            <el-select
            v-model="form.positiveV"
            clearable
            placeholder="请选择正序电压"
            >
            <el-option
                v-for="item in validValue"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="零序负序电压:" class="top">
            <el-select
            v-model="form.noPositiveV"
            clearable
            placeholder="请选择零序负序电压"
            >
            <el-option
                v-for="item in validValue"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
            </el-select>
        </el-form-item>
        </el-col>
       </el-row>
      
      
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="" @click="unitModification = false">取 消</el-button>
        <el-button v-if="modify" type="primary" @click="modifyDetermine"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/api/device/device.js";
export default {
  name:'nuitmange',
  data() {
    return {
      isLoading: false,
      unitModification: false,
      formData: {
        status: 0,
        searchValue: "",
      },
      form:{
        devIndex:'',
        unitFrequency:'',
        unitFrequencyDev:'',
        phaseVoltage:'',
        lineVoltage:'',
        voltageDev:'',
        uvoltageDev:'',
        ieffective:'',
        singleP:'',
        singleViewP:'',
        singleNoP:'',
        totalActiveP:'',
        totalViewP:'',
        totalNoP:'',
        vfundEffective:'',
        ifund:'',
        fundActiveP:'',
        fundNoP:'',
        vdistortion:'',
        vharmonicRate:'',
        iharmonic:'',
        pharmonic:'',
        iiharmonic:'',
        positiveV:'',
        noPositiveV:'',
      },
      expandID:[],
      device: [
        {
          id: 0,
          name: "投运",
        },
        {
          id: 2,
          name: "停运",
        },
        {
          id: 1,
          name: "热备用",
        },
      ],
      frequency: [
        {
          id: 0,
          name: "Hz",
        },
        {
          id: 2,
          name: "kHz",
        },
      ],
      validValue: [
        {
          id: 0,
          name: "kV",
        },
        {
          id: 2,
          name: "V",
        },
      ],
      deviation: [
        {
          id: 0,
          name: "%",
        },
      ],
      RMS: [
        {
          id: 0,
          name: 'A'
        },
      ],
      meritorious: [
        {
          id: 0,
          name: "kW",
        },
        {
          id: 2,
          name: "W",
        },
      ],
      apparent: [
        {
          id: 0,
          name: "kVA",
        },
        {
          id: 2,
          name: "VA",
        },
      ],
      reactivePower: [
        {
          id: 0,
          name: "kVar",
        },
        {
          id: 2,
          name: "Var",
        },
      ],
      vh:undefined,
      tableData:[],
    };
  },
  computed: {
    treeTable: function () {
      var searchValue = this.formData.searchValue;
      if (searchValue) {
        // 一般表格的查询
        // return  this.tableData.filter(function(dataNews){
        //   return Object.keys(dataNews).some(function(key){
        //     return String(dataNews[key]).toLowerCase().indexOf(search) > -1
        //   })
        // }
        //console.log(this.tableData);
        let treeData = this.tableData;
        let handleTreeData = this.handleTreeData(treeData, searchValue);
        this.setExpandRow(handleTreeData);
        this.expandID = this.expandID.join(",").split(",");
       // console.log(this.expandID);
        return handleTreeData;
      }
      return this.tableData;
    },
  },
  created() {
    this.onsubmit()
  },
  mounted() { 
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {

          this.vh = window.sessionStorage.getItem("appheight") - 55;
        },
    filterNode() {},
    //  树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return [];
      }
      const array = [];
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false;
        for (let pro in treeData[i]) {
          if (typeof treeData[i][pro] == "string") {
            match = treeData[i][pro].includes(searchValue);
            if (match) break;
          }
        }

        if (
          this.handleTreeData(treeData[i].children, searchValue).length > 0 ||
          match
        ) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue),
          });
        }
      }
      return array;
    },
    // 将过滤好的树形数据展开
    setExpandRow(handleTreeData) {
      if (handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandID.push(i.id);
          if (i.children.length) {
            this.setExpandRow(i.children);
          }
        }
      }
    },
    //查询
    onsubmit() {
        this.isLoading = true
      let data = {
        devFlag: this.formData.status,
      };
      api.nodeTree(data).then((res) => {
        this.tableData = res.data
        let hierarchy =2
        this.expandByHierarchy(hierarchy)
        this.isLoading = false
      });
    },
    //修改
    modify(val){
        //console.log(val);
        this.unitModification = true
        this.form = val
        this.form.devIndex = val.id
    },
    //修改确定
    modifyDetermine() {
      this.$confirm("是否确认修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.saveDeviceUnit(this.form).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                message: res.message,
                type: "success",
              });
            }
            this.unitModification = false;
            // this.onsubmit();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    getNodeByHierarchy(list, hierarchy, nodeName = 'children') {
       // console.log(list, hierarchy);
        if (list && list.length) {
            if (hierarchy > 1) {
            const allRow = []
            list.forEach(item => {
                allRow.push(item)
                if (item[nodeName]) {
                allRow.push(...this.getNodeByHierarchy(item[nodeName], hierarchy - 1, nodeName))
                }
            })
            return allRow
            } else if (hierarchy === 1) {
            return list
            } else return []
        } else return []
    },
    expandByHierarchy(hierarchy) {
      this.$refs.plan.setAllTreeExpand(false)
      const rows = this.getNodeByHierarchy(this.tableData, hierarchy)
      this.$refs.plan.setTreeExpand(rows, true)
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.xiaoshou {
  cursor: pointer;
}
</style>

