<template>
  <div>
    <el-form :inline="true" :model="formData">
      <el-form-item>
        <el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" active-text="全网" inactive-text="网公司"
          inactive-color="#666666" v-model="formData.monitorFlag">
        </el-switch></el-form-item>
      <el-form-item label="统计类型:">
        <el-select v-model="formData.statisticalType" placeholder="请选择统计类型" style="width: 160px">
          <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-select v-model="formData.algoDescribe" multiple collapse-tags placeholder="终端等级" style="width: 160px">
          <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 label="电压等级:">
        <el-select v-model="formData.scale" multiple collapse-tags placeholder="请选择电压等级" style="width: 160px">
          <el-option v-for="item in voltageleveloption" :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.manufacturer" multiple collapse-tags placeholder="请选择终端厂家" style="width: 160px">
          <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.manufacturer"
          multiple
          collapse-tags
          placeholder="请选择终端厂家"
          style="width: 160px;"
        >
          <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 placeholder="请选择干扰源类型" style="width: 180px">
          <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.linePassRate" placeholder="请选择合格率" style="width: 180px">
          <el-option label="合格" value="1"> </el-option>
          <el-option label="不合格" value="0"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <Area @click="handleNodeClick"></Area>
      </el-form-item>
      <el-form-item>
        <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="ml10" icon="el-icon-search" @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-select v-show="false" v-model="ExpandedNum" @change="handleExpandNumChange" placeholder="选择展开级别" size="mini"
      style="width: 100px; left: 0px">
      <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: 10px" row-key="id"
      id="rebateSetTable" border highlight-current-row :height="vh + 'px'" :expand-row-keys="expandID"
      header-cell-class-name="table_header" v-loading="loading" element-loading-text="数据加载中"
      :row-style="{ height: '25px' }" :cell-style="{ padding: '0px' }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column min-width="150" prop="name" :label="typedata" :show-overflow-tooltip="true" class="TAB"
        width="200">
      </el-table-column>
      <el-table-column min-width="80" align="center" prop="voltageLevel" v-if="dydj" label="电压等级">
        <template slot-scope="scope">
          <div v-if="scope.row.level == 6">
            <span v-if="scope.row.lineScale == null" type="primary" size="small">/</span>
            <span v-if="scope.row.lineScale != null" type="primary" size="small">{{ scope.row.lineScale }}</span>
          </div>
          <div v-else>
            <span v-if="scope.row.subScale == null" type="primary" size="small">/</span>
            <span v-if="scope.row.subScale != null" type="primary" size="small">{{ scope.row.subScale }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" prop="ip" label="网络参数">
        <template slot-scope="scope">
          <span v-if="scope.row.ip == null" type="primary" size="small">/</span>
          <span v-if="scope.row.ip != null" type="primary" size="small">{{
            scope.row.ip
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column min-width='150' align="center" prop="name" :show-overflow-tooltip='true' label="名称"  >
    
                                </el-table-column> -->
      <el-table-column min-width="100" align="center" prop="manufacturer" label="厂家">
        <template slot-scope="scope">
          <span v-if="scope.row.manufacturer == null" type="primary" size="small">/</span>
          <span v-if="scope.row.manufacturer != null" type="primary" size="small">{{ scope.row.manufacturer }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150" align="center" prop="name" label="终端名称">
        <template slot-scope="scope">
          <span v-if="scope.row.name == null" type="primary" size="small">/</span>
          <span v-if="scope.row.name != null" type="primary" size="small">{{
            scope.row.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80" align="center" prop="comFlag" label="通讯状态">
        <template slot-scope="scope">
          <span v-if="scope.row.comFlag == null" type="primary" size="small">/</span>
          <span v-if="scope.row.comFlag == 0" type="primary" size="small">中断</span>
          <span v-if="scope.row.comFlag == 1" type="primary" size="small">正常</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" prop="updateTime" label="最新数据时间">
        <!-- :show-overflow-tooltip="true" -->

        <template slot-scope="scope">
          <span v-if="scope.row.updateTime == null" type="primary" size="small">/</span>
          <span v-if="scope.row.updateTime != null" type="primary" size="small">{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" prop="integrityData" label="完整性(%)">
        <template slot-scope="scope">
          <span v-if="
            scope.row.integrityData == null ||
            scope.row.integrityData == 3.14159
          " type="primary" size="small">暂无数据</span>
          <span v-else type="primary" size="small">{{
            scope.row.integrityData.toFixed(2)
          }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
import { getLineIntegrityData } from "@/api/integraliy/integraliy";
export default {
  components: {
    Area,
    Timeinterval,
  },
  props: {},
  data() {
    return {
      vh: undefined,
      formData: {
        //后面需要修改
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
        linePassRate: "",
      },
      classificationData: [],
      dejioption: [],
      deji: "",
      //电压等级
      voltageleveloption: [],
      interfereoption: [],
      terminaloption: [],
      ExpandedNum: 2,
      tableData: [],
      typedata: "",
      dydj: true,
      expandID: [],
      loading: false,
      terminalClass: [
        {
          id: 0,
          value: "0",
          label: "极重要",
        },
        {
          id: 1,
          value: "1",
          label: "重要",
        },
        {
          id: 2,
          value: "2",
          label: "普通",
        },
        {
          id: 3,
          value: "3",
          label: "不重要",
        },
      ], //终端等级
    };
  },
  created() {
    this.info();
  },
  mounted() {
    this.vh = window.sessionStorage.getItem("appheight") - 170;
    this.handleExpandNumChange();

    this.formData.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
    this.onSubmit();
  },
  methods: {
    //字典表
    info() {
      // 获取统计类型
      this.classificationData = dicData("Statistical_Type", ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
      //   字典获取数据电压等级;
      this.voltageleveloption = dicData("Dev_Voltage", []);
      this.formData.scale = this.voltageleveloption;
      //字典获取数据终端厂家
      this.terminaloption = dicData("Dev_Manufacturers", []);
      this.formData.manufacturer = this.terminaloption;
      //字典获取数据干扰源类型
      this.interfereoption = dicData("Interference_Source", []);
      this.formData.loadType = this.interfereoption;
    },
    // 区域
    handleNodeClick(data) {
      // console.log(data);
      this.formData.deptIndex = data.id;
    },
    // 查询
    onSubmit() {
      this.loading = true;
      // console.log("========", this.formData);

      (this.formData.serverName = "harmonic-boot"),
        (this.formData.searchBeginTime = this.$refs.Timeinterval.timeValue[0]);
      this.formData.searchEndTime = this.$refs.Timeinterval.timeValue[1];
      this.typedata = this.formData.statisticalType.label;
      getLineIntegrityData(this.formData).then((res) => {
        if (res.code == "A0000") {
          // console.log(res.data[0].deviceName === null)
          if (res.data.length == 0) {
            this.tableData = [];
            this.loading = false;
          } 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;
          }
        }
      });
    },
    // 重置
    Reset() {
      this.formData = {
        //后面需要修改
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
        linePassRate: "",
      };
    },
    //判断需要展开层级
    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);
      });
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
::v-deep .el-tooltip {
  text-align: left !important;
}
</style>
