<template>
  <div class="paramBindingBox">
    <div class="leftTree">
      <h3>
        设备列表
        <el-button type="primary" @click="generate" size="mini"
          >生成rptparamindex</el-button
        >
      </h3>
      <div class="treeBox">
        <el-tree
          ref="tree"
          :data="paramTreeData"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="defaultExpandedKeys"
          highlight-current
          :current-node-key="currentNodekey"
          :expand-on-click-node="true"
          @node-click="handleNodeClick"
          default-expand-all
        >
          <template class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <span>{{ data.name || data.mc }}</span> -->
            <span v-if="data.mc">
              <span>{{ data.mc }} </span>
            </span>
            <span v-else-if="data.name">
              <span class="el-icon-document" style="margin-right: 6px"> </span>
              <span :title="data.name">{{ data.name }} </span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="paramTable">
      <div class="paramHead">
        <h3>参数绑定</h3>
      </div>
      <div class="paramContain">
        <div class="headSelect">
          <div class="iedlistBox">
            <span>ied列表：</span>
            <el-select
              v-model="iedName"
              placeholder="请选择"
              @change="changeIedname"
            >
              <el-option
                v-for="item in iedOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <div class="ljsbBox">
            <span>逻辑设备：</span>
            <el-select
              v-model="ljName"
              placeholder="请选择"
              @change="changeljname"
            >
              <el-option
                v-for="item in ljOptions"
                :key="item.paramIndex"
                :label="item.paramIndex"
                :value="item.paramIndex"
              ></el-option>
            </el-select>
          </div>
          <el-button
            :disabled="ljName == '' || iedName == ''"
            @click="saveBind"
            type="primary"
            style="margin-left: 16px"
          >
            绑定
          </el-button>
          <el-button
            @click="unBind"
            type="primary"
            :disabled="jbFlag"
            style="margin-left: 16px"
          >
            解绑
          </el-button>
        </div>
        <el-divider></el-divider>

        <div class="showMsgBox">
          <p class="warnMsg" v-if="warnMsg">
            <el-tag
              type="warning"
              v-for="(item, index) in warnMsg"
              :key="index"
              >{{ item }}</el-tag
            >
          </p>
          <div class="outside">
            <p class="outsideLabel" v-for="(item, index) in bindInfoArray">
              <span
                >{{ item.comment }}
                <b>({{ item.name }})</b>
              </span>
              <span>
                <em
                  v-for="(item2, index2) in previewData"
                  :key="index2"
                  v-if="item.name == item2.colName"
                  >{{ item2.param }}</em
                ></span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getParamTreeApi,
  getinstListApi,
  getBindApi,
  iedListApi,
  previewApi,
  bindApi,
  unbindApi,
  generateParamindexApi,
} from "@/utils/api/index";
export default {
  name: "paramBinding",
  components: {},
  data() {
    return {
      filterText: "", //查询字段过滤
      paramTreeData: [], // 树状图数据
      defaultExpandedKeys: [],
      currentNodeData: [], //选中的数据
      currentId: "", //选择的id
      crrrentName: "",
      currentNodekey: "", //选中的节点
      selectedNode: null, // 当前选中的节点
      defaultProps: {
        children: "children",
        label: "mc",
      },
      bindInfo: "", //绑定信息
      bindInfoArray: "",
      iedName: "", //选中的iedname
      iedOptions: [],
      ljName: "",
      ljOptions: [],
      icdid: "",
      previewData: [],
      defaultShow: true, //默认显示
      drawer: false,
      warnMsg: "",
      jbFlag: false,
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getParamTreeList();
  },
  methods: {
    getParamTreeList() {
      getParamTreeApi()
        .then((res) => {
          console.log(res);
          this.paramTreeData = res.data;
          this.defaultExpandedKeys = [this.paramTreeData[0].id];
          this.currentNodeData =
            this.paramTreeData[0].children[0].children[0].children[0];
          this.currentNodekey =
            this.paramTreeData[0].children[0].children[0].children[0].id;
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
            this.handleNodeClick(this.currentNodeData);
          });
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    handleNodeClick(data, node) {
      console.log(data);
      if (data.hasOwnProperty("children")) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodeKey);
        });
        return;
      }
      this.currentNodeKey = data.id;
      this.getBindList();
      this.getiedList();
    },
    //获取绑定信息
    getBindList() {
      getBindApi({
        eqmid: this.currentNodeKey,
      })
        .then((res) => {
          console.log(res);
          console.log("aaaaaaaaaaa");
          this.bindInfo = res.data;
          if ((res.data.iedName == null) & (res.data.icdid == null)) {
            this.jbFlag = true;
          } else {
            this.jbFlag = false;
          }
          if (res.data.columnList != null) {
            this.bindInfoArray = res.data.columnList;
            this.previewData = res.data.attList;
            this.iedName = res.data.iedName;
            this.icdid = res.data.icdid;
            this.changeIedname(this.iedName);
          } else {
            this.iedName = "";
            this.ljOptions = [];
            this.ljName = "";
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取iedlist
    getiedList() {
      iedListApi()
        .then((res) => {
          console.log(res);
          this.iedOptions = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换iedname
    changeIedname(val) {
      this.iedName = val;
      this.ljName = "";
      this.warnMsg = "";
      console.log(this.iedName);
      console.log(this.iedOptions.find((item) => item === val));
      this.getinstList();
    },
    //获取逻辑设备列表
    getinstList() {
      getinstListApi({
        iedName: this.iedName,
      })
        .then((res) => {
          console.log(res);
          this.ljOptions = res.data;
          if (this.icdid !== null) {
            this.ljName = this.ljOptions.find(
              (item) => item.id === this.icdid
            ).paramIndex;
          } else {
            this.ljName = "";
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //选择逻辑l设备
    changeljname(val) {
      console.log(val);
      console.log(this.ljOptions.find((item) => item.paramIndex === val));
      this.icdid = this.ljOptions.find((item) => item.paramIndex === val).id;
      this.warnMsg = "";
      previewApi({
        eqmid: this.currentNodeKey,
        icdid: this.icdid,
      })
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.previewData = res.data;
            this.warnMsg = res.warnMsg.split("\n\r");
            console.log(this.warnMsg);
            console.log(this.bindInfoArray);
            console.log(this.previewData);
          } else {
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //保存
    saveBind() {
      bindApi({
        eqmid: this.currentNodeKey,
        icdid: this.icdid,
      })
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              showClose: true,
              message: "保存成功",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    generate() {
      generateParamindexApi()
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              showClose: true,
              message: "生成成功",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //解绑
    unBind() {
      unbindApi({
        eqmid: this.currentNodeKey,
      })
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              showClose: true,
              message: "解绑成功",
              type: "success",
            });
            this.getBindList();
          } else {
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
  },
};
</script>
<style lang="less">
.paramBindingBox {
  display: flex;
  height: 100%;
  .leftTree {
    min-width: 220px;
    max-width: 220px;
    height: 100%;
    overflow: auto;
    //border: 1px solid #fff;
    margin-right: 24px;
    background: rgba(8, 9, 36, 0.28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 4px 44px 0 #106cde;
    padding: 0px 12px;
    h3 {
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .treeBox {
      width: 100%;
      height: calc(100% - 48px);
      background-color: #fff;
      padding-top: 8px;
      .searchBar {
        width: 94%;
        margin: 0px auto;
        margin-bottom: 8px;
      }
      .el-tree {
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100% - 40px);
        .el-tree-node__content {
          height: 32px;
          font-size: 12px;
        }
        .custom-tree-node {
          color: #333;
          overflow: hidden;
          span {
            display: flex;
            display: inline-table;
            overflow: hidden;
            align-items: center;
          }
          .num {
            color: #169e8c;
          }
        }
      }

      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        // 设置颜色
        color: #fff;
        background: #3889cf;
        .custom-tree-node {
          color: #fff;
          //overflow: hidden;
          span {
            display: flex;
            //overflow: hidden;
            align-items: center;
            .num {
              color: #fff;
            }
            .iconfont {
              //width: 30px;
              display: inline-table;
            }
          }
        }
      }
      .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      /* //有子节点 且未展开 */
      .el-tree .el-icon-caret-right:before {
        content: "\e783";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
        color: #333;
      }

      /* //有子节点 且已展开 */
      .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        content: "\e781";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
        color: #333;
      }

      /* //没有子节点 */
      .el-tree .el-tree-node__expand-icon.is-leaf::before {
        background: #fff;
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        font-size: 16px;
        background-size: 16px;
      }
    }
  }
  .paramTable {
    flex: 1;
    overflow-x: hidden;
    background: rgba(8, 9, 36, 0.28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 4px 44px 0 #106cde;
    padding: 0px 12px;
    .paramHead {
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h3 {
        font-size: 14px;
        color: #fff;
        font-weight: normal;
        height: 40px;
        line-height: 40px;
      }
      .searchMain {
        display: flex;
        align-items: center;
      }
    }
    .paramContain {
      height: calc(100% - 42px);
      //background: #fcc;
      background: #fff;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      color: #333;
      .headSelect {
        height: 40px;
        display: flex;
        align-items: center;
        line-height: 40px;
        .iedlistBox {
          margin-left: 18px;
        }
        .ljsbBox {
          margin-left: 18px;
        }
      }
      .el-divider--horizontal {
        margin: 12px 0px;
      }

      .showMsgBox {
        width: calc(100% - 80px);
        max-height: calc(100% - 64px);

        padding: 0px 40px;
        overflow: auto;
        .warnMsg {
          //padding: 0px 12px 0px 12px;

          .el-tag {
            display: block;
            margin-right: 12px;
            margin-bottom: 12px;
            font-size: 14px;
          }
        }
        .outside {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          .outsideLabel {
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            margin-top: 2px;
            span {
              height: 40px;
              line-height: 40px;
              min-width: 280px;
              padding: 0px 12px;
              width: max-content;
              border: 1px solid #ededed;
              text-align: center;
              b {
                font-weight: normal;
                font-size: 12px;
                color: #666;
              }
              &:last-child {
                width: 200px;
              }
              em {
                font-style: normal;
              }
            }
          }
        }
      }
    }
  }
}
</style>
