<template>
  <div class="pd10"  v-loading="loading"  element-loading-text="数据加载中">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="统计类型:" v-show="false">
        <el-select
          v-model="formData.statisticalType"
          @change="changeclasss"
          placeholder="请选择统计类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in classificationData"
            :key="item.id"
            :label="item.name"
            :value="{
              label: item.name,
              value: item.id,
              name: item.name,
              id: item.id,
              code: item.code,
              sort: item.sort,
            }"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域:">
        <!-- <el-form-item label="区域:" style="margin-left:-4.4%"> -->
        <el-select
          ref="selectTree1"
          v-model="deptName"
          placeholder="请选择所属部门区域"
          style="width: 100%"
        >
          <el-option :value="deptIndex" style="height: auto">
            <el-tree
              ref="tree"
              :data="treeData"
              node-key="id"
              accordion
              :default-expanded-keys="idArr"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
              <span class="span-ellipsis" slot-scope="{ node, data }">
                <span :title="data.name">{{ data.name }}</span>
              </span>
            </el-tree>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="监测点性质:">
        <el-select
          v-model="formData.powerFlag"
          placeholder="请选择监测点性质"
          style="width: 100%"
        >
          <el-option
            v-for="item in terminalstatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="queryDataInfo"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="text" @click="closeHandle"
          >条件筛选<i
            :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
          ></i
        ></el-button>
      </el-form-item>
    </el-form>

    <div class="container" id="container">
      <i @click="closeHandle" class="el-icon-circle-close coles"></i>
      <el-form :inline="true" :model="formData" label-width="90px" class="">
        <el-form-item label="电压等级:">
          <el-select
            v-model="formData.scale"
            multiple
            collapse-tags
            clearable
            placeholder="请选择电压等级"
            style="width: 100%"
          >
            <el-option
              v-for="item in voltageleveloption"
              :key="item.id"
              :label="item.name"
              :value="{
                label: item.name,
                value: item.value,
                code: item.code,
                gvalue: item.gvalue,
                name: item.name,
                id: item.id,
                sort: item.sort,
              }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终端厂家:">
          <el-select
            v-model="formData.manufacturer"
            multiple
            collapse-tags
            clearable
            placeholder="请选择终端厂家"
            style="width: 100%"
          >
            <el-option
              v-for="item in terminaloption"
              :key="item.id"
              :label="item.name"
              :value="{
                label: item.name,
                value: item.id,
                code: item.code,
                name: item.name,
                id: item.id,
                sort: item.sort,
              }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干扰源类型:">
          <el-select
            v-model="formData.loadType"
            multiple
            collapse-tags
            clearable
            placeholder="请选择干扰源类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in interfereoption"
              :key="item.id"
              :label="item.name"
              :value="{
                label: item.name,
                value: item.id,
                code: item.code,
                name: item.name,
                id: item.id,
                sort: item.sort,
              }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上报类型:">
          <el-select
            v-model="formData.monitorFlag"
            placeholder="请选择上报类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in communicationstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="20">
      <el-col :span="24">
        <terminalconsttable
          :classvalue="classt"
          :ptableDate="ptableDate"
          :loading="loading"
        ></terminalconsttable>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getappheight, getheight } from "@/assets/commjs/common";
import { guanzhou } from "@/assets/commjs/token";
import api1 from "@/api/pollution/pollution";
import timepicker from "../../components/TimePicker/index4";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "@/api/integraliy/integraliy";
import ap from "@/api/Terminal/decive";

import terminalconsttable from "../../components/terminalconsttable";

