<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" @change="handleStatusChange"
          active-text="全网" inactive-text="网公司" inactive-color="#666666" v-model="formData.monitorFlag">
        </el-switch>
      </el-form-item>

      <el-form-item label="统计类型:" class="box">
        <el-select v-model="formData.statisticalType" clearable placeholder="请选择">
          <el-option v-for="item in statisticalType" :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="终端等级:" class="box">
        <el-select v-model="formData.algoDescribe" clearable placeholder="请选择">
          <el-option v-for="item in terminalClass" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <Area @click="handleNodeClick" ref="area" class="box"></Area>
      </el-form-item>

      <el-form-item label="电压等级:" class="box">
        <el-select v-model="formData.scale" clearable multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in voltageLevel" :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="终端厂家:" class="box">
        <el-select v-model="formData.manufacturer" clearable multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in terminalManufacturer" :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="干扰源类型:" class="box1">
        <el-select v-model="formData.loadType" clearable multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in interferenceType" :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>
        <Timeinterval :interval="3" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <el-select v-show="false" v-model="ExpandedNum" @change="handleExpandNumChange" placeholder="选择展开级别" size="mini"
          style="left: 0; width: 100px">
          <el-option label="不展开" :value="0"></el-option>
          <el-option label="展开1" :value="1"></el-option>
          <el-option label="展开2" :value="2"></el-option>
          <el-option label="展开3" :value="3"></el-option>
        </el-select>
        <el-table stripe :data="tableData" class="xshou" style="width: 100%; margin-bottom: 0" row-key="id"
          id="rebateSetTable" border :height="height + 'px'" :expand-row-keys="expandID" highlight-current-row
          :header-cell-style="{
            //background:'#5E95E8',
            //color:'#FFFFFF',
            height: '25px',
            top: '0px',
            padding: '0px',
          }" v-loading="loading" element-loading-text="数据加载中" header-cell-class-name="table_header"
          :row-style="{ height: '25px' }" :cell-style="{ padding: '0px' }"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column min-width="150" prop="name" :label="typedata" sortable :show-overflow-tooltip="true"
            width="200"></el-table-column>
          <el-table-column min-width="150" align="center" prop="voltageLevel" v-if="dydj" label="电压等级" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.voltageLevel == null" type="primary" size="small">/</span>
              <span v-if="scope.row.voltageLevel != null" type="primary" size="small">{{ scope.row.voltageLevel
                }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="networkParam" label="网络参数" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.networkParam == null" type="primary" size="small">/</span>
              <span v-if="scope.row.networkParam != null" type="primary" size="small">{{ scope.row.networkParam
                }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="name" :show-overflow-tooltip="true" label="名称" sortable>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="factoryName" label="厂家" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.factoryName == null" type="primary" size="small">/</span>
              <span v-if="scope.row.factoryName != null" type="primary" size="small">{{ scope.row.factoryName }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="deviceName" label="终端名称" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.deviceName == null" type="primary" size="small">/</span>
              <span v-if="scope.row.deviceName != null" type="primary" size="small">{{ scope.row.deviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="state" label="通讯状态" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.state == null" type="primary" size="small">/</span>
              <span v-if="scope.row.state == 0" type="primary" size="small">中断</span>
              <span v-if="scope.row.state == 1" type="primary" size="small">正常</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="time" label="最新数据时间" :show-overflow-tooltip="true"
            sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.time == null" type="primary" size="small">/</span>
              <span v-if="scope.row.time != null" type="primary" size="small">{{
                scope.row.time
              }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" align="center" prop="onlineRateData" label="在线率(%)">
            <template slot-scope="scope">
              <span v-if="scope.row.onlineRateData == null" type="primary" size="small">暂无数据</span>
              <span v-else type="primary" size="small">{{
                scope.row.onlineRateData.toFixed(2)
              }}</span>
              <!-- <span  type="primary" size="small" @click="clickFn" style="color:blue;text-decoration:underline">查看</span> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../../components/Timeinterval.vue";
import api from "@/api/integraliy/integraliy";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: "",
      height: null,
      loading: false,
      statisticalType: [], //统计类型
      voltageLevel: [], //电压等级
      terminalManufacturer: [], //终端厂家
      interferenceType: [], //干扰源类型
      terminalClass: [
        {
          id: 0,
          value: "选项1",
          label: "极重要",
        },
        {
          id: 1,
          value: "选项1",
          label: "重要",
        },
        {
          id: 2,
          value: "选项1",
          label: "普通",
        },
        {
          id: 3,
          value: "选项1",
          label: "不重要",
        },
      ], //终端等级
      formData: {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        algoDescribe: null,
        scale: [],
        manufacturer: [],
        loadType: [],
        serverName: "harmonic-boot",
      },
      ExpandedNum: 2,
      expandID: [],
      tableData: [],
      typedata: "",
      dydj: false,
      device: "",
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
    this.handleExpandNumChange();
    this.formData.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
    this.onSubmit();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setHeight)
  },
  methods: {
    setHeight() {
      this.device = window.devicePixelRatio;
      this.height = window.sessionStorage.getItem("appheight") - 195;

    },
    clickFn() {
      alert("111");
    },
    //判断需要展开层级
    handleExpandNumChange() {
      if (this.ExpandedNum > 0) {
        this.setExpandKeys(this.tableData);
      }
    },
    //层级展开递归方法
    setExpandKeys(dataList, n) {
      if (!n) n = 1;
      for (let i = 0; i < dataList.length; i++) {
        if (n <= this.ExpandedNum) {
          //this.expandID=[]
          this.expandID.push(`${dataList[i].id}`);
          if (dataList[i].hasOwnProperty("children")) {
            const children = dataList[i].children;
            this.setExpandKeys(children, n + 1);
          }
        }
      }
    },
    guid() {
      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        let r = (Math.random() * 16) | 0,
          v = c === "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    //获取类型
    getclassificationData() {
      //统计类型
      var code1 = "Statistical_Type";
      this.statisticalType = dicData(code1, ["Report_Type"]);
      this.formData.statisticalType = this.statisticalType[0];
      //电压等级
      var code3 = "Dev_Voltage";
      this.voltageLevel = dicData(code3, []);
      this.formData.scale = this.voltageLevel;
      //终端厂家
      var code4 = "Dev_Manufacturers";
      this.terminalManufacturer = dicData(code4, []);
      this.formData.manufacturer = this.terminalManufacturer;
      //干扰源类型
      var code5 = "Interference_Source";
      this.interferenceType = dicData(code5, []);
      this.formData.loadType = this.interferenceType;
    },

    //查询
    onSubmit() {
      this.loading = true;
      // console.log("========", this.formData);

      this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
      this.formData.searchEndTime = this.$refs.interval.timeValue[1];
      this.typedata = this.formData.statisticalType.label;
      api.getOnlineRateData(this.formData).then((res) => {
        if (res.code == "A0000") {
          // console.log(res.data[0].deviceName === null)
          if (res.data.length == 0) {
            this.tableData = [];
          } else {
            // this.tableData = res.data
            res.data.forEach((m) => {
              m.id = this.guid();
              m.children.forEach((n) => {
                n.id = this.guid();
                n.children.forEach((d) => {
                  d.id = this.guid();

                  d.children.forEach((c) => {
                    c.id = this.guid();
                    c.children.forEach((p) => {
                      p.id = this.guid();
                      p.children.forEach((a) => {
                        a.id = this.guid();
                        a.children.forEach((r) => {
                          r.id = this.guid();
                          r.children.forEach((t) => {
                            t.id = this.guid();
                          });
                        });
                      });
                    });
                  });
                });
              });
            });
            this.tableData = res.data;
            this.handleExpandNumChange();
            this.loading = false;
          }
        }
      });
    },

    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
      this.formData.deptIndex = data.id;
    },
    //开关触发
    handleStatusChange(val) {
      this.formData.monitorFlag = val;
      //this.fiveTreeData()
    },
    //重置
    resetFn() {
      (this.formData = {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        algoDescribe: null,
        scale: [],
        manufacturer: [],
        loadType: [],
        serverName: "harmonic-boot",
      }),
        (this.$refs.area.form.valueTitle = "全国");
      this.$refs.interval.intervald = 1;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
  padding: 10px;
}

::v-deep .box {
  .el-input {
    width: 160px;
  }
}

::v-deep .box1 {
  .el-input {
    width: 180px;
  }
}

::v-deep .el-form-item {
  margin-bottom: 5px;
}

.tableScopeSwitch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* 打开时文字位置设置 */
.tableScopeSwitch .el-switch__label--right {
  z-index: 1;

  /* 不同场景下可能不同，自行调整 */
}

/* 关闭时文字位置设置 */
.tableScopeSwitch .el-switch__label--left {
  left: 80px;
  /* 不同场景下可能不同，自行调整 */
  z-index: 1;
}

/* 显示文字 */
.tableScopeSwitch .el-switch__label.is-active {
  display: block;
}

.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 200px !important;
  /* 开关按钮的宽度大小 */
}
</style>
