<template>
  <div>
    <el-container id="dept" v-show="view1">
      <el-aside v-show="view" width="300px" id="drag-dept-left">
        <muentree
          @eleMenuData="getTreeText"
          @chushiData="chushiData"
          :number="number"
          :tablename="tablename"
          ref="commonTree"
        ></muentree>
      </el-aside>
      <div id="drag-dept">
        <el-tooltip
          class="item"
          effect="dark"
          :content="view ? '收缩' : '展开'"
          placement="top-start"
        >
          <i
            :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
            style="
              font-size: 18px;
              z-index: 2000;
              cursor: pointer;
              margin-right: 0px;
              width: 30px;
              height: 30px;
              background: rgba(6, 70, 122, 0);
            "
            @click="changeview"
          ></i>
        </el-tooltip>
      </div>
      <el-main
        id="drag-dept-right"
        class="pd10"
        v-loading="loading"
        style="padding-left: 5px"
        element-loading-text="数据加载中"
      >
        <div class="wzhixx" v-show="falg">
          <div>
            <div style="float: left; margin-top: -2px">
              <i
                style="color: #339966; font-size: 20px"
                class="el-icon-location-information"
              ></i>
              <span style="color: #000">当前位置:</span>
            </div>
            <div style="height: auto; overflow: hidden">
              <p class="zt animate h3">
                <!-- {{ treenode!=undefined?treenode.parent.parent.parent.parent.data.name +`>` +treenode.parent.parent.parent.data.name +`>` +treenode.parent.parent.data.name +`>` +treenode.parent.data.name+`>` +treenode.data.name:wezhiname}} -->
                {{
                  treenode != undefined
                    ? treenode.parent.parent.parent.data.name +
                      `>` +
                      treenode.parent.parent.data.name +
                      `>` +
                      treenode.parent.data.name +
                      `>` +
                      treenode.data.name
                    : wezhiname
                }}
              </p>
            </div>
          </div>
        </div>

        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
          :style="'width: 100%; transform: translateX(0px);height:' + vh"
        >
          <el-tab-pane
            v-for="(item, index) in tabsData"
            :label="item.label"
            :key="item.id"
            :name="item.id"
            :index="index"
            :lazy="true"
          >
            <el-row v-if="item.id === 'dzgl'">
              <el-col>
                <div style="float: right">
                  <el-button type="primary" class="el-icon-edit"
                    >修改定值</el-button
                  >
                  <el-button type="primary" class="el-icon-edit"
                    >下发定值</el-button
                  >
                  <el-button type="primary">获取外部定值描述</el-button>
                  <el-button type="primary">校验外部定值</el-button>
                  <el-button type="primary">获取内部定值描述</el-button>
                  <el-button type="primary">校验内部定值</el-button>
                </div>
                <div style="clear: both"></div>
                <div class="mt10">
                  <el-radio-group v-model="radio1">
                    <el-radio-button label="1">基本定值</el-radio-button>
                    <el-radio-button label="2">谐波电流</el-radio-button>
                    <el-radio-button label="3">谐波电压</el-radio-button>
                    <el-radio-button label="4">间歇波定值</el-radio-button>
                  </el-radio-group>
                </div>
                <el-table
                  stripe
                  :data="constantValueData"
                  :height="vh1"
                  border
                  class="mt10 table"
                  style="width: 100%"
                  header-cell-class-name="table_header"
                  :header-cell-style="{
                    height: '25px',
                    padding: '0px',
                  }"
                  :row-style="{ height: '35px' }"
                  :cell-style="{ padding: '0px' }"
                  :row-class-name="rowClassName"
                >
                  <el-table-column
                    prop="number"
                    align="center"
                    label="序号"
                    min-width="50"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="name"
                    label="定值名称"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="current"
                    label="当前定值"
                    display="none"
                  >
                    <template slot-scope="scope">
                      <el-input
                        min="0"
                        size="mini"
                        v-model="scope.row.modify"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="modify"
                    label="修改定值"
                    display="none"
                  >
                    <template slot-scope="scope">
                      <el-input
                        min="0"
                        size="mini"
                        v-model="scope.row.modify"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="upDataTime"
                    label="定值范围"
                  ></el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row v-if="item.id === 'wjgl'">
              <el-col>
                <div class="BOX">
                  <span style="display: inline-block; width: 300px"
                    >前置IP:</span
                  >
                  <span>终端路径:</span>
                </div>
                <el-row :gutter="20" class="mt10">
                  <el-col :span="12">
                    <span class="BOX1">服务器目录</span>
                    <el-form ref="form" inline style="float: right">
                      <el-form-item>
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-download"
                          >本地上传</el-button
                        >
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-download"
                          >批量上传终端</el-button
                        >
                      </el-form-item>
                    </el-form>
                    <el-table
                      stripe
                      :data="managementData"
                      :height="vh2"
                      border
                      style="width: 100%"
                      header-cell-class-name="table_header"
                      :header-cell-style="{
                        height: '25px',
                        padding: '0px',
                      }"
                      :row-style="{ height: '28px' }"
                      :cell-style="{ padding: '0px' }"
                      @selection-change="handleSelectionChange"
                    >
                      <el-table-column
                        type="selection"
                        align="center"
                        min-width="50"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="userName"
                        label="名称"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="endTime"
                        label="类型"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="upDataTime"
                        label="大小"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="upDataTime"
                        label="操作"
                      ></el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="12">
                    <span class="BOX1">终端目录</span>
                    <el-form ref="form" inline style="float: right">
                      <el-form-item>
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-s-home"
                          >返回根路径</el-button
                        >
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-top"
                          >返回上级</el-button
                        >
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-refresh"
                          >刷新</el-button
                        >
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-download"
                          >批量下载</el-button
                        >
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-dialog
      :close-on-click-modal="false"
      title="装置型号选择"
      :visible.sync="Devicemodel"
      width="20%"
    >
      <el-table
        stripe
        :data="DevicemodelData"
        :height="vh3"
        border
        style="width: 100%"
        header-cell-class-name="table_header"
        :header-cell-style="{
          height: '25px',
          padding: '0px',
        }"
        :row-style="{ height: '28px' }"
        :cell-style="{ padding: '0px' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          min-width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="desc"
          label="控制字描述"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确定</el-button>
        <el-button type="primary" @click="Devicemodel = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Muentree from "@/views/components/menuTree/el-tree";
