<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="grid-content">
          <div class="operate-left">
            <el-tooltip class="item" effect="dark" content="新增" placement="top-start">
              <i class="el-icon-plus" @click="add" :class="addIcon?'addIcon':''"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <i class="el-icon-delete"  :class="deleteIcon?'deleteIcon':''"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导出" placement="top-start">
              <i class="el-icon-download" ></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导入" placement="top-start">
              <i class="el-icon-upload2"></i>
            </el-tooltip>
            
          </div>
          <el-input placeholder="搜索设备名称" v-model="queryParams" style="margin-bottom: 10px;"></el-input>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
           
          >
            <span slot-scope="{ node, data }" class="slot-node"">
              <template>
                <i
                  class="el-icon-box"
                  v-if="data.areaName"
                  style="margin-right: 5px;"
                ></i>
                <i
                  class="el-icon-takeaway-box"
                  v-if="data.powerMainEquFlag=='Yes'"
                  style="margin-right: 5px;color:#409eff"
                ></i>
                <i
                  class="el-icon-set-up"
                  v-if="data.powerMainEquFlag=='No'"
                  style="margin-right: 5px;color:#a9c52b"
                ></i>
                <span>{{ node.label }}</span>
              </template>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <el-empty description="右侧功能暂未开发" v-if="!show"></el-empty>
        <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.deviceName"></el-input>
            </el-form-item>
            <el-form-item label="设备类型">
              <el-select v-model="form.deviceTypeId" placeholder="请选择" :disabled="form.deviceName?true:false">
                <el-option :label="item.deviceTypeName" :value="item.deviceTypeId" v-for="item in deviceTypeData" :key="item.deviceTypeId"></el-option>
                <!-- deviceTypeData -->
              </el-select>
            </el-form-item>
            <el-form-item label="设备编号">
                <el-input v-model="form.deviceCode"></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 >
import { treeAreaDeviceSelect,devicetypeList,deviceQuery } from "@/api/equipment/entry";
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: "areaName",
        label: function (data) {
          return data.areaName || data.deviceName;
        },
      },
      titleName: "",
      form: {},
      show: false,
      deleteIcon: true,
      addIcon:true,
      deviceTypeData:[],
    };
  },
  mounted() {
    treeAreaDeviceSelect().then((res) => {
      
      if (res.code == 200) {
        this.treeData = res.data;
      }
    });
    devicetypeList().then(res=>{
      console.log(res);
      if(res.code==200){
        this.deviceTypeData=res.data;
      }
    })
  },
  methods: {
    handleNodeClick(data) {
      this.titleName = data.areaName || data.deviceName;
      if (data.areaName) {
        this.show = false;
        this.deleteIcon=true;
        this.addIcon=false;
      } else if (data.deviceName) {
        this.show = true;
        this.titleName = "编辑" + data.deviceName;
        this.deleteIcon=false;
        this.addIcon=true;
        deviceQuery(data.deviceId).then(res=>{
          console.log(res)
          if(res.code==200){
            this.form=res.data
          }
        })
      }
    },
    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;
}
::v-deep .el-tree-node__content {
  height: 34px !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;
}
.deleteIcon,.addIcon {
  color: #dddddd;
  cursor: not-allowed;
}
</style>
