<template>
  <div class="scada-tree scada-display-plugin" v-loading="loading">
    <label style="font-size: 14px;">名称搜索</label>
    <el-input class="filterText" placeholder v-model="filterText"></el-input>
    <el-tree
      style="margin-top:20px;color:white"
      :data="scadaData"
      ref="scadaTree"
      node-key="ZBID"
      :filter-node-method="filterNode"
      :default-expanded-keys="expandedKeys"
      :default-checked-keys="checkedProp"
      :props="defaultProps"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <el-switch
          style="display: block"
          :width="32"
          v-model="node.checked"
          active-color="#409EFF"
          inactive-color="#404040"
          @change="selectChange(node, data)">
        </el-switch>
        <span style="margin-left:20px; display: block">{{ node.label }}</span>
        <i class="iconfont" @click="dealBox(node,data)" :class="{'icon-lunkuodasan-':!data.IS_COLLECT,'icon-shoucang':data.IS_COLLECT}" style="position: absolute; right: 5px; color:#cccc27"></i>
      </span>
    </el-tree>
  </div>
</template>

<script>``
import Api from "./common/apiUtils";

export default {
  name: "scadaTree",
  components: {},
  props: {
    httpProp: {
      default: ""
    },
    checkedProp: {
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      keys:[],
      scadaData: [], // scada树数据
      defaultProps: {
        children: "children",
        label: "ZBNAME"
      },
      loading: true,
      defaultCheckedKeys: [], // 选中的项
      expandedKeys: [], // 默认展开的项
      filterText: ""
    };
  },
  created() {
    this.apiUtil = new Api(this.httpProp);
  },
  mounted() {
    this.getScadaData();
  },
  watch: {
    filterText(val) {
      this.$refs.scadaTree.filter(val);
      setTimeout(() => {
        this.retractNode();
      }, 0);
    }
  },
  methods: {
    filterNode(value, data) {
        if (!value) return true;
        return data.ZBNAME.indexOf(value) !== -1;
    },
    getScadaData() {
      this.apiUtil.getData("/api/scada/tree" + '?username=' + (window.uid||'admin')).then(res => {
        if (res) {
          this.scadaData = res.data;
          this.loading = false;
        }
      });
    },
    checkedChange(val,node){
      // node.checked = val
      this.$set(node,'checked',val)
      if(node.childNodes&&node.childNodes.length>0){
        node.childNodes.forEach(item => {
          this.checkedChange(val,item)
        })
      }
    },
    selectChange(node, data){
      this.checkedChange(node.checked,node)
    },
    async getChecked() {
      let res = await this.$refs.scadaTree.getCheckedNodes();
      let a = res;
      return a;
    },
    setCheckedNodes(nodes) {
      let keys = (nodes || []).map(item => item.ZBID)
      this.$refs.scadaTree.setCheckedKeys(keys);
      // this.$refs.scadaTree.setCheckedNodes(nodes);
    },
    getKey(node,child){
      !child&&(this.keys = [])
      this.keys.push(node.key)
      if(node.childNodes&&node.childNodes.length>0){
        node.childNodes.forEach(item => {
          this.getKey(item,true)
        })
      }
      // return this.$refs.scadaTree.setCheckedNodes(data);
    },
    collectNode(node,tof,data){
      let val = tof?data:!node['IS_COLLECT'];
      this.$set(node,'IS_COLLECT',val)
      if(node.children&&node.children.length>0){
        node.children.forEach(item => {
          this.collectNode(item,true,val)
        })
      }
    },
    dealBox(node,data){
      let type = !data['IS_COLLECT'];
      this.collectNode(data);
      this.getKey(node);
      let obj = {
        "username": window.uid||'admin',
        "scada_id": this.keys.join(",")
      }
      type?(this.apiUtil.addCollect(obj).then(res=>{console.log(res)})):(this.apiUtil.delCollect(data).then(res=>{console.log(res)}));
    }
  }
};
</script>

<style scoped>
.scada-tree {
  height: calc(100% - 30px);
  padding: 15px;
}
.scada-tree .filterText {
  width: 70%;
  margin-left: 20px;
  height: 25px;
  line-height: 25px;
}
.scada-tree .el-tree {
  background-color: var(--main-two);
  margin-bottom: 10px;
}
.scada-tree .el-tree .el-tree-node__content:hover {
  background-color: var(--main-three);
}
.scada-tree .el-tree .el-checkbox__inner {
  z-index: auto;
}
.scada-tree .el-tree .custom-tree-node {
  width: 100%;
}
.scada-tree .wjx {
  float: right;
  color: var(--start-collect);
  font-size: 12px;
  cursor: pointer;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  padding-right: 8px; 
}
</style>