//   import api from "@/api/harmonic/onlineData";
export default {
  name: "nowmonitoring",
  components: {
    Muentree,
  },
  watch: {
    treenode(a, b) {
      if (a) {
        this.falg = true;
        this.falg1 = false;
      }
    },
  },
  data() {
    return {
      boxoList: {},
      wp: {},
      Devicemodel: true,
      view1: true,
      view2: false,
      value: 1,
      loading: false,
      treenode: undefined,
      tablename: 1,
      vh: null,
      vh1: null,
      vh2: null,
      vh3: null,
      number: undefined,
      modifyData: "",
      id: "",
      radio1: "1",
      asideheight: undefined,
      timeValue: undefined,
      screenWidth: undefined,
      screenHeight: undefined,
      activeName: "dzgl",
      //title:'',
      falg: true,
      falg1: true,
      view: true,
      dataTree: [],
      tabsData: [
        {
          label: "定值管理",
          id: "dzgl",
        },
        {
          label: "文件管理",
          id: "wjgl",
        },
      ],
      treenode: undefined,
      linelist: [],
      treedata: [],
      constantValueData: [{ name: "123", modify: "123" }],
      DevicemodelData: [{ desc: "电压偏差越限功能退出",  }],
      managementData: [],
      deptIndex: "",
      wezhiname: null,
      ptType: 0,
    };
  },
  created() {},
  mounted() {
 
    var info = window.sessionStorage.getItem("Info");
    info = eval("(" + info + ")");
    this.deptIndex = info.deptId;
    this.bindResize();
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 10 + "px";
    this.vh1 = window.sessionStorage.getItem("appheight") - 156 + "px";
    this.vh2 = window.sessionStorage.getItem("appheight") - 150 + "px";
    this.vh3 = window.sessionStorage.getItem("appheight") - 250 + "px";
          
        },
    changeview() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
    },
    handleClick(tab, event) {
      this.checkbox = false;
      //this.falg = false;
    },
    //序号
    rowClassName({ row, rowIndex }) {
      row.number = rowIndex + 1;
    },
    //复选框
    handleSelectionChange(val) {
      //console.log(val);
      this.multipleSelection = val;
    },
    /**
     * 缩放条拖动进而改变左侧div宽度方法
     */
    bindResize() {
      /**开始坐标 */
      let startX;
      /**开始宽度 */
      let startWidth = getScalableDivWidth();

      document
        .querySelector("#drag-dept")
        .addEventListener("mousedown", startDrag);

      function startDrag(e) {
        startX = e.clientX;
        startWidth = getScalableDivWidth();

        document.documentElement.addEventListener("mousemove", onDrag);
        document.documentElement.addEventListener("mouseup", stopDrag);
      }

      function onDrag(e) {
        let newWidth = startWidth + e.clientX - startX;
        document.querySelector("#drag-dept-left").style.width = newWidth + "px";
      }

      function stopDrag() {
        document.documentElement.removeEventListener("mousemove", onDrag);
        document.documentElement.removeEventListener("mouseup", stopDrag);
      }

      /**获取宽度 */
      function getScalableDivWidth() {
        return parseInt(
          window.getComputedStyle(document.querySelector("#drag-dept-left"))
            .width,
          10
        );
      }
    },
    //初始化树节点默认点击
    chushiData(id, data) {
      this.id = id;
      window.sessionStorage.setItem("nodeid", id);
      this.linelist.push(id);
      this.treedata = data;
      this.wezhiname =
        data[0].children[0].name +
        ">" +
        data[0].children[0].children[0].name +
        ">" +
        data[0].children[0].children[0].children[0].name +
        ">" +
        data[0].children[0].children[0].children[0].children[0].name;
    },
    //二次点击触发点击事件
    getTreeText(menudata, treenode, nodeCom, id) {
     // console.log(menudata, treenode, nodeCom, id);
      if (treenode.data.level == 6) {
        // console.log('点击',treenode,nodeCom,menudata)
        // console.log('数据',menudata.ptType)
        //   this.ptType = menudata.ptType;
        //   this.menudata = menudata;
        this.treenode = treenode;
        this.id = id;
        this.linelist = [];
        this.linelist.push(id);
      } else {
        return;
      }
    },
    //获取5层树
    fiveTreeData() {
      var data = {
        deptIndex: this.deptIndex,
        monitorFlag: 2,
        powerFlag: 2,
        loadType: null,
        manufacturer: null,
        serverName: "harmonic-boot",
        statisticalType: "",
        scale: null,
      };
      api.getTerminalTreeForFive(data).then((res) => {
        if (res.code === "A0000") {
          res.data.forEach((m) => {
            m.icon = "el-icon-s-data";
            m.children.forEach((n) => {
              n.icon = "el-icon-delete";
              n.children.forEach((d) => {
                d.icon = "el-icon-user";
                d.children.forEach((f) => {
                  f.icon = "el-icon-warning";
                  f.children.forEach((e) => {
                    e.icon = "el-icon-phone-outline";
                  });
                });
              });
            });
          });

          this.treedata = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body {
  max-height: 100vh;
  min-height: 150px;
  padding: 10px;
  overflow-y: auto;
}
::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//设置不成功，页面卡顿
  visibility: hidden;
}
.BOX {
  height: 24px;
  //   padding: 0 40px 0 20px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #003078;
}
.BOX1 {
  height: 24px;
  //   padding: 0 40px 0 20px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 42px;
  color: #003078;
}
::v-deep.wzhixx {
  position: fixed;
  width: 400px;
  z-index: 1;
  font-size: 14px;
  font-weight: 550;
  margin-top: 10px;
  right: 15px;
}
//   ::v-deep.boxd {
//     height: auto;
//     overflow: hidden;
//   } //自适应高度
::v-deep .table {
  .el-input {
    width: 150px;
  }
}
::v-deep.animate {
  padding-left: 20px;
  font-size: 12px;
  color: #000;
  display: inline-block;
  white-space: nowrap;
  animation: 10s wordsLoop linear infinite normal;
}
::v-deep .el-radio-button--small .el-radio-button__inner {
  width: 342px;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

::v-deep.zt {
  color: $themeColor;
}
</style>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}

#drag-dept-left {
  min-width: 220px;
  max-width: 35%;
}
::v-deep .el-aside {
  overflow: hidden !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/**拖拽条样式 */
#drag-dept {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 10;
  right: 0;
  width: 5px;
  background: #868788;
  background-color: #04607c2a;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
  cursor: col-resize;
}

#drag-dept i {
  display: inline-block;
  height: 14px;
  width: 5px;
  background-color: #e9e9e9;
  margin: 0 1px;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: auto;
  cursor: pointer;
}
::v-deep .el-tabs__nav {
  white-space: nowrap;
  width: 100%;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  float: left;
  z-index: 2;
}
</style>