export default {
  name: "counting",
  components: {
    timepicker,
    terminalconsttable,
  },
  data() {
    return {
      view: false,
      formInline: {},
      loading: false,
      asideheight: undefined,
      id: 1,
      copent: 0,
      title: "电网拓扑",
      xdata: [
        "江苏省",
        "江西省",
        "安徽省",
        "湖北省",
        "浙江省",
        "湖南省",
        "广东省",
        "福建省",
        "海南省",
        "四川省",
        "青海省",
        "河北省",
      ],
      ydata: [
        92.6, 25.9, 39.0, 26.4, 28.7, 90.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3,
      ],
      classvalue: 0,
      activeName: "tab1",
      formData: {
        //后面需要修改
        serverName: "harmonic-boot",
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        statisticalType: "",
        scale: [],
      },
      deptId: "",
      deptName: "",
      deptIndex: "",
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //统计类型
      classificationData: [],
      //电压等级
      voltageleveloption: [],
      //终端厂家
      terminaloption: [],
      //干扰源类型
      interfereoption: [],
      //上报类型
      communicationstatus: [
        { value: 2, label: "全部" },
        { value: 1, label: "灿能上报" },
        { value: 0, label: "非灿能上报" },
      ],
      //终端状态
      terminalstatus: [
        { value: 2, label: "全部" },
        { value: 1, label: "非电网侧" },
        { value: 0, label: "电网侧" },
      ],
      classt: "Power_Network",
      ptableDate: [],
    };
  },
  created() {
    //this.guanzhou();
    var info = window.sessionStorage.getItem("Info");
    info = eval("(" + info + ")");
    this.formData.deptIndex = info.deptId;
    this.getAreaDept();
    this.getclassificationData();
    this.getVoltage();
    this.getManufacturer();
    this.getLoadType();
  },
  mounted() {
    //console.log(this.formData);

    // this.asideheight = getappheight();
    this.queryDataInfo();
  },
  methods: {
    closeHandle() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
      //console.log('关闭和展开');
      const dom = document.getElementById("container");
      const closeDom = document.getElementsByClassName("close")[0];
      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
        dom.className = "container expend";
      } else {
        dom.className = "container close-container";
      }
    },

    chuliparmerary(data) {
      let scale = data.scale;
      scale.forEach((item) => {
        item.value = item.gvalue;
      });
    },
    //切换统计类型
    changeclasss(val) {
      this.classt = val.code;
    },
    //2次组件触发事件
    querfromdata(data) {},
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs.child.onlinerateechart();
      });
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.$refs.selectTree1.blur();
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    //查询触发方法
    queryDataInfo() {
      this.loading = true;
      let data = JSON.parse(JSON.stringify(this.formData));
      this.chuliparmerary(data);
     // console.log(data);
      ap.getTerminalLedger(data).then((res) => {
        if (res.code == "A0000") {
          if (res.data.length == 0) {
            this.ptableDate = [];
            this.loading = false;
          } else {
            var arrData = [];
            var arr = [];
            var number;
            var tableData = res.data;
            for (var i = 0; i < tableData.length; i++) {
              for (var j = 0; j < tableData[i].list.length; j++) {
                for (var n = 0; n < tableData[i].list[j].list.length; n++) {
                  arr.push(tableData[i].list[j].list[n]);
                  for (var p = 1; p < arr.length + 1; p++) {
                    number = p;
                  }
                  var map = {
                    num: number,
                    name: tableData[i].areaName,
                    lx: tableData[i].list[j].name,
                    flx: tableData[i].list[j].list[n].dicName,
                    bdzgs: tableData[i].list[j].list[n].subCount,
                    zdgs: tableData[i].list[j].list[n].devCount,
                    jcdgs: tableData[i].list[j].list[n].lineCount,
                  };
                  arrData.push(map);
                }
              }
            }

            this.ptableDate = arrData;
            this.loading = false;
          }
        }
      });
    },
    //获取区域
    getAreaDept() {
      api.getAreaDept().then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          this.deptName =res.data[0].name
          data.forEach((element) => {
            this.idArr.push(element.id);
          });
          this.treeData = data;
        }
      });
    },
    //字典获取数据电压等级
    getVoltage() {
      var code = "Dev_Voltage_Stand";
      this.voltageleveloption = dicData(code, []);
      this.formData.scale = this.voltageleveloption;
    },
    //字典获取数据终端厂家
    getManufacturer() {
      var code = "Dev_Manufacturers";
      this.terminaloption = dicData(code, []);
      this.formData.manufacturer = this.terminaloption;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      var code = "Interference_Source";
      this.interfereoption = dicData(code, []);
      this.formData.loadType = this.interfereoption;
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
    },
  },
};
</script>
<style lang="less"  scoped>
@import url("../../../styles/comStyle.less");
.container {
  /* margin: auto; */
  top: 0px;
  right: 0;
  width: 40%;
  height: 0px;
  z-index: 2000;
  position: absolute;
  background-color: #e4e7ebb9;
  overflow: auto;
  scroll-behavior: smooth;
  -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: block;
}
.expend {
  animation: expend ease 5s forwards;
}
.close-container {
  animation: no-expend ease 1s forwards;
}
@keyframes expend {
  from {
    top: 0px;
    height: auto;
  }
  to {
    height: auto;
    top: 0px;
  }
}
@keyframes no-expend {
  from {
    height: 20%;
    top: 0px;
  }
  to {
    top: 0px;
    height: 0px;
  }
}
.coles {
  position: absolute;
  right: 0;
  font-size: 20px;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
</style>
