<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="grid-content">
          <div class="operate-left">
            <i class="el-icon-plus" @click="add"></i>
            <i class="el-icon-delete"></i>
            <i class="el-icon-download"></i>
            <i class="el-icon-upload2"></i>
          </div>
          <el-input placeholder="搜索设备名称" v-model="queryParams"></el-input>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            default-expand-all
          >
            <span slot-scope="{ node, data }" class="slot-node">
              <template>
                <i
                  class="el-icon-box"
                  v-if="data.type == 1 || data.type == 2 || data.type == 3"
                ></i>
                <i
                  class="el-icon-s-operation"
                  v-if="data.type == 4"
                  :class="{
                    'el-icon-folder': !node.expanded,
                    'el-icon-folder-opened': node.expanded,
                    'el-icon-s-operation': data.type === 4,
                  }"
                ></i>
                <span>{{ node.label }}</span>
              </template>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content-right" v-if="show">
          <div class="titleName">{{ titleName }}</div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="设备名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="设备类型">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备编号">
                <el-input v-model="form.name"></el-input>
                <span class="serial-number">设备编号用于生产复核，需与SCADA系统中的设备编号一致</span>
            </el-form-item>
            <el-form-item label="显示排序">
                <el-input-number v-model="form.num" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="实物ID">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="   监控索引号">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="设备型号">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="设备厂家">
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="x坐标">
                <el-input-number v-model="form.numX" controls-position="right" :min="-20" :max="20"></el-input-number>
                <span class="number-title">(建议最小值-20，最大值20)</span>
            </el-form-item>

            <el-form-item label="y坐标">
                <el-input-number v-model="form.num" controls-position="right" :min="66"></el-input-number>
                <span  class="number-title">(建议66)</span>
            </el-form-item>

            <el-form-item label="z坐标">
                <el-input-number v-model="form.num" controls-position="right" :min="-6" :max="20"></el-input-number>
                <span  class="number-title">(建议最小值-6，最大值20)</span>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script >

export default {
  name: "entry",
  data() {
    return {
      queryParams: "",
      treeData: [
        {
          label: "一级 1",
          type: 1,
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                  children: [
                    {
                      label: "四级 1-1-1-1",
                      type: 4,
                    },
                    {
                      label: "四级 1-1-1-2",
                      type: 4,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      titleName: "",
      form:{},
      show:false
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      this.titleName = data.label;
      if(data.type==4||data.type==3){
        this.show=true
      }else{
        this.show=false
      }
    },
    add(){
        this.show=true
    }
  },
};
</script>

<style lang="scss" scoped>
.operate-left {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  i {
    font-size: 20px;
    margin-left: 5px;
    cursor: pointer;
  }
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  color: #4a9de7 !important;
  // color: #fff !important;
}
/*节点失焦时的背景颜色*/
//   .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
//     background-color: #4a9de7 !important;
//     color: #fff !important;
//   }
.grid-content-right {
  padding: 0 20%;
}
.titleName {
  font-size: 26px;
  padding: 10px;
}
.number-title{
    margin-left: 10px;
}
.serial-number{
    color: #999;
    font-size: 12px;
    margin-bottom: 30px;
    margin-top: 20px;
}
</style>
