<!-- 预警图片 -->
<template>
  <div class="innerMargin">
      <el-card class="box-card">
        <div class="top">
          <div>预警设置</div>
          <div>
            <el-button
              type="grayInfo"
              size="small"
              @click="resetDate()"
              >重置</el-button
            >
            <el-button
              type="blueInfo"
              size="small"
              @click="saveQxzData()"
              >保存</el-button
            >
          </div>
        </div>
        <div class="bottom">
            <div class="timeLIneLeft">
                <!-- <div class="title">项目名称</div> -->
                <div class="timeTree" :style="{'height':districtHeight-20+'px'}">
                  <div class="scroll">
                    <el-scrollbar>
                      <el-tree 
                        :data="menuData" 
                        accordion
                        :props="defaultProps"
                        node-key="name"
                        ref="tree"
                        :default-expanded-keys="[menuDataFirst]"
                        :highlight-current="true"
                        :check-on-click-node="true"
                        @node-click="treeClick">
                          <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                              <!-- <i :class="[node.data.leaf?'el-icon-document':'',node.expanded?'el-icon-folder-opened':'el-icon-folder']"></i>{{ data.label }} -->
                              <i :class="[renderIconContent(node,data),'treeicon']"></i>{{ data.name }}
                            </span>
                          </span>
                      </el-tree>
                    </el-scrollbar>
                  </div>
                </div>
            </div>
            <div class="warnSetRight">
              <div :style="{'height':districtHeight+'px'}">
                  <div class="scroll">
                    <el-scrollbar>
                      <div class="eleWarnSet">
                        <div class="eleItem" v-for="(item,index) in equipEleListCopy" :key="item.e">
                          <div class="title">
                            <div>{{index+1}}</div>
                            <div>{{item.name}}：<span>{{item.num}}</span>{{item.unit}}</div>
                          </div>
                          <div class="setVal">
                            <div>
                              <el-input v-model="item.max" type="number" placeholder="请输入上限值"></el-input>
                            </div>
                            <div>
                              <el-input v-model="item.maxtxt" placeholder="请输入操作"></el-input>
                            </div>
                            <div>
                              <el-input v-model="item.min" type="number" placeholder="请输入下限值"></el-input>
                            </div>
                            <div>
                              <el-input v-model="item.mintxt" placeholder="请输入操作"></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-scrollbar>
                  </div>
              </div>
            </div>
        </div>
      </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 测试v-viewer注册
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    //这里存放数据
    return {
      id:this.$store.state.cbd_photo_id,
      d_id:this.$store.state.cbd_photo_did,
      id:'867435052201324',
      d_id:829,
      menuData: [],
      menuDataFirst:'',
      defaultProps: {
        children: 'children',
        label: 'name1',
      },
      districtHeight:800,
      currProjectId:'',
      equipEleList:[],
      equipEleListCopy:[],
    };
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getProject() {
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.classify_page",
        data: this.qs.stringify({
          device_type:'11',
        })
      }).then(res => {
        if (res.data.message == "") { 
          var dat  = res.data.data;
          this.menuData = dat.filter((item)=>{
            return item.children.length>0
          });
          console.log(this.menuData);
          if(this.menuData.length){
            this.menuDataFirst = this.menuData[0].name;
            this.currProjectId = this.menuData[0].children[0].device_id;
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.menuData[0].children[0].name);
            })
            this.getQxzEle()
          }
        }
      });
    },
    renderIconContent(node,data){
      if(node.data.leaf){
        return 'el-icon-document document'
      }else{
        if(node.expanded){
          return 'el-icon-folder-opened'
        }else{
          return 'el-icon-folder'
        }
      }
      
    },
    treeClick(data) {
      console.log(data);
      if(data.children){
      }else{
        this.currProjectId = data.device_id;
        this.getQxzEle()
      }
    },
    getQxzEle(){
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.warning_conf",
        data: this.qs.stringify({
          device_id:this.currProjectId,
        })
      }).then(res => {
        if (res.data.message == "") {
            let arr = new Array();
            let conf = res.data.data.device_conf;
            let dat = res.data.data.dat;
            let deploy = JSON.parse(res.data.data.alarm_conf);
            
            for (let i1 in conf) {
              if (conf[i1]) {
                let arr2 = conf[i1].split("#");
                let obj = {};
                obj.e = "e" + i1.slice(1);
                obj.name = arr2[0];
                obj.unit = arr2[1];
                
                obj.max = deploy[i1][0];
                obj.maxtxt = deploy[i1][1];
                obj.min = deploy[i1][2];
                obj.mintxt = deploy[i1][3];

                for (let i2 in dat) {
                  if (i1 == i2) {
                    let arr3 = dat[i2].split("#");
                    obj.num = arr3[0] == "-99.99" ? "N/A" : arr3[0];
                    obj.icon = arr3[1];
                    arr.push(obj);
                  }
                }
              }
            }
            arr = arr.sort((a, b) => {
              return Number(a.e.slice(-1)) - Number(b.e.slice(-1));
            });
            this.equipEleList = arr;
            this.equipEleListCopy = JSON.parse(JSON.stringify(arr))
        }
      });
    },
    saveQxzData(){
      var confData = {};
      for(var i = 0;i<this.equipEleListCopy.length;i++){
        confData[this.equipEleListCopy[i].e]=[this.equipEleListCopy[i].max,this.equipEleListCopy[i].maxtxt,this.equipEleListCopy[i].min,this.equipEleListCopy[i].mintxt]
        if(i == this.equipEleListCopy.length-1){
          var data = {
            device_id:this.currProjectId,
            conf:JSON.stringify(confData)
          }
          this.$axios({
            method: "post",
            url: "/api/api_gateway?method=weather.weather.warning_conf_save",
            data: this.qs.stringify(data)
          }).then(res => {
            if (res.data.message == "") { 
              this.$message({
                message: '预警设置成功',
                type: 'success'
              });
            }
          });
          
        }
      }
      
    },
    resetDate(){
      this.equipEleListCopy = JSON.parse(JSON.stringify(this.equipEleList))
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getProject()
    this.districtHeight = `${document.documentElement.clientHeight}`-230
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.top,.bottom,.photoTime{
  display: flex;
  justify-content: space-between;
}
.top{
  >div:nth-child(2){
    margin-right: 34px;
  }
}
.timeLIneLeft{
  width: 300px;
  max-height: 700px;
  overflow: auto;
  .title{
    font-size: 14px;
    color: #0195ff;
  }
}
.bottom,.warnSetRight{
  flex: 1;
}

.el-tree{
  font-size: 14px;
  .treeicon{
    margin-right: 5px;
    color: #f0bb25;
  }
  .document.treeicon{
    color: #d5eeff;
  }
  .is-current{
    .treeicon:nth-child(1){
      color: #ffa02a;
    }
  }
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d5eeff;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #0295ff;
    border-color: #006fbe;
}
// 滚动条
.timeTree{
  margin-right: 20px;
  // height: 600px;
}
.scroll {
    height: 100%;
    overflow-y: hidden;
    }
    .el-scrollbar{
    height: 100%;
    }
    .el-scrollbar__bar{
    &.is-vertical{
        width:100px;//滚动条宽度
    }
    }
    /deep/.el-scrollbar__wrap{
    overflow-y: auto;
    overflow-x:hidden;
    }
    /deep/.el-scrollbar__view{
      width: 99%;
    }
    /deep/.el-scrollbar__thumb{
      background-color: rgb(2 149 255);
    }
    .el-scrollbar__thumb {
    // 可设置滚动条颜色
    background: red;
}
// 预警设置
.warnSetRight{
  margin-left: 10px;
}
.eleWarnSet{
  .eleItem{
    .title{
      display: flex;
      justify-content: left;
      span{
        font-size: 19px;
        color: #ff5a5a;
      }
      >div:nth-child(1){
        width: 26px;
        height: 26px;
        background: #0295ff;
        border-radius: 50%;
        text-align: center;
        line-height: 26px;
        color: #fff;
      }
      >div:nth-child(2){
        line-height: 30px;
        margin-left: 10px;
        font-size: 14px;
        color: #000;
        font-weight: 700;
      }
    }
    .setVal{
      margin: 10px 0 10px 40px;
      display: flex;
      justify-content: space-between;
      >div:nth-child(1),>div:nth-child(3){
        width: 3.125rem;
      }
      >div:nth-child(2),>div:nth-child(4){
        flex: 1;
      }
      div{
        /deep/.el-input{
          width: 94%;
        }
      }
    }
  }
}
.timeTree{
  position: relative;
}
.timeTree::after{
  position: absolute;
  content: '';
  width: 6px;
  background: #e8e8e8;
  right: 2px;
  top: 0;
  bottom: 0;
}
</style>