<template>
  <div class="ui-container">
    <el-card class="box-card" style="height: 100%">
      <el-row :gutter="5">
        <!--左侧列表区-->
        <el-col :span="5">
          <energyTree
            @eleMenuData="getTreeText"
            :dataTree="dataTree"
            ref="energyTree"
          ></energyTree>
        </el-col>
        <!--右侧内容区-->
        <el-col :span="19">
          <div class="grid-content bg-purple-light right-top pad">
            <img src="../../../assets/login/logo.png" class="gr-img" />

            <el-button
              class="el-icon-edit gr-but2"
              type="primary"
              @click="editClick"
              >设备模板分组</el-button
            >
            <el-descriptions
              title="设备基本信息"
              size="small"
              class="gr-des text"
            >
              <el-descriptions-item label="设备名称">
                <el-tag size="mini" type="warning">{{ devInfo.name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="设备编号">{{
                devInfo.did
              }}</el-descriptions-item>
              <el-descriptions-item label="所属网关">{{
                devInfo.netDevName
              }}</el-descriptions-item>
              <el-descriptions-item label="地址">{{
                devInfo.address
              }}</el-descriptions-item>
              <el-descriptions-item label="建单时间">{{
                devInfo.createTime
              }}</el-descriptions-item>

              <el-descriptions-item label="设备状态">{{
                devInfo.state == 0 ? "离线" : "在线"
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <!--tab标签区域-->
          <el-row>
            <el-col :span="24" style="margin-top: 5px">
              <div class="grid-content bg-purple-light">
                <el-tabs
                  v-model="activeName"
                  type="border-card"
                  @tab-click="handleClick"
                  :style="'height:' + mainHeight1"
                >
                  <el-tab-pane
                    :label="item.id"
                    :name="item.anotherName"
                    v-for="(item, index) in tabList"
                    :key="index"
                  >
                    <span slot="label"
                      ><i class="el-icon-s-platform"></i
                      >{{ item.anotherName }}</span
                    >
                  </el-tab-pane>

                  <el-table
                    stripe
                    :data="listdata"
                    border
                    :style="
                      'width: 100%;height:' +
                      mainHeight * 1.7 +
                      'px;overflow-y:auto'
                    "
                  >
                    <el-table-column
                      prop="anotherName"
                      align="center"
                      label="数据名称"
                    >
                      <template slot-scope="scope">
                        <span>{{
                          (scope.row.phase === "M" || scope.row.phase === "T"
                            ? "总"
                            : scope.row.phase + "相") + scope.row.anotherName
                        }}</span>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column prop="box" label="所属盒子" align="center"></el-table-column> -->
                    <el-table-column
                      prop="type"
                      label="数据类型"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="unit"
                      label="单位"
                      align="center"
                    ></el-table-column>
                  </el-table>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageData.pageNum"
                    :page-sizes="[16, 32, 48, 64]"
                    :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.total"
                  >
                  </el-pagination>
                </el-tabs>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <!--新增/修改-->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :destroy-on-close="true"
    >
      <el-dialog
        :close-on-click-modal="false"
        width="30%"
        title="新增组"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="组名称">
            <el-input v-model="formInline.name" placeholder="组名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="primary" @click="groupOnSubmit"
              >确认</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-row>
        <el-form :model="form" ref="form" label-width="80px">
          <el-form-item label="网关名称:" prop="pid">
            <el-select disabled v-model="form.pid" placeholder="请选择">
              <el-option
                v-for="item in netDevList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="设备名称:" prop="name">
            <el-input readonly v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="设备编号:" prop="name">
            <el-input readonly v-model="form.did"></el-input>
          </el-form-item>
        </el-form>
      </el-row>

      <el-row>
        <div class="buttons">
          <el-button type="success" @click="addGroup">新增分组</el-button>
          {{ " 数据集名称: " + this.activeName }}
        </div>
        <el-tree
          :data="groupData"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          style="height: 50vh; overflow-y: auto"
          draggable
          :highlight-current="true"
          @allow-drop="allowDrop"
          @node-drag-end="test"
          @allow-drag="allowDrag"
        >
        </el-tree>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import energyTree from "../../components/tree/energyTree";
import { getappheight, getheight } from "../../../assets/commjs/common";
import { listNetDev } from "@/api/energy/netDev";
import {
  getEnergyTree,
  getEnergyDevInfoById,
  getDevDetailInfoById,
  getTabTemplateById,
  getGroupDetailList,
  addGroupArr,
} from "@/api/energy/logicDev";
import pagination from "../../components/pagination/index";

export default {
  components: { energyTree, pagination },
  data() {
    return {
      groupData: [],

      dialogVisible: false, //设备操作弹窗
      innerVisible: false,
      formInline: { name: "" },

      title: "",
      form: {
        pid: "", //联网设备id
        name: "",
        did: "", //编号
      },
      netDevList: [],

      filterText: "",
      mainHeight: undefined,
      mainHeight1: undefined,
      devInfo: {
        name: "",
        did: "",
        netDevName: "",
        address: "",
        createTime: "",
        position: "",
        state: "",
      },
      device: 1,
      pageData: {
        pageNum: 1,
        pageSize: 16,
        total: 0,
      },
      dataTree: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tabList: [],
      listdata: [],

      activeName: "",
      activeId: "",

      devId: "", //点击树的节点id

      boxData: [], //盒子
      monitorList: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getTree();
  },
  mounted() {
    this.mainHeight = getheight();
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.mainHeight1 = getheight() * 1.95 + "px";
    }
    if (this.device == 1.25) {
      this.mainHeight1 = getheight() * 1.97 + "px";
    }
    if (this.device == 1.5) {
      this.mainHeight1 = getheight() * 1.93 + "px";
    }
    // this.mainHeight1 = (this.mainHeight - 255) + 'px'
  },
  methods: {
    addGroup() {
      this.innerVisible = true;
    },

    allowDrop(draggingNode, dropNode, type) {
      console.log(dropNode);
      if (dropNode.data.level === 2) {
        return type !== "inner";
      } else {
        // 不同级进行处理
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.level == 2;
    },
    groupOnSubmit() {
      let obj = {
        id: "cvf",
        pid: "ggg",
        name: this.formInline.name,
        level: 1,
        children: [],
      };
      this.groupData.push(obj);
      this.formInline.name = "";
      this.innerVisible = false;

      console.log(this.groupData);
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getTreeText(data, level) {
      if (level === 3) {
        this.devId = data.pid;
      } else if (level === 2) {
        this.devId = data.id;
      }
      this.getDeviceInfo();
      this.getTabTemplateById();
    },

    //分页
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.getTabTemplateById();
    },
    handleCurrentChange(val) {
      this.pageData.pageNum = val;
      this.getTabTemplateById();
    },

    currentPage4() {
      return 1;
    },
    cancel() {},
    submitForm() {
      let msg = { setId: this.activeId, data: [] };

      this.groupData.forEach((item) => {
        if (item.children.length != 0) {
          let ids = [];
          item.children.forEach((i) => {
            ids.push(i.id);
          });
          let obj = { name: item.name, id: item.id, children: ids };
          msg.data.push(obj);
        } else {
          let obj = { name: item.name, id: item.id, children: [] };
          msg.data.push(obj);
        }
      });

      this.addGroupArr(msg);
    },

    addGroupArr(data) {
      addGroupArr(data).then((response) => {
        if (response.code === "A0000") {
          this.getGroupDetailList();
          this.innerVisible = false;
          this.$message.success("重新分组成功");
        } else {
          this.$message.error("重新分组失败");
        }
      });
    },

    //获取所有网关设备
    getNetDevList() {
      listNetDev({}).then((response) => {
        this.netDevList = response.data.records;
      });
    },
    //获取设备树
    getTree() {
      getEnergyTree().then((response) => {
        if (response.code == "A0000") {
          this.dataTree = response.data;
          if (this.dataTree.length !== 0) {
            if (this.dataTree[0].children.length !== 0) {
              let id = this.dataTree[0].children[0].id;
              this.devId = id;
              this.getDeviceInfo();
              this.getTabTemplateById();
            }
          }
        }
      });
    },
    //获取点击的设备详情
    getDeviceInfo() {
      getEnergyDevInfoById(this.devId).then((response) => {
        this.devInfo = response.data;
      });
    },
    //获取点击的设备数据详情
    getDeviceDetailInfo() {
      getDevDetailInfoById(
        this.activeId,
        this.pageData.pageNum,
        this.pageData.pageSize
      ).then((response) => {
        this.listdata = response.data.records;
        this.pageData.pageNum = response.data.current;
        this.pageData.pageSize = response.data.size;
        this.pageData.total = response.data.total;
      });
    },
    //获取tab模板
    getTabTemplateById() {
      getTabTemplateById(this.devId).then((response) => {
        if (response.data.length !== 0) {
          this.tabList = response.data;

          this.activeName = this.tabList[0].anotherName;
          this.activeId = this.tabList[0].id;
          this.getDeviceDetailInfo();
        } else {
          this.tabList = [];
          this.listdata = [];
        }
      });
    },
    editClick() {
      if (this.tabList.length > 0 && this.listdata.length > 0) {
        this.title = "编辑设备信息";
        this.dialogVisible = true;
        this.getNetDevList();
        this.getGroupDetailList();
        this.form.name = this.devInfo.name;
        this.form.pid = this.devInfo.pid;
        this.form.did = this.devInfo.did;

        //加载分组信息
      } else {
        this.$message.warning("当前设备模板缺失");
      }
    },

    getGroupDetailList() {
      getGroupDetailList(this.activeId).then((response) => {
        if (response.code === "A0000") {
          response.data.forEach((item) => {
            if (item.children.length !== 0) {
              item.children.forEach((it) => {
                if (it.phase !== "M" && it.phase !== null && it.phase !== "T") {
                  it.name = it.phase + "相" + it.name;
                }
              });
            }
          });
          console.log(response.data);
          this.groupData = response.data;
        } else {
          this.groupData = [];
        }
      });
    },

    handleClick(tab, event) {
      this.listdata = [];
      this.activeId = tab.label;

      this.getDeviceDetailInfo();
    },

    test() {
      console.log(66666);
      console.log(this.groupData);
    },
  },
};
</script>
<style lang="less" scoped>
.ui-container {
  padding: 30px;
  height: 100%;
  width: 100%;
}

.conent {
  padding: 0px;
}

.el-popup-parent--hidden {
  padding-right: 0 !important;
}

.bg-purple-dark {
  background: #e8ecf3;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.pad {
  padding: 0.5%;
}
.text {
  font-size: 14px;
  font-weight: bold;
}
.buttons {
  font-size: 14px;
  font-weight: bold;
  color: rgb(31, 162, 223);
}
.right-top {
  border-style: solid hidden hidden hidden;
  color: rgb(7, 131, 161);
  border: 1.5px solid rgb(7, 131, 161);
}

.gr-img {
  width: 1.5vw;
  height: 3vh;
  float: left;
}

.gr-but1 {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.gr-but2 {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.gr-des {
  padding: 10px;
  font-size: 24px;
  color: rgb(7, 131, 161);
}
.el-dialog .el-dialog__body {
  max-height: 90vh;
}
.el-tree {
  font-size: 14px;
  font-weight: bold;
  color: #000;
}
::v-deep .el-dialog .el-dialog__body {
  max-height: 90vh;
}

::v-deep .el-tree-node__content:hover {
  background-color: #4ba6d0;
  color: #fff;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  // 设置颜色
  background-color: rgba(
    5,
    74,
    101,
    0.5
  ); // 透明度为0.2的skyblue，作者比较喜欢的颜色
  color: rgba(7, 234, 250, 0.991); // 节点的字体颜色
  font-weight: bold; // 字体加粗
}
</style>

