<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="operate-left">
          <i class="el-icon-plus" @click="add"></i>
          <i class="el-icon-delete"></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>
      </el-col>
      <el-col :span="19">
        <div class="right">
          <el-button
            type="primary"
            @click="add"
            v-if="!show && (type == 0 || type == 1)"
            >添加设备</el-button
          >
          <i
            class="el-icon-close closeBtn"
            v-if="show && type == 0"
            @click="close"
          ></i>
          <div v-if="show">
            <div class="right-title">{{ rightTitle }}</div>

            <el-form :model="formData">
              <el-form-item label="设备类型名称">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item label="设备类别编号">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item label="所属专业">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>

              <el-form-item label="相数" v-if="type !== 0&&type !== 1">
                <el-radio-group v-model="formData.resource">
                  <el-radio label="无相数"></el-radio>
                  <el-radio label="单相"></el-radio>
                  <el-radio label="三相"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="相别" v-if="type !== 0&&type !== 1">
                <el-radio-group v-model="formData.resource">
                  <el-radio label="无相数"></el-radio>
                  <el-radio label="A"></el-radio>
                  <el-radio label="B"></el-radio>
                  <el-radio label="C"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "equipment_type",
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          type: 1,
          children: [
            {
              label: "二级 1-1",
              type: 2,
              children: [
                {
                  label: "三级 1-1-1",
                  type: 3,
                  children: [
                    {
                      label: "四级 1-1-1-1",
                      type: 4,
                    },
                    {
                      label: "四级 1-1-1-2",
                      type: 4,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      rightTitle: "添加设备",
      queryParams: "",
      formData: {},
      show: false,
      type: 0,
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data.type);
      this.type = data.type;

      if (data.type == 0) {
        this.rightTitle = "添加设备";
        this.show = true;
      } else if (data.type !== 0 && data.type !== 1) {
        this.show = true;
        this.rightTitle = "编辑设备";
      } else if (data.type == 1) {
        this.show = false;
      }
    },
    add() {
      this.show = true;
      this.type = 0;
      this.rightTitle = "添加设备";
    },
    close() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.operate-left {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  i {
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
  }
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  color: #4a9de7 !important;
  // color: #fff !important;
}
.right {
  padding: 0 50px;
  width: 50%;
  .right-title {
    font-size: 20px;
    margin: 20px 0;
  }
  .closeBtn {
    font-size: 30px;
    cursor: pointer;
  }
}
</style>